JS reduce()方法交流

JS reduce()方法交流

js的方法有很多，什么map，some，every，forEach，splice…，哪些有返回值，哪些改变原数组，相信很多人经常容易搞混，今天主要跟家分享下关于js 的reduce方法，为什么，因为比较重要！求和，去重，多维数据转为一维，功能不要太强大，好吧

1.语法

array.reduce(callback,[initiValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组

array.reduce((pre,cur,index,arr)=>{
    '1、pre （上一次调用回调返回的值，或者是提供的初始值（initialValue））'
    '2、cur（数组中当前被处理的元素）'
    '3、index （当前元素在数组中的索引）'
    '4、arr调用 reduce 的数组）'
 },initiValue)

2.初级用法

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

再看第二个例子：

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

3.reduce高级用法

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

let names = ['aa',  'ab', 'bb', 'aa'];
let nameNum = names.reduce((pre,cur)=>{
   if(cur in pre){
     pre[cur]++
   }else{
     pre[cur] = 1 
   }
   return pre
 },{})
 console.log(nameNum); //{aa: 2, ab: 1, bb: 1, bb: 1}

（2）数组去重

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);// [1, 2, 3, 4]

（3）将二维数组转化为一维

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]

（4）将多维数组转化为一维

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)); //[0, 1, 2, 3, 4, 5, 6, 7]

4.总结

项目中熟练使用reduce方法，处理一些前端逻辑有时非常方便
欢迎沟通交流