【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!

reduce() 方法对数组中的每个元素执行一个提供的reducer函数（升序执行），将其结果汇总为单个输出值。

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数：

• callback：执行数组中每个值的函数，包含四个参数：

  • accumulator：累加器，即上一次回调函数执行时的结果。
  • currentValue：当前数组中处理的元素。
  • index (可选)：当前元素在数组中的索引。
  • array (可选)：调用reduce的数组。
• initialValue (可选)：作为第一次调用callback函数时的第一个参数的值。

返回值：

• 返回一个累计结果。

示例：

1. 简单的求和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum); // 输出：15

2. 使用对象数组并累加对象属性：

const items = [
  { name: "apple", quantity: 1 },
  { name: "banana", quantity: 2 },
  { name: "orange", quantity: 3 }
];
const totalQuantity = items.reduce((acc, item) => acc + item.quantity, 0);
console.log(totalQuantity); // 输出：6

3. 数组对象中提取属性：

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];
const names = users.reduce((acc, user) => [...acc, user.name], []);
console.log(names); // 输出：["Alice", "Bob", "Charlie"]

4. 使用reduce进行递归：

const flatten = arr =>
  arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
 
console.log(flatten([1, [2, [3, [4]], 5]])); // 输出：[1, 2, 3, 4, 5]

5. 使用reduce进行排序：

const sortBy = (prop) => (a, b) => a[prop] > b[prop] ? 1 : -1;
const usersSorted = [
  { name: "Bob", age: 30 },
  { name: "Alice", age: 25 },
  { name: "Charlie", age: 35 }
].sort(sortBy('age'));
console.log(usersSorted);
// 输出排序后的数组：
// [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 } ]

reduce() 是一个非常强大的工具，可以用于许多不同的场景，包括但不限于：求和、平均数、最大值、最小值、筛选、转换数据结构等。