返回

JavaScript中6 个强大的reduce() 用法

前端

导言

reduce() 方法是 JavaScript 中数组的内建方法，它对数组的每个元素执行指定的回调函数，将前一个元素的结果作为当前元素的计算参数。最终返回一个单一的累积值。

示例 1：求和

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
  return (accumulator += current);
}, 0);
// sum: 15

示例 2：寻找最大值

const max = numbers.reduce((max, current) => {
  return (max > current) ? max : current;
}, 0);
// max: 5

示例 3：计算平均值

const average = numbers.reduce((average, current) => {
  return ((average * numbers.length) + current) / (numbers.length + 1);
}, 0);
// average: 3

示例 4：构建对象

const person = {
  name: "John",
  age: 30,
  occupation: "Developer"
};

const obj = Object.keys(person).reduce((obj, key) => {
  obj[key] = person[key];
  return obj;
}, {});
// obj: { name: "John", age: 30, occupation: "Developer" }

示例 5：扁平化多维数组

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.reduce((flattened, current) => {
  return flattened.concat(current);
}, []);
// flattened: [1, 2, 3, 4, 5, 6]

示例 6：分组数据

const data = [
  { category: "A", value: 1 },
  { category: "B", value: 2 },
  { category: "A", value: 3 },
  { category: "C", value: 4 }
];

const groupedData = data.reduce((groups, item) => {
  const category = item.category;
  groups[category] = groups[category] || [];
  groups[category].push(item);
  return groups;
}, {});
// groupedData: { A: [{ category: "A", value: 1 }, { category: "A", value: 3 }],
//               B: [{ category: "B", value: 2 }],
//               C: [{ category: "C", value: 4 }] }

结论

reduce() 方法是 JavaScript 中一个强大的数据处理工具，它提供了处理数组的高效且简洁的方式。通过使用示例中所示的技巧，您可以充分利用 reduce() 来处理复杂数据结构、提取见解并解决各种数据处理任务。