JavaScript

【JavaScript】reduce()方法

Posted by ARTROY on 2019-06-12

定义

JavaScript 版本: ECMAScript 3
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数

参数 描述
function(total, currentValue, index, arr) 必需。用于执行每个数组元素的函数。函数参数：
params.png
initialValue 可选。传递给函数的初始值。

实例

示例：

代码：

1
2
3
4
5
6
7
8
9
10
11
12
var arr = [1, 2, 3, 4, 5, 6];

var num = arr.reduce(function(total, currentValue, currentIndex, arr) {
    console.log('查看：', total, currentValue, currentIndex, arr);
})

// 設置初始值
// var num = arr.reduce(function(total, currentValue, currentIndex, arr) {
//     console.log('查看：', total, currentValue, currentIndex, arr);
// }, 0)

console.log('结果：', arr, num)

打印结果：

次数 未設置初始值 設置初始值
1 查看： 1 2 1 (6) [1, 2, 3, 4, 5, 6] 查看： 0 1 0 (6) [1, 2, 3, 4, 5, 6]
2 查看： undefined 3 2 (6) [1, 2, 3, 4, 5, 6] 查看： undefined 2 0 (6) [1, 2, 3, 4, 5, 6]
3 查看： undefined 4 3 (6) [1, 2, 3, 4, 5, 6] 查看： undefined 3 0 (6) [1, 2, 3, 4, 5, 6]
4 查看： undefined 5 4 (6) [1, 2, 3, 4, 5, 6] 查看： undefined 4 1 (6) [1, 2, 3, 4, 5, 6]
5 查看： undefined 6 5 (6) [1, 2, 3, 4, 5, 6] 查看： undefined 5 1 (6) [1, 2, 3, 4, 5, 6]
6 查看： undefined 6 1 (6) [1, 2, 3, 4, 5, 6]
结果： (6) [1, 2, 3, 4, 5, 6] undefined 结果： (6) [1, 2, 3, 4, 5, 6] undefined

结论：
（1）从案例1中可看出，reduce() 没有设置 initialValue 时，total 为数组的第一个值（即是数组的第0个索引所对应的元素），currentValue 为数组的第1个索引所对应的元素，currentIndex 为数组的第1个索引；（2）如果提供 initialValue 则从第0个索引开始。（3）原数组不会改变。

如果这个数组为空，运用 reduce() 是什么情况？

1
2
3
4
5
6
7
var arr = [];

var num = arr.reduce(function(total, currentValue, currentIndex, arr) {
    console.log('查看：', total, currentValue, currentIndex, arr);
})

// 报错： Uncaught TypeError: Reduce of empty array with no initial value

用法：

（1）计算。

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
26
27
28
29
30
31
32
33
34
35
36
37
// JavaScript
var arr = [1, 2, 3, 4, 5, 6];

var num1 = arr.reduce(function(total, currentValue) {
    return total + currentValue
});
var num2 = arr.reduce(function(total, currentValue) {
    return total * currentValue
});

console.log(num1)   // 21
console.log(num2)   // 720

// 设置 initialValue
// var num1 = arr.reduce(function(total, currentValue) {
//     return total + currentValue
// }, 10);
// var num2 = arr.reduce(function(total, currentValue) {
//     return total * currentValue
// }, 10);
// console.log(num1)   // 31
// console.log(num2)   // 7200


// ES6
(1)
const arr = [1, 2, 3, 4, 5, 6];
const num1 = arr.reduce((total, currentValue) => total+currentValue)
const num2 = arr.reduce((total, currentValue) => total*currentValue)
console.log(num1)   // 21
console.log(num2)   // 720

// 设置 initialValue
// const num1 = arr.reduce((total, currentValue) => total+currentValue, 10)
// const num2 = arr.reduce((total, currentValue) => total*currentValue, 10)
// console.log(num1)   // 31
// console.log(num2)   // 7200

（2）计算数组中每个元素出现的次数。

1
2
3
4
5
6
const arr = ['ABC', 'QWER', 'TYU88', '', '123456', 'QWER', 'QWER12'];
const newObject = arr.reduce((total, currentValue) => {
    currentValue in total ? total[currentValue]++ : total[currentValue] = 1;
    return total;
}, {});
console.log(newObject, arr)  // {123456: 1, ABC: 1, QWER: 2, TYU88: 1, "": 1, QWER12: 1}

（3）计算数组中每个元素出现的次数。

1
2


（4）计算数组中每个元素出现的次数。

1
2


（5）计算数组中每个元素出现的次数。

1
2


（2）计算数组中每个元素出现的次数。

1
2



赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
JavaScript
参与社区
-->