JS中reduce的详细用法

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。

基本语法：

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

参数：

参数：

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

 没有设置函数的 初始迭代值

 const arr = [11, 22, 33, 44, 55];
      const sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + 1;
      });

设置函数的初始迭代值

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('arr:',arr,'sum:',sum);

 

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

解析：

1. arr1 是一个包含数字的数组 [1, 2, 3, 4, 5]。

2. arr1.reduce() 调用数组的 reduce 方法。这个方法接受一个回调函数作为其参数，该回调函数本身接收两个参数：a（累加器，accumulator）和 b（当前数组元素，current value）。

3. 回调函数 (a, b) => a + b 是一个箭头函数，它将当前累加器的值 a 与当前元素的值 b 相加，并返回这个和。

4. reduce 方法从数组的第一个元素开始，将回调函数应用于数组的每个元素，逐步构建一个单一的返回值。

5. 在第一次调用回调函数时，a 是数组的第一个元素（1），b 是数组的第二个元素（2），因此第一次返回的值是 1 + 2。

6. 在第二次调用中，a 是第一次调用的返回值（3），b 是数组的第三个元素（3），依此类推，直到数组中的所有元素都被处理。

7. 最终，reduce 方法返回数组所有元素相加的总和

 

数组去重：

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重：
    // 方法12 ：reduce
    function newArrFn (arr) {
      let newArr = []
      return  arr.reduce((prev, next,index, arr) => {
        // 如果包含，就返回原数据，不包含，就把新数据追加进去 
        return newArr.includes(next) ? newArr :  newArr.push(next)
      }, 0)
    }
    console.log(newArrFn(arr));

对象按属性分类：

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);

参开：JS中reduce的用法_js reduce-CSDN博客