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 = 初始值 0const 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 }
)
