时间戳

首页 > 技术文章 > js数组reduce解析及使用示例

js数组reduce解析及使用示例

shandou 2020-11-03 15:02 原文

reduce()

    简单说，reduce()可以对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后将其结果汇总为单个返回值。

arr.reduce(callback,[initialValue])

  • callback : (reducer 里的回调函数接收4个参数(最少要有前两个参数))，具体参数以下:
    • Accumulator (acc) ：累计器
    • Current Value (cur) ：当前值
    • Current Index (idx) ：当前索引
    • Source Array (src) ：源数组
  • initialValue : initialValue可加可不加，如果加了，acc取值为initialValue，cur取数组中的第一个值（即索引为0的值）；如果没有提供 initialValue，那么acc取数组中的第一个值（索引为0的值），cur取数组中的第二个值（索引为1的值）。

代码示例

1、累加

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum)
/*
输出：1 2 1
     3 3 2
     6 4 3
     [1, 2, 3, 4] 10;
*/


var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);
/*
输出： 0 1 0
      1 2 1
      3 3 2
      6 4 3
      [1, 2, 3, 4] 10
*/

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

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

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

3、按属性对object分类

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

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 groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);
/* {
   20: [
      { name: 'Max', age: 20 },
      { name: 'Jane', age: 20 }
   ],
   21: [{ name: 'Alice', age: 21 }]
}  */

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 arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

//将多维数组转化为一维======================================
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]

推荐阅读