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;
};
代码分析:
.reduce()
中的数组是 null
或 undefined
,则抛出 TypeError
异常。.reduce()
中的 callback 不是 function
类型,则抛出 TypeError
异常。values
, values
中的值等于 .reduce()
中传入的数组 this
,并将它转化为 Object
类型。len
,表示 values
的长度 length
。accumulator
,如果初始值 initialValue
未定义,则初始化为 values[0]
。initialValue
已定义,则初始化为 initialValue
。values
数组从左到右,并更新值,最终返回结果。const arr = [1,2,3,4,5];
const sum = arr.reduce((prev, curr) => prev + curr);
console.log(sum);
输出结果:15
解释:由于初始值未定义,accumulator
的值被初始化为数组的第一个元素 1
,在前四次迭代中,prev
变量等于之前相加后产生的值,而 curr
则代表数组中的当前值,因此它们被相加。 在第五次循环结束后,累加器返回总和 15
。
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
是原始的数组。我们可以通过该函数来实现各种相加、相乘和字符串拼接,可以根据实际情况传递不同的初始值,以达到更好的应用效果。
本文链接:http://task.lmcjl.com/news/9820.html