当前位置：首页 > news >正文

JS - 重点JS方法温故而知新

news 2025/7/6 1:37:22

一.call()、apply()、bind()

显式绑定：通过call()、apply()、bind()方法把this指向指定参数的对象，叫做显式绑定。

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'YvetteLau',
    sayHi: sayHi
}
 var name = 'Wiliam';
 var Hi = person.sayHi;
 Hi.call(person); //Hello, YvetteLau

三个方法之间的区别：

// 接收1个参数
function sayHi(message) {
    console.log(message + ',', this.name);
}
var person = {
    name: 'YvetteLau'
};
var name = 'Wiliam';// 定义全局变量 name

sayHi.call(person, 'Hello');// Hello, YvetteLau

sayHi.apply(person, ['Hi']);// Hi, YvetteLau

var newSayHi = sayHi.bind(person, 'Howdy');
newSayHi(); //Howdy, YvetteLau

// 接收多个参数
function sayHi(message, emotion) {
    console.log(message + ',', this.name, emotion);
}
var person = {
    name: 'YvetteLau'
};
var name = 'Wiliam';

sayHi.call(person, 'Hello', 'happily');// Hello, YvetteLau happily

sayHi.apply(person, ['Hi', 'cheerfully']);// Hi, YvetteLau cheerfully

var newSayHi = sayHi.bind(person, 'Howdy', 'excitedly');
newSayHi();// Howdy, YvetteLau excitedly

二.reduce

reduce 是 JavaScript 数组对象的一个非常强大且常用的方法，用于对数组中的每个元素执行一个提供的函数，并将结果汇总为单个值。下面为你详细解释其语法及各参数的含义。

语法结构

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数详解

1. `callback`（必需）

callback 是一个用于处理数组中每个元素的函数，它可以接收四个参数，不过通常只需要使用前两个参数，后两个参数是可选的：

accumulator：累加器，它保存着上一次调用 callback 函数的返回值。在第一次调用 callback 时，如果提供了 initialValue，accumulator 就等于 initialValue；如果没有提供 initialValue，accumulator 就等于数组的第一个元素。
currentValue：当前正在处理的数组元素。
index（可选）：当前正在处理的数组元素的索引。
array（可选）：调用 reduce 方法的数组本身。

2. `initialValue`（可选）

initialValue 作为第一次调用 callback 函数时的 accumulator 的初始值。如果没有提供 initialValue，则数组的第一个元素会被用作初始的 accumulator，并且 callback 函数会从数组的第二个元素开始执行。

使用示例

示例 1：数组元素求和，不提供 `initialValue`

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
});
console.log(sum);

在这个例子中，没有提供 initialValue，所以 accumulator 初始为数组的第一个元素 1，currentValue 从第二个元素 2 开始。第一次调用 callback 时，accumulator 是 1，currentValue 是 2，返回 1 + 2 = 3；第二次调用时，accumulator 是 3，currentValue 是 3，返回 3 + 3 = 6，以此类推，最终得到数组元素的总和 15。

示例 2：数组元素求和，提供 `initialValue`

const numbers = [1, 2, 3, 4, 5];
const sumWithInitial = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);
console.log(sumWithInitial);

这里提供了 initialValue 为 0，所以 accumulator 初始为 0，currentValue 从数组的第一个元素 1 开始。第一次调用 callback 时，accumulator 是 0，currentValue 是 1，返回 0 + 1 = 1；第二次调用时，accumulator 是 1，currentValue 是 2，返回 1 + 2 = 3，最终同样得到总和 15。

示例 3：统计数组中每个元素的出现次数

const fruits = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'];
const fruitCount = fruits.reduce((accumulator, currentValue) => {
    if (!accumulator[currentValue]) {
        accumulator[currentValue] = 1;
    } else {
        accumulator[currentValue]++;
    }
    return accumulator;
}, {});
console.log(fruitCount);

在这个示例中，提供了 initialValue 为一个空对象 {}，accumulator 初始为 {}。遍历数组时，检查每个元素是否已经在 accumulator 对象中，如果不在则初始化为 1，如果存在则将其对应的值加 1，最终得到每个元素的出现次数统计 { apple: 3, banana: 2, cherry: 1 }。

注意事项

如果数组为空且没有提供 initialValue，reduce 方法会抛出 TypeError 错误。
如果数组只有一个元素且没有提供 initialValue，或者数组为空但提供了 initialValue，则 reduce 方法不会执行 callback 函数，而是直接返回该元素或 initialValue。

通过这些示例，你应该能更好地理解 reduce 方法的语法和使用方式了。

查看全文

http://www.dtcms.com/a/73173.html