JS的Array.reduce()和Array.reduceRight()区别

Spring Wu 483 2021-03-26

疑问

今天在学习JS数组迭代方法时,遇到了Array.reduce()和Array.reduceRight()这两个方法,看了w3school的教程不是很明白它描述的意思,我虽然知道两个方法的作用都是用于计算值或者一些其他值累积的场景。

Array.reduce()
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight()。

reduce() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和:

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
亲自试一试
请注意此函数接受 4 个参数:

总数(初始值/先前返回的值)
项目值
项目索引
数组本身
上例并未使用 index 和 array 参数。可以将它改写为:

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
亲自试一试
reduce() 方法能够接受一个初始值:

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}
亲自试一试
所有浏览器都支持 Array.reduce(),除了 Internet Explorer 8 或更早的版本:

Yes	9.0	Yes	Yes	Yes
Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce()。

reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和:

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
亲自试一试
请注意此函数接受 4 个参数:

总数(初始值/先前返回的值)
项目值
项目索引
数组本身
上例并未使用 index 和 array 参数。可以将它改写为:

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

最后好不容易从中提取出"从左到右"和"从右到左"两个关键词,我大概理解了他们的意思,其实我觉得把教程换成这样是不是会好理解一点?

Array.reduce()

  • 例子
    let arr = ["1", 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let total = arr.reduce(add);
    function add(total, value){
        return total + value;
    }
  • 运行结果

12345678910

  • 原因

因为reduce()是从左到右迭代,所以第一个是字符串,根据JS的自动类型转换的原则,后面的number都会被认为是字符串,所以add()函数中的+,就是字符串的连接符号,即结果为12345678910,那reduceRight()就不难理解了,自然是从右向左。

Array.reduceRight()

  • 例子
    let arr = ["1", 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let total = arr.reduceRight(add);
    function add(total, value){
        return total + value;
    }
  • 运行结果

541

  • 原因

因为reduceRight()是从右到左迭代,通过add()函数从右到左也就是从number 10~2相加=54,最后遇到字符串"1",按照JS的转换规则那就是54+"1"=541。12