进阶JS-reduce用法

reduce()

reduce（）方法为循环遍历数组，将其结果汇总为单个返回值，最常用的场景有数组求和、数组求积、数组中元素出现的次数、数组去重等等。

语法：

arr.reduce(function(prev,cur,index,arr){
...
}, init);

参数：

    prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
    cur 必需。表示当前正在处理的数组元素；
    index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
    arr 可选。表示原数组；
    init 可选。表示初始值。

prev,cur,index,arr:前一个值、当前项、项目的索引和数组对象

1.当reduce（）方法的init为空时，第一次循环方法中的第一个参数（prev）为数组的第一项值，第二个参数（cur）为数组的第二项值，init不为空时，第一次循环方法中的第一个参数（prev）为reduce的第二项值，第二个参数（cur）为数值的第三项值。

2.reduce（）方法的第一个参数，就是每次遍历都会执行的匿名函数，当前函数的返回值就会传给下一次执行函数的第一个值(prev)。

案例1：init为空

const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
    console.log(prev,cur,index);
    return prev + cur;
});
console.log(sum);

sum值为15

案例2：init不为空

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
    console.log(prev,cur,index);
    return prev + cur;
},5); 
console.log(sum);

sum的值为20

reduce的应用

• 数组求和

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b)) // 15
console.log(arr.reduce((a,b) => a * b))  // 120

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

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
  console.log(allNames,name);
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);//{Alice:2,Bob:3,Tiff:1,Bruce:1}

• 去除数组中重复的元素

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator;
}, []);
console.log(myOrderedArray);  //  ['a','b','c','d']

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //  [1,2,3,4,5]

      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];
 
      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);
 
      console.log(value);//[1, 2, 3, 5, null, 0, false, true]

• 按属性对Object分类(某属性的值相同的放在一个对象里)

var person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

• 累加数组中对象的值

let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];
let result = people.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)
console.log(result) // 结果：61

• 将二维数组转为一维数组

      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];
 
      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);
 
      console.log(value); // [0, 1, 2, 3, 4, 5]