reduce() 方法是 JavaScript 数组（Array）对象的一个非常强大的方法，它允许你对数组中的每个元素执行一个由你提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。这个方法非常适用于累加器、数组求和、字符串拼接等场景。

基本语法

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

• callback (执行数组中每个值的函数，包含四个参数):
  • accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（如果提供了）。
  • currentValue 数组中正在处理的元素。
  • index （可选）数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则为1。
  • array （可选）调用reduce的数组。
• initialValue （可选）作为第一次调用callback函数时第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。注意：在这种情况下，数组的第一个元素将不会参与迭代。

示例

数组求和

const array = [1, 2, 3, 4];  
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
console.log(sum); // 输出: 10

数组元素累加（不使用初始值）

如果不使用initialValue，第一次迭代将跳过数组的第一个元素（它会被用作accumulator的初始值），从第二个元素开始迭代。

const array = [1, 2, 3, 4];  
const sumWithoutInitial = array.reduce((accumulator, currentValue) => accumulator + currentValue);  
console.log(sumWithoutInitial); // 输出: 10，但注意，这里实际上是从第二个元素开始累加的，因为1被用作初始值  
// 注意：这个示例假设数组至少有一个元素，否则会导致TypeError

数组对象属性累加

const items = [  
  {name: '苹果', price: 2},  
  {name: '香蕉', price: 4},  
  {name: '橘子', price: 3}  
];  

  // accumulator = 初始值 0

const total = items.reduce((accumulator, currentValue) => accumulator + currentValue.price, 0);  
console.log(total); // 输出: 9

字符串拼接

const array = ['Hello,', 'world!', 'Welcome', 'to', 'JavaScript.'];  
const sentence = array.reduce((accumulator, currentValue) => accumulator + ' ' + currentValue);  
console.log(sentence); // 输出: " Hello, world! Welcome to JavaScript."  
// 注意：这里累加器从空字符串开始可能更有意义，以避免结果字符串前有一个不必要的空格

1. 数组去重

const array = [1, 2, 2, 3, 4, 4, 5];  
const uniqueArray = array.reduce((acc, current) => {  
  if (acc.indexOf(current) === -1) {  
    acc.push(current);  
  }  
  return acc;  
}, []);  
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]  
  
// 使用 Set 更为简洁  
const uniqueArrayUsingSet = [...new Set(array)];  
console.log(uniqueArrayUsingSet); // 输出: [1, 2, 3, 4, 5]

2. 数组对象查找最大/最小值

假设你想找到数组中对象属性的最大值。

const items = [  
  {name: '苹果', price: 2},  
  {name: '香蕉', price: 4},  
  {name: '橘子', price: 3}  
];  
  
const maxPriceItem = items.reduce((acc, current) => {  
  return current.price > acc.price ? current : acc;  
}, {price: -Infinity});  
  
console.log(maxPriceItem); // 输出: {name: '香蕉', price: 4}

3. 数组扁平化（Flatten Array）

虽然 flat() 方法是专为数组扁平化设计的，但 reduce() 也可以实现。

const nestedArray = [1, [2, [3, 4], 5], 6];  
  
const flatArray = nestedArray.reduce((acc, val) => acc.concat(Array.isArray(val) ? val.flat() : val), []);  
// 注意：上面的代码实际上在递归调用时使用了 `flat()`，仅为了演示。  
// 一个不使用 `flat()` 的版本如下：  
  
function flattenArray(arr) {  
  return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flattenArray(val) : val), []);  
}  
  
const flatArrayWithoutFlat = flattenArray(nestedArray);  
console.log(flatArrayWithoutFlat); // 输出: [1, 2, 3, 4, 5, 6]

4. 数组分组

将数组中的元素根据某个属性分组。

const students = [  
  {name: 'Alice', grade: 'A'},  
  {name: 'Bob', grade: 'B'},  
  {name: 'Charlie', grade: 'A'},  
  {name: 'David', grade: 'B'}  
];  
  
const groupedByGrade = students.reduce((acc, current) => {  
  if (!acc[current.grade]) {  
    acc[current.grade] = [];  
  }  
  acc[current.grade].push(current);  
  return acc;  
}, {});  
  
console.log(groupedByGrade);  
// 输出: { A: [{ name: 'Alice', grade: 'A' }, { name: 'Charlie', grade: 'A' }], B: [{ name: 'Bob', grade: 'B' }, { name: 'David', grade: 'B' }] }

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

const array = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];  
  
const count = array.reduce((acc, current) => {  
  if (acc[current]) {  
    acc[current]++;  
  } else {  
    acc[current] = 1;  
  }  
  return acc;  
}, {});  
  
console.log(count); // 输出: { apple: 2, banana: 2, orange: 1, grape: 1 }