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)
文章最后,感谢大家的观看,祝大家学有所成!