关于javascript:reduce使用总结

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