JS Array对象的reduce方法

reduce的用法

array.prototype.reduce()

reduce 方法接受2个参数,一个回调函数,一个可选的自定义值

  • 回调函数

    执行数组中每个值的函数,包含四个参数:

    • 累积变量,默认为数组的第一个成员

      或’自定义累积变量’(见于下方)

    • 当前变量,默认为数组的第二个成员

      数组中正在处理的元素

    • 当前位置 可选

      数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1

    • 原数组 可选

      调用reduce()的原数组

  • 自定义累积变量 可选

    作为第一次调用 回调函数 时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

    注意:自定义累积变量 不是替换掉数组的第一个元素!

reduce的使用

数组求和

1
[1, 3, 5, 7, 9].reduce((x, y) => x + y) // 25

数组求积

1
[2, 3, 5].reduce((x, y) => x * y) // 30

[1, 3, 5, 7, 9]变换成整数13579

1
[1, 3, 5, 7, 9].reduce((x, y) => x * 10 + y) // 13579

把一个字符串'13579'先变成Array [1, 3, 5, 7, 9],再利用reduce() 写出一个把字符串转换为Number的函数

不要使用JavaScript内置的parseInt()函数,利用map和reduce操作实现一个string2int()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';

function string2int(s) {
return s.split('').map(ele => ele * 1).reduce((x, y) => {
return x * 10 + y
})
}

// function string2int(s) {
// return s.split(',').reduce((x, y) => y - 0, 0)
// }

// 测试:
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
if (string2int.toString().indexOf('parseInt') !== -1) {
console.log('请勿使用parseInt()!')
} else if (string2int.toString().indexOf('Number') !== -1) {
console.log('请勿使用Number()!')
} else {
console.log('测试通过!')
}
}
else {
console.log('测试失败!')
}

reduceRight的用法

array.prototype.reduceRight()

reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

1
2
3
4
5
6
function subtract(prev, cur) {
return prev - cur
}

[3, 2, 1].reduce(subtract) // 0
[3, 2, 1].reduceRight(subtract) // -4

由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。比如,找出字符长度最长的数组成员。

1
2
3
4
5
6
7
function findLongest(entries) {
return entries.reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"

上面代码中,reduce的参数函数会将字符长度较长的那个数组成员,作为累积值。这导致遍历所有成员之后,累积值就是字符长度最长的那个成员。

参考资料

廖雪峰-JavaScript教程

阮一峰-JavaScript教程

MDN-火狐开发者文档

注:本文不以盈利为目的,仅做学习交流使用,若有侵权,请联系我删除,万分感谢!

作者

vear

发布于

2019-08-11

更新于

2022-01-03

许可协议

评论