reduce使用总结

Posted 2021-09-04 origin_master

1. 累加

const sum = [1,2,3,4].reduce((accu, cur) => accu + cur, 10);  // 20

2. 数组去重

// 常规数组
const uniqueArr = [1,2,3,4,2,3,2,3,5,1].reduce((accu, cur) => !accu.includes(cur) ? accu.concat(cur) : accu, []);
// [1,2,3,4,5]

// 等价于：
[...new Set([1,2,3,4,2,3,2,3,5,1])];
Array.from(new Set(1,2,3,4,2,3,2,3,5,1));


// 对象数组(按属性对object去重)
const arr = [
  {team: \'The clippers\', player:\'Paul\' },
  {team: \'The cavaliers\', player:\'James\' },
  {team: \'The nets\', player:\'Durant\' },
  {team: \'The lakers\', player:\'James\' }
];
const uniqueArr = arr.reduce((accu, cur) => {
  if (!accu.find((item) => item.player === cur.player)) {
    accu.concat(cur);
  }
  return accu;
}, []);  
// [
// {team: \'The clippers\', player:\'Paul\'},
// {team: \'The cavaliers\', player:\'James\'},
// {team: \'The nets\', player:\'Durant\'}
// ]

3. 递归实现数组降维

const flattenArray = (arr) => {
  arr.reduce((accu, cur) => Array.isArray(curr) ? accu.concat(func(curr)) : accu.concat(curr), []);
};
flattenArray([8, [5, 4], 1, 3, [7, 5, 10, [3, 6, 2]], 4, 3, 2, 4]); // // [ 8, 5, 4, 1, 3, 7, 5, 10, 3, 6, 2, 4, 3, 2, 4 ]

4. 按属性分组

var people = [
  {team: \'The clippers\', player:\'Paul\'},
  {team: \'The cavaliers\', player:\'James\'},
  {team: \'The nets\', player:\'Durant\'},
  {team: \'The lakers\', player:\'James\'}
];

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 groupedPlayer = groupBy(people, \'player\');
// groupedPlayer is:
// {
//   James: [
//     {team: \'The lakers\', player:\'James\'},
//     {team: \'The cavaliers\', player:\'James\'},
//   ],
//   Paul: [{team: \'The clippers\', player:\'Paul\'}],
//   Durant: [team: \'The nets\', player:\'Durant\']
// }

5. 频率统计

const names = [\'Alice\', \'Bob\', \'Tiff\', \'Bruce\', \'Alice\'];
const countedNames = names.reduce(function (allNames, name) {
  name in allNames ? allNames[name]++ : allNames[name] = 1;
  return allNames;
}, {});
// countedNames is:
// { \'Alice\': 2, \'Bob\': 1, \'Tiff\': 1, \'Bruce\': 1 }

实现map, filter, forEach等的功能

6. reduce实现map

Array.prototype.reduceMap = function(callback) {
  return this.reduce((accu, cur, index) => accu.concat(callback(cur, index));
  }, []);
};

[1,2,3,4].reduceMap((item, index) => item + index); // [1,3,5,7]

7. reduce实现forEach

Array.prototype.reduceForEach = function(callback) {
  this.reduce((accu, cur, index, array) => {
    callback(cur, index, array);
  }, []);
};

[1, 2, 3, 4].reduceForEach((item, index, array) => {
  console.log(item, index, array)
});
// 1 0 [1,2,3,4]
// 2 1 [1,2,3,4]
// 3 2 [1,2,3,4]
// 4 3 [1,2,3,4]

8. reduce实现filter

Array.prototype.reduceFilter = function (callback) {
   return this.reduce((accu, cur, index, array) => callback(cur, index, array)) ? accu.concat(cur) : accu, []);
};

[1, 2, 3, 4].reduceFilter(item => item % 2 === 0); 
// [2, 4]

9. reduce实现find

const obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
  return this.reduce((accu, cur, index, array) => {
    if (callback(cur, index, array)) {
      if (accu instanceof Array && accu.length === 0) {
        accu = cur;
      }
    }    
    if ((index === array.length - 1) && accu instanceof Array && accu.length === 0) {
      accu = undefined;
    }
    return accu;
  }, []);
};
obj.reduceFind(item => item.a % 2 == 0); // {a: 2}
obj.reduceFind(item => item.a % 9 == 0); // undefined