JS数组reduce你不得不知道的25个高级用法

下面我来为你详细讲解“JS数组reduce你不得不知道的25个高级用法”的完整攻略。

1. 什么是reduce？

reduce() 方法用于对数组中的所有元素依次执行指定的回调函数，并将其缩减为单个值。这个值就是最后的返回值。reduce() 方法可以接收两个参数：回调函数和初始值。

一个简单的示例如下：

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, currentValue) => {
  return total + currentValue;
}, 0);
console.log(sum);
// 15

在这个例子中，reduce() 方法对数组中的所有元素依次执行了回调函数，并将其缩减为一个值，即所有元素的和。初始值为 0。

2. 常规用法

reduce() 最常见的用法是将数组中的所有元素相加。示例如下：

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, currentValue) => {
  return total + currentValue;
}, 0);
console.log(sum);
// 15

在这个示例中，回调函数接收两个参数：累加器 total 和当前元素 currentValue。每次迭代都会将当前元素加到累加器上，并返回新的累加器。

3. 简化代码

reduce() 方法可以用来对代码进行简化。比如我们想把一个数组中的所有对象的某个属性提取出来，可以使用下面的代码：

let arr = [{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}];
let names = arr.reduce((prev, current) => {
  prev.push(current.name);
  return prev;
}, []);
console.log(names);
// ["张三", "李四", "王五"]

在这个示例中，回调函数接收两个参数：累加器 prev 和当前元素 current。我们每次迭代时将当前元素的 name 属性加入到累加器中，并将累加器作为新的返回值。

4. 实现数组去重

我们可以使用 reduce() 方法来实现数组去重。

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let uniqueArr = arr.reduce((prev, current) => {
  if (!prev.includes(current)) {
    prev.push(current);
  }
  return prev;
}, []);
console.log(uniqueArr);
// [1, 2, 3, 4, 5]

在这个示例中，每次迭代时，判断当前元素是否已经存在于累加器中，如果不存在则加入累加器中。最后返回去重后的数组。

5. 计算数组中元素出现次数

我们可以使用 reduce() 方法来计算数组中每个元素出现的次数。

let arr = [1, 2, 3, 4, 3, 2, 1, 1, 2, 3];
let count = arr.reduce((prev, current) => {
  prev[current] = (prev[current] || 0) + 1;
  return prev;
}, {});
console.log(count);
// {1: 3, 2: 3, 3: 3, 4: 1}

在这个示例中，我们使用一个对象 prev 作为累加器，每次迭代时将当前元素作为对象的属性名，并将属性值加 1。如果元素还没有出现过，则将对象属性的初始值设置为 0。

这就是“JS数组reduce你不得不知道的25个高级用法”的完整攻略。