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

前言

---

看完本篇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)

结束语

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