js ,数组求和，数组去重，es7 新增数组方法reduce()的用法详解

Posted 2022-11-30 郝艳峰Vip

前言

---

看完本篇reduce的方法（处理数组的各种奇淫技巧），对在实战中操作数组有很大的帮助.

首先先介绍一下reduce方法

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
分别介绍一下callback的四个参数
 - 1, 'total'-- 必传：上一次回调结束后的返回值或者是初始值
 - 2, 'currentValue'-- 必传：数组中当前被处理的元素
 - 3, 'currentIndex'-- 必传：当前被处理的元素再数组中的索引也就是下标
 - 4, 'arr'-- 必传：调用reduce的数组

注意点：：

reduce为函数中每个元素执行一次回调函数，不包括被删除或者从未被赋值的元素

reduce对空数组不执行回调函数

reduce在实战中的各种用法

一，数组求和，求乘法

   var arr1 = [1,2,3,4];
   var sum = arr1.reduce((x,y)=>x+y);
   console.log(sum);   //10
   var multiplication = arr1.reduce((x,y)=>x*y);
   console.log(multiplication);  // 24

二，对象数组中的值求和

// 求出一下三个人的年龄和
var peoples = [
    
        name: '张三',
        age: 10
    ,
    
        name: '李四',
        age: 20
    ,
    
        name: '王五',
        age: 30
    
];

var peopleSums = peoples.reduce(function(prev, cur) 
    return cur.age + prev;
, 0);
console.log(peopleSums) //60

三，多维对象数组内相同属性的值进行求和，并计算出现次数

详情请移步使用reduce()方法对对象数组内相同属性的值进行求和

四，数组去重以及对象数组去重

• 1, 数组去重

   let arr2 = [1,2,3,4,4,1]
   let newArr2 = arr2.reduce((pre,cur)=>
    if(!pre.includes(cur))
      return pre.concat(cur)
    else
      return pre
    
,[])
console.log(newArr2);// [1, 2, 3, 4]

• 2, 对象数组去重

	     var arr = [
			 	name:1
			 ,
			 	name:1
			 ,
			 	name:2
			 ,
			 	name:2
			 ,
			 	name:90
			 ];
      var obj = ;
       arr = arr.reduce(function(item, next) 
      obj[next.name] ? '' : obj[next.name] = true && item.push(next);
      return item;
   , []);
   console.log(arr); 
   //去重后的数组
 0: name: 1
1: name: 2
2: name: 90

五，计算数组中每个元素出现的次数

   var arr3 = [1,2,2,2,2,2,2,2,3,4,4,4,4,4,5,5];
    var countNumbs = arr3.reduce((acc,cur)=>
         if (cur in acc) 
             acc[cur] ++;
         else
            acc[cur] = 1;
         
         return acc;
    ,)
    console.log(countNumbs);

六，二维数组转一维数组

       var arr4 = [[1,2],[3,4,5]];
        var single = arr4.reduce((acc,cur)=>
              return acc.concat(cur)
        ,[])
        console.log(single);   //[1,2,3,4,5]

七，多维数组转一维数组

     var arr5 = [[1,2],[3,4,5],[6,7,[8,9]]];
      var single = function(arr5)
            return arr5.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?single(cur):cur),[])
        
      console.log(single(arr5));  //[1,2,3,4,5,6,7,8,9]

八，多维对象数组转化为一维对象数组

            var  arrayObject =  [
        
          name: '张三',
          children: [
            
              name: '张三儿子',
              children: [],
            ,
          ],
        ,
        
          name: '李四',
          children: [
            
              name: '李四儿子',
              children: [],
            ,
          ],
        ,
      ];

     function newArr(arrayObject )
       return arrayObject .reduce((result,item)=>
         return result.concat(item,(Array.isArray(item.children) ? newArr(item.children) : []))
       ,[])
    
 let changedData = newArr(arrayObject )
console.log(changedData)

结束语

本博客记录一下自己在实战中的操作数组的一些方法，方便自己学习。