这里写自定义目录标题

JS reduce()方法交流1.语法2.初级用法3.reduce高级用法4.总结

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方法，处理一些前端逻辑有时非常方便 欢迎沟通交流