手动实现 JavaScript 中 Array.prototype.reduce 方法

Array.prototype.reduce 是 JavaScript 中一个非常强大的方法，它用于将数组中的所有元素通过一个累加器函数（reducer）累积成一个单一的值。我们可以手动实现一个类似的 reduce 方法，以更好地理解其工作原理。

实现 reduce 方法

Array.prototype.myReduce = function(callback, initialValue) {
    // 检查 this 是否为 null 或 undefined
    if (this == null) {
        throw new TypeError('Array.prototype.myReduce called on null or undefined');
    }

    // 检查 callback 是否为函数
    if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
    }

    const array = Object(this); // 将 this 转换为对象
    const length = array.length >>> 0; // 确保 length 是一个非负整数

    let accumulator;
    let startIndex = 0;

    // 如果提供了 initialValue，则将其作为累加器的初始值
    if (arguments.length >= 2) {
        accumulator = initialValue;
    } else {
        // 如果没有提供 initialValue，则使用数组的第一个元素作为初始值
        if (length === 0) {
            throw new TypeError('Reduce of empty array with no initial value');
        }
        accumulator = array[0];
        startIndex = 1;
    }

    // 遍历数组，调用回调函数
    for (let i = startIndex; i < length; i++) {
        if (i in array) {
            accumulator = callback(accumulator, array[i], i, array);
        }
    }

    return accumulator;
};

使用示例

const numbers = [1, 2, 3, 4];

// 使用自定义的 myReduce 方法
const sum = numbers.myReduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出: 10

// 使用原生 reduce 方法
const sumNative = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sumNative); // 输出: 10

关键点解释

1. 参数检查：

   • 确保 this 不是 null 或 undefined。
   • 确保 callback 是一个函数。

2. 初始值处理：

   • 如果提供了 initialValue，则将其作为累加器的初始值。
   • 如果没有提供 initialValue，则使用数组的第一个元素作为初始值，并从第二个元素开始遍历。

3. 遍历数组：

   • 使用 for 循环遍历数组，调用 callback 函数，并将当前累加器和当前元素传递给 callback。
   • callback 函数的返回值将作为下一次迭代的累加器。

4. 返回结果：

   • 最终返回累加器的值。

注意事项

• 如果数组为空且没有提供 initialValue，reduce 方法会抛出错误。
• reduce 方法不会改变原数组，而是返回一个新的值。

通过手动实现 reduce 方法，我们可以更深入地理解其内部工作原理，并在需要时对其进行定制化扩展。