JavaScript中的数组方法reduce还能这样用？

JavaScript中的数组方法reduce还能这样用？

今天，小编就和大家分享一下数组方法reduce的用法，小编最近的项目开发中就用到这个reduce，可以说是‘很香’，下面我就一起来看看吧！

1.基本用法：

//per 参数是 你需要累加的 cur是数组中的每个项 
let arr = [1,3,5,9]
let  num = arr.reduce((per,cur)=>{
	return per+cur
},0)//可以添加初始值 不添加的话 会默认数组第一个为初始值

console.log(num)//18

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){// pre 就是为{}
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
//pre 初始为 {}  cur中有重复时 就++ 否则走第二个  最后返回 一个新对象 

这也是reduce方法的最为基本的两种使用，十分方便。当然，reduce方法的功能还不止这些。

2.数组的去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){//如果这个新数组中不含有 重复的cur项   把新的对象添加到 pre数组中去 最后返回这个数组
	console.dir(pre)
      return pre.concat(cur)//你们觉得 可不可以用push  
	  
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

3.数组的拉平

let arr1 = [[0, 1], [2, 3], [4, 5]]
let newArr = arr1.reduce((pre,cur)=>{
    return pre.concat(cur)// concat 会自动把数组拉平 
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]


let arr2 = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){//
//Array.isArray 判断是不是一个数组 返回 布尔值 是一个数组时再次放入 newArr函数中拉平 直到不是 数组为止
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}

 console.log(newArr(arr2)); //[0, 1, 2, 3, 4, 5, 6, 7]

4.对象中累加

let arr=[
           {
               num:10,
               name:'wl1'
           },
           {
               num:18,
               name:'wl2'
           },
           {
               num:11,
               name:'wl3'
           },
           {
               num:8,
               name:'wl0'
           }
       ] 
// let newArr= arr.sort((a,b)=>a.num-b.num)

//  console.log(newArr);
let num = arr.reduce((pre,cur)=>cur.num+pre,0)
let name = arr.reduce((pre,cur)=>pre.concat(cur.name),[])

console.log(num,name)

文章最后，感谢大家的观看，祝大家学有所成！