js reduce()

js数组reduce()详解

基本概念

reduce() 方法接收一个函数作为累加器(accumulator)，数组中的每个值(从左到右)开始缩减，最终为一个值。
reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值(或者上次回调函数的返回值)，当前元素值，当前索引，调用reduce的数组。

语法

arr.reduce(callback, [initialValue])

• callback (执行数组中每个值的函数，包含四个参数)
  - previousValue (上一次调用回调返回的值，或者是提供的初始值(initialValue))
  - currentValue (数组中当前被处理的元素)
  - index (当前元素在数组中的索引)
  - array (调用 reduce 的数组)
• initialValue (作为第一次调用 callback 的第一个参数)

例一

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(pre, cur, index, arr) {
    console.log(pre, cur, index);
    return pre + cur;
})
console.log(arr, sum);

/*也可以写成*/
var arr = [1, 2, 3, 4];
var sum = arr.reduce((pre, cur, index, arr) => {
    console.log(pre, cur, index);
    return pre + cur;
})
console.log(arr, sum);

例一打印结果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这里可以看出，上面的例子index是从1开始的，第一次prev的值是数组的第一个值，数组的长度是4，但是reduce函数循环3次。

例二

var arr = [1, 2, 3, 4];
var sum = arr.reduce((pre, cur, index, arr) => {
    console.log(pre, cur, index);
    return pre + cur;
}, 0)//指定cur的类型为Number并且初始值为0
console.log(arr, sum);

例二打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这个例子index是从0开始的，第一次的perv的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。
如果提供initialValue，从索引0开始。

例三

var arr = []; // 空数组
var sum = arr.reduce((pre, cur, index, arr) => {
    console.log(pre, cur, index);
    return pre + cur;
})
console.log(arr, sum);

例三打印结果：
报错：TypeError: Reduce of empty array with no initial value

var arr = []; // 空数组
var sum = arr.reduce((pre, cur, index, arr) => {
    console.log(pre, cur, index);
    return pre + cur;
}, 0) // 提供初始值
console.log(arr, sum);

打印结果：
[ ] 0

通常提供初始值更安全

用法

1. 求和或求积

   var arr = [1, 2, 3, 4];
   var sum = arr.reduce((x, y) => {
   	return x + y;
   }, 0);
   var mul = arr.reduce((x, y) => {
   	return x * y;
   }, 1);
   sonsole.log(sum); // 求和 10
   sonsole.log(mul); // 求积 24
   

2. 计算数组中每个元素出现的次数

   var names = ['Alice', 'Bob', 'Tiff', 'Alice'];
   var nameNum = names.reduce((pre, cur) => {
   	if (cur in pre) {
   		pre[cur]++
   	} else {
   		pre[cur] = 1
   	}
   	return pre
   }, {})
   console.log(nameNum )
   

   { Alice: 2, Bob: 1, Tiff: 1 }

3. 数组去重

   var arr = [1, 2, 3, 3, 4, 2]
   var newArr = arr.reduce((pre, cur) => {
   	if (!pre.includes(cur)) {
   		return pre.concat(cur)
   	} else {
   		return pre
   	}
   }, [])
   console.log(newArr)
   

   [1, 2, 3, 4]

   var arr = [
   	{id: 0, name: "小明"},
       {id: 1, name: "小张"},
       {id: 2, name: "小李"},
       {id: 3, name: "小孙"},
       {id: 1, name: "小周"},
       {id: 2, name: "小陈"}
   ]
   var obj = {}
   var newArr = arr.reduce((pre, cur) => {
   	obj[cur.id] ? '' : obj[cur.id] = true && pre.push(cur);
   	return pre
   }, [])
   console.log(newArr)
   

   [ {id: 0, name: “小明”}, {id: 1, name: “小张”},{id: 2, name: “小李”},{id: 3, name: “小孙”}]

4. 将二维数组转化为一维

   var arr = [[0, 1], [2, 3], [4, 5]]
   var newArr = arr.reduce((pre, cur) => {
   	return pre.concat(cur)
   }, [])
   console.log(newArr)
   

   [0, 1, 2, 3, 4, 5]

5. 将多维数组转化为一维

   var arr = [[0, 1], [2, 3], [4,[5,6,7]]]
   var newArr = function(arr) {
   	return arr.reduce((pre, cur) => {
   		pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
   	}, [])
   }
   console.log(newArr(arr))
   

   [0, 1, 2, 3, 4, 5, 6, 7]

6. 对象里的属性求和

   var arr = [
   	{subject: 'math', score: 10},
   	{subject: 'chinese', score: 10},
   	{subject: 'english', score: 10}
   ]
   var sum = arr.reduce((pre, cur) => {
   	return cur.score + pre
   }, 0)
   console.log(sum)
   

   30