化繁为简，reduce进阶之道

2023-12-11 03:38:15

正文

reduce妙用一：数组扁平化

reduce可以轻松实现数组扁平化。假设我们有一个多维数组arr，我们可以使用reduce将其展平为一维数组。

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flattenedArr = arr.reduce((acc, cur) => acc.concat(cur), []);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce妙用二：对象分组

reduce可以方便地将对象数组按某个属性进行分组。假设我们有一个对象数组users，其中每个对象都包含name和age属性，我们可以使用reduce将它们按年龄进行分组。

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'Jack', age: 22 },
  { name: 'Jill', age: 28 }
];

const groupedUsers = users.reduce((acc, cur) => {
  const ageGroup = cur.age >= 25 ? '25+' : '<25';
  acc[ageGroup] = acc[ageGroup] || [];
  acc[ageGroup].push(cur);
  return acc;
}, {});

console.log(groupedUsers);
// {
//   '25+': [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
//   '<25': [{ name: 'Jack', age: 22 }, { name: 'Jill', age: 28 }]
// }

reduce妙用三：数据聚合

reduce可以轻松实现数据聚合。假设我们有一个数字数组nums，我们可以使用reduce计算其总和、平均值、最大值和最小值。

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce((acc, cur) => acc + cur, 0);
const avg = sum / nums.length;
const max = nums.reduce((acc, cur) => Math.max(acc, cur), Number.MIN_VALUE);
const min = nums.reduce((acc, cur) => Math.min(acc, cur), Number.MAX_VALUE);

console.log(sum); // 15
console.log(avg); // 3
console.log(max); // 5
console.log(min); // 1

reduce妙用四：性能优化

reduce可以有效地优化某些场景下的代码性能。例如，在处理大数据量时，使用reduce可以减少循环的次数，从而提高性能。

const largeArr = new Array(1000000).fill(1);

const sum = largeArr.reduce((acc, cur) => acc + cur, 0);

// 使用reduce比使用循环快得多
console.time('Reduce');
console.log(sum);
console.timeEnd('Reduce');

const sum2 = 0;
for (let i = 0; i < largeArr.length; i++) {
  sum2 += largeArr[i];
}

console.time('Loop');
console.log(sum2);
console.timeEnd('Loop');