JavaScript reduce使用细节

reduce使用介绍

一、reduce语法介绍

array.reduce((prev, item, index, arr)=> {
    
    
    /***/
}, initialValue)

参数：
参数一 callback 函数，包含了四个参数：

prev	提供了 initialValue，则为之;为提供 initialValue，为数组的第一项
item	当前数组循环正在处理的数组元素
index	当前 currentValue 的索引
array	执行 reduce 操作的数组

参数二 initialValue 初始值，初始值可提供，也可不提供。提供初始值，item 从数组第一项开始，若不提供初始值，则 item 从第二项开始执行，对应的第一次 prev 是数组第一项的值
返回值：

返回最后的执行结果

二、实例解析

let arr = ['h','i','n','a']
let str = arr.reduce((prev, item, index, arr)=> {
    
    
    console.log(prev, item, index, arr)
    return prev + item
}, 'C')
console.log(str) // China

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

打印结果

1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

三、注意事项

reduce是一个对数组累积操作的方法，使用时要加上 return 返回累积操作的数据。这样 prev 才能获取上一次执行的结果，否则是 undefined
空数组执行 reduce 操作且不提供初始值时reduce会报错，错误信息如下：

四、具体使用

1.数组去重

let arr = [1, 2, 2, 2, 3, 3, 4, undefined, undefined, null]
arr.reduce((prev, item) => {
    
    
    return prev.includes(item) ? prev : prev.concat(item);
}, [])
 
// [1, 2, 3, 4, undefined, null]

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

2.数组扁平化多维转一维
数组降维

let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];
let reduceArray = function (arr) {
    
    
    return arr.reduce((prev, item) => {
    
    
        return prev.concat(Array.isArray(item) ? reduceArray(item) : item)
    }, [])
}
reduceArray(arr)
 
//[0, 1, 2, 3, 4, 5, 6, 7]

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

二维降一维

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

打印结果[0, 1, 2, 3, 4, 5]

3.数组累加

let arr = [1, 2, 3, 4]
arr.reduce((prev, item) => {
    
    
    return prev + item;
})
 
// 10

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

var arr = ["one", "two", "three", "six", "four", "five", "six"];

var newArr = arr.reduce((pre, cur) => {
    
    
  console.log(cur, pre);
  if (cur in pre) {
    
    
    pre[cur]++;
  } else {
    
    
    pre[cur] = 1;
  }
  return pre;
}, {
    
    });//这里注意初始值要默认赋予空对象，不然会报错
console.log(newArr);

打印结果

打印结果
one {
    
    }
two {
    
     one: 1 }
three {
    
     one: 1, two: 1 }
six {
    
     one: 1, two: 1, three: 1 }
four {
    
     one: 1, two: 1, three: 1, six: 1 }
five {
    
     one: 1, two: 1, three: 1, six: 1, four: 1 }
six {
    
     one: 1, two: 1, three: 1, six: 1, four: 1, five: 1 }
{
    
     one: 1, two: 1, three: 1, six: 2, four: 1, five: 1 }

5.对象属性求和

var result = [
    {
    
    
        subject: 'math',
        score: 10
    },
    {
    
    
        subject: 'chinese',
        score: 20
    },
    {
    
    
        subject: 'english',
        score: 30
    }
];
 
var sum = result.reduce(function(prev, cur) {
    
    
    return cur.score + prev;
}, 0);
console.log(sum)

打印结果	60