JavaScript高级 => reduce()的使用

57 阅读1分钟

reduce()

// 高级用法1: 对象里的属性求和
let array = [
	{name:'张三', age:12},
	{name:'李四', age:22},
	{name:'王五', age:32},
	{name:'赵六', age:42}];
let temp = array.reduce((num,item)=> {
  return item.age + num
  // num初始值0 接收每次返回值
},0);
console.log(temp);
// 108 年龄总和
console.log(array);
// 0: {name: "张三", age: 12}
// 1: {name: "李四", age: 22}
// 2: {name: "王五", age: 32}
// 3: {name: "赵六", age: 42}


// 高级用法2:将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
    // pre接收每一次return cur为arr的每一项
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]


// 高级用法3:将多维数组转化为一维
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:数组去重
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]

// 高级用法5:计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
  • 用于对数组中的所有元素调用指定的回调函数,
    该回调函数的返回值为累积结果,
    并且此返回值在下一次调用该回调函数时作为参数提供
    示例:file上传文件大小不能超过4M可以使用reduce() 对file对象里的size属性求和