ES5 如何实现数组的 reduce 方法

使用ES5实现数组的reduce方法需要借助函数表达式和作用域管理。reduce方法用于累积数组中的项，并输出单个结果、它接收一个回调函数作为参数、该回调函数被调用时传入四个参数：累计器、当前元素、当前索引、源数组。若初始化值提供了，累计器开始时等于该初始化值，否则等于数组的第一个元素。在ES5中，可以通过检查数组的reduce方法是否存在来判定是否需要实现。若不存在，可以通过扩展数组原型来添加自定义reduce实现。

一、检查和扩展原型

首先，需要检查数组是否已有reduce方法，如果不存在，则进行扩展：

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    // reduce方法的实现细节将在下面提供
  };
}

二、实现回调逻辑

在reduce函数体内，定义逻辑以迭代数组元素：

Array.prototype.reduce = function(callback, initialValue) {
  // 根据ECMAScript规范，callback必须是一个函数类型
  if (this == null || typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var i, length = this.length, accumulator, isValueSet = false;
  // 如果提供了 initialValue，则设置累加器为 initialValue，并标记值已设置
  if (arguments.length > 1) {
    accumulator = initialValue;
    isValueSet = true;
  }
  // 遍历数组元素
  for (i = 0; i < length; i++) {
    if (this.hasOwnProperty(i)) { // 检查属性是否为数组的直接属性
      if (isValueSet) { 
        // 调用callback，参数顺序分别为accumulator、currentValue、currentIndex和array
        accumulator = callback(accumulator, this[i], i, this);
      } else {
        // 如果累加器没有初始值，则将数组的第一个有效元素赋给累加器
        accumulator = this[i];
        isValueSet = true;
      }
    }
  }
  // 如果累加器没有设置初始值，抛出错误
  if (!isValueSet) {
    throw new TypeError('Reduce of empty array with no initial value');
  }
  return accumulator;
};

三、处理稀疏数组

reduce方法在处理稀疏数组时不会调用callback函数：

// ...继续上述 Array.prototype.reduce 的实现
  // 遍历数组元素
  for (i = 0; i < length; i++) {
    if (this.hasOwnProperty(i)) { 
      // 在这里不需要额外处理稀疏数组，因为 hasOwnProperty 已经确保了这一点
      // Code as before...
    } // 稀疏数组的未定义项将不会触发回调
  }
// ...剩余的reduce实现

四、完成和测试

最后，验证reduce的实现是否正确，通过在不支持原生reduce方法的环境中（如旧版浏览器）或者手动注释原生reduce方法来测试：

// 在一个不支持 Array.prototype.reduce 的环境中测试以上代码:
var numbers = [1, 2, 3, 4];
var sum = numbers.reduce(function(a, b) {
  return a + b;
}, 0);
console.log(sum); // 输出: 10
var max = numbers.reduce(function(a, b) {
  return Math.max(a, b);
});
console.log(max); // 输出: 4