关键词

详解JavaScript之Array.reduce源码解读

详解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() 中的数组是 nullundefined,则抛出 TypeError 异常。
  • 第2个判断语句:如果 .reduce() 中的 callback 不是 function 类型,则抛出 TypeError 异常。
  • 定义了变量 valuesvalues 中的值等于 .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 的值等于初始值 10curr 的值等于数组的第一个值 2,然后将它们相加以得到 12。 在第五次循环结束后,累加器返回总和 37

结论

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

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

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

本文链接:http://task.lmcjl.com/news/9820.html

展开阅读全文