JS reduce用法剖析：解构高阶函数的妙用

2024-01-04 19:02:09

reduce() 的用法

reduce() 方法的语法如下：

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

callback: 回调函数用于对每个元素执行操作，并返回一个值。
accumulator: 累加器，用于存储每次迭代的结果。
currentValue: 当前元素的值。
currentIndex: 当前元素的索引。
array: 操作的数组。
initialValue: 可选的初始值，用于设置累加器的初始值。

reduce() 的例子

下面是一个使用 reduce() 对数组中的数字进行累加的例子：

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出：15

reduce() 的妙用

reduce() 不仅限于简单的数组累加，它还可以用于各种复杂的操作，例如：

将数组中的元素转换成对象：

const people = [
  { name: 'John', age: 20 },
  { name: 'Mary', age: 30 },
  { name: 'Bob', age: 40 }
];

const peopleMap = people.reduce((accumulator, person) => {
  accumulator[person.name] = person.age;
  return accumulator;
}, {});

console.log(peopleMap); // 输出：{ John: 20, Mary: 30, Bob: 40 }

找出数组中最大的元素：

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

const max = numbers.reduce((accumulator, currentValue) => {
  return Math.max(accumulator, currentValue);
}, -Infinity);

console.log(max); // 输出：5

扁平化多维数组：

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

const flattenedArray = multidimensionalArray.reduce((accumulator, currentValue) => {
  return accumulator.concat(currentValue);
}, []);

console.log(flattenedArray); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]