数组归约方法

数组归约方法的基本概念

数组归约是JavaScript中处理数组数据的重要技术，它通过遍历数组元素并将它们"缩减"为单个值。reduce()方法是最直接的实现方式，它接收一个回调函数作为累加器，依次处理数组中的每个元素。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：10

回调函数接收四个参数：累加器（上一次调用的返回值）、当前元素、当前索引和原数组。第二个参数是初始值，如果省略则使用数组第一个元素作为初始值。

reduce()方法的参数详解

reduce()方法的完整语法如下：

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

初始值的选择会影响处理逻辑：

// 无初始值
const arr = [1, 2, 3];
const sum1 = arr.reduce((acc, val) => acc + val); 
// 第一次调用：acc=1, val=2
console.log(sum1); // 6

// 有初始值
const sum2 = arr.reduce((acc, val) => acc + val, 10);
// 第一次调用：acc=10, val=1
console.log(sum2); // 16

当数组为空且未提供初始值时，会抛出TypeError。因此建议总是提供初始值。

常见归约场景示例

计算数组元素总和：

const prices = [12.5, 19.9, 7.2];
const total = prices.reduce((sum, price) => sum + price, 0);

查找最大值：

const scores = [88, 92, 76, 94, 85];
const maxScore = scores.reduce((max, score) => 
  score > max ? score : max, -Infinity
);

数组扁平化：

const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, curr) => acc.concat(curr), []);

统计字符出现次数：

const text = "hello world";
const charCount = [...text].reduce((count, char) => {
  count[char] = (count[char] || 0) + 1;
  return count;
}, {});

reduceRight()方法

reduceRight()与reduce()类似，但从数组末尾开始处理：

const arr = ['a', 'b', 'c'];
const right = arr.reduceRight((acc, val) => acc + val); // 'cba'
const left = arr.reduce((acc, val) => acc + val); // 'abc'

这在处理需要从右向左计算的场景时很有用，比如数学表达式求值。

高级归约技巧

管道函数组合：

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const add5 = x => x + 5;
const double = x => x * 2;
const square = x => x * x;

const transform = pipe(add5, double, square);
console.log(transform(2)); // ((2 + 5) * 2)^2 = 196

对象属性分组：

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 21 }
];

const grouped = people.reduce((groups, person) => {
  const key = person.age;
  if (!groups[key]) groups[key] = [];
  groups[key].push(person);
  return groups;
}, {});

性能考虑与替代方案

虽然reduce()很强大，但在某些场景可能有更优选择：

1. 简单求和时，for循环通常更快：

let sum = 0;
for (const num of numbers) sum += num;

2. 现代JavaScript提供了更简洁的替代方案：

// 代替reduce的求和
const sum = numbers.reduce((a,b) => a+b, 0);
// 替代方案
const sumAlt = numbers.sum(); // 提案阶段

3. 链式操作时，分开处理可能更清晰：

// 使用reduce
result = arr.filter(...).map(...).reduce(...);

// 分开处理
const filtered = arr.filter(...);
const mapped = filtered.map(...);
const reduced = mapped.reduce(...);

与其他数组方法的结合

reduce()可以模拟许多数组方法的功能：

实现map：

function mapWithReduce(arr, fn) {
  return arr.reduce((acc, val, i) => {
    acc[i] = fn(val, i, arr);
    return acc;
  }, []);
}

实现filter：

function filterWithReduce(arr, predicate) {
  return arr.reduce((acc, val, i) => {
    if (predicate(val, i, arr)) acc.push(val);
    return acc;
  }, []);
}

实现find：

function findWithReduce(arr, predicate) {
  return arr.reduce((found, val) => 
    found === undefined && predicate(val) ? val : found
  , undefined);
}

实际应用案例

购物车结算：

const cart = [
  { name: 'Book', price: 12.99, quantity: 2 },
  { name: 'Pen', price: 1.50, quantity: 5 },
  { name: 'Notebook', price: 5.99, quantity: 1 }
];

const total = cart.reduce((sum, item) => 
  sum + (item.price * item.quantity), 0
);

const itemList = cart.reduce((list, item) => 
  `${list}${item.name} x${item.quantity}\n`, '购物清单：\n'
);

数据转换：

const apiResponse = [
  { id: 1, name: '用户1', role: 'admin' },
  { id: 2, name: '用户2', role: 'user' }
];

// 转换为 {1: '用户1', 2: '用户2'} 格式
const idNameMap = apiResponse.reduce((map, user) => {
  map[user.id] = user.name;
  return map;
}, {});

// 按角色分组
const usersByRole = apiResponse.reduce((groups, user) => {
  if (!groups[user.role]) groups[user.role] = [];
  groups[user.role].push(user);
  return groups;
}, {});

错误处理与边界情况

处理空数组时应始终提供初始值：

[].reduce((sum, n) => sum + n); // 抛出TypeError
[].reduce((sum, n) => sum + n, 0); // 返回0

处理稀疏数组时需注意：

const sparse = [1,,3];
const compact = sparse.reduce((acc, val) => {
  if (val !== undefined) acc.push(val);
  return acc;
}, []);

处理异步操作需要特殊处理：

async function asyncReduce(arr, callback, initial) {
  let acc = initial;
  for (const item of arr) {
    acc = await callback(acc, item);
  }
  return acc;
}