详解JavaScript之Array.reduce源码解读

简介

Array.reduce() 是 Javascript 中一个十分有用的函数，它可以将数组转化为单个值。它的使用方式是这样的 array.reduce(callback[, initialValue]) ，其中 callback 是回调函数，initialValue是初始值。在本文中，我们将通过阅读 Array.reduce() 的源代码来深入了解它的实现原理。

代码分析

Array.prototype.reduce = function(callback, initialValue) {
  if (this === null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  const values = Object(this);
  const len = values.length >>> 0;
  let accumulator = initialValue === undefined ? values[0] : initialValue;
  for (let i = initialValue === undefined ? 1 : 0; i < len; i++) {
    accumulator = callback.call(undefined, accumulator, values[i], i, values);
  }
  return accumulator;
};

代码分析：

• 第1个判断语句：如果 .reduce() 中的数组是 null 或 undefined，则抛出 TypeError 异常。
• 第2个判断语句：如果 .reduce() 中的 callback 不是 function 类型，则抛出 TypeError 异常。
• 定义了变量 values， values 中的值等于 .reduce() 中传入的数组 this ，并将它转化为 Object 类型。
• 定义了变量 len，表示 values 的长度 length。
• 定义变量 accumulator，如果初始值 initialValue 未定义，则初始化为 values[0]。
• 如果初始值 initialValue 已定义，则初始化为 initialValue。
• 循环 values 数组从左到右，并更新值，最终返回结果。

示例说明

示例1

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev, curr) => prev + curr);
console.log(sum);

输出结果：15

解释：由于初始值未定义，accumulator 的值被初始化为数组的第一个元素 1，在前四次迭代中，prev 变量等于之前相加后产生的值，而 curr 则代表数组中的当前值，因此它们被相加。 在第五次循环结束后，累加器返回总和 15。

示例2

const arr = [2,4,6,7,8];
const initialValue = 10;
const sum = arr.reduce((prev, curr) => prev + curr, initialValue);
console.log(sum);

输出结果：37

解释：在第一次循环中，prev 的值等于初始值 10， curr 的值等于数组的第一个值 2，然后将它们相加以得到 12。 在第五次循环结束后，累加器返回总和 37。

结论

在 reduce 中，我们需要使用回调函数，这个回调函数接受四个参数：

• accumulator是合并结果，也就是回调函数返回的值，初始值为 initialValue 或者数组的第一个元素。
• currentValue是当前值。
• index是当前值在数组中的索引。
• array是原始的数组。

我们可以通过该函数来实现各种相加、相乘和字符串拼接，可以根据实际情况传递不同的初始值，以达到更好的应用效果。