526互联

ES6 中的reduce 方法的使用

发布时间 2023-10-22 15:26:00作者: 踏浪小鲨鱼

reduce() 方法在 JavaScript 中是一个非常有用的数组方法，它对数组中的每个元素应用一个函数，从而将该数组“缩减”为单个值。

reduce() 方法的工作原理是维护一个“累加器”，这是一个值，将在每次迭代中通过返回值被更新。然后，这个函数在每次迭代时都会被调用，并且接收四个参数：累加器，当前元素，当前索引，以及被调用 reduce() 的数组。

这是一个 reduce() 方法的简单示例，它将数组中的所有数字累加起来：

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(total); // 输出 15

这个例子明显可见 reduce() 的工作原理：它开始于一个累加器值为 0 的情况（这是 reduce() 方法的第二个参数为 0 的原因），然后遍历数组中的每个元素。对于每个元素，它将累加器和当前值相加，并将结果作为新的累加器返回。然后，对于数组中的下一个元素，这个过程会再次重复，直到遍历完整个数组。

reduce() 提供了一种非常强大的处理数组的方式，你可以将它用于从数组元素创建新对象，计算数值总和，或者实现其他种类的数组转换和操作。

 

使用 Array.prototype.reduce() 可以将数组转为对象

const arr = ['a', 'b', 'c'];
const obj = arr.reduce((acc, cur, i) => {
    acc[i] = cur;
    return acc;
}, {});

// 在这个例子中，obj 将是 {0: 'a', 1: 'b', 2: 'c'}

在这个例子中，我们使用 reduce 方法从一个累加器（这里是一个空对象）开始，然后迭代数组的每个元素，在累加器对象上创建一个新的属性（属性名是当前索引，属性值是当前项）。

 

Array.prototype.reduce() 是一个内置的 JavaScript 方法，我们不能直接重写它，但我们可以创建一个函数模拟它的行为。以下是一个简单的模拟实现：

function reduce(array, reducer, initialValue) {
    let accumulator = initialValue === undefined ? array[0] : initialValue;
    let startIndex = initialValue === undefined ? 1 : 0;

    for (let i = startIndex; i < array.length; i++) {
        accumulator = reducer(accumulator, array[i], i, array);
    }

    return accumulator;
}

// 使用上述函数
const arr = [1, 2, 3, 4, 5];
const sum = reduce(arr, (accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15

在上述代码中，reduce 函数接受三个参数：

  • array：要迭代的数组。
  • reducer：函数，它接受一个累积量和当前值，以及当前索引和原数组，然后返回更新的累积量。
  • initialValue：可选，它将被作为第一次调用回调函数时的第一个参数（即累积器的初始值）。如果没有提供 initialValue，则将使用数组的第一个元素作为起始值，并从数组的第二个元素开始迭代。

注意，这只是一个基础实现，并未包含所有原生 reduce 方法功能的细节，例如异常处理和某些边缘情况。

我建议在可以使用原生 reduce 方法时，尽可能使用原生方法，因为它已被优化且高度可靠。