数组归约方法

数组归约方法

数组归约是JavaScript中处理数组数据的重要技术，通过reduce方法可以将数组元素聚合成单个值。这种方法特别适合处理需要累加、统计或转换数组元素的场景。

reduce方法基础语法

reduce方法的基本语法如下：

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

其中callback是执行每个数组元素的函数，包含四个参数：

• accumulator：累计器
• currentValue：当前值
• currentIndex：当前索引
• array：原数组

initialValue是可选的初始值。

基本使用示例

最简单的归约操作是数组求和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出15

计算数组乘积：

const product = numbers.reduce((acc, curr) => acc * curr, 1);
console.log(product); // 输出120

复杂数据归约

处理对象数组时，reduce同样有效：

const orders = [
  { id: 1, amount: 100 },
  { id: 2, amount: 200 },
  { id: 3, amount: 300 }
];

const totalAmount = orders.reduce((acc, order) => acc + order.amount, 0);
console.log(totalAmount); // 输出600

高级应用场景

数组扁平化

reduce可以实现多维数组扁平化：

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flatArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // 输出[1, 2, 3, 4, 5, 6]

数据分组

按照特定条件分组数据：

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

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

console.log(groupedByAge);
// 输出: {21: [{name: 'Alice', age: 21}, {name: 'Charlie', age: 21}], 25: [{name: 'Bob', age: 25}]}

统计字符出现频率

统计字符串中字符出现次数：

const str = 'javascript';
const charCount = [...str].reduce((acc, char) => {
  acc[char] = (acc[char] || 0) + 1;
  return acc;
}, {});

console.log(charCount);
// 输出: {j: 1, a: 2, v: 1, s: 1, c: 1, r: 1, i: 1, p: 1, t: 1}

reduceRight方法

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

const reversed = [1, 2, 3].reduceRight((acc, curr) => acc.concat(curr), []);
console.log(reversed); // 输出[3, 2, 1]

性能考虑

在处理大型数组时，reduce可能不是最高效的选择。现代JavaScript引擎对for循环的优化更好，在性能关键场景可以考虑替代方案。

常见错误与陷阱

忘记提供初始值

当数组可能为空时，必须提供初始值：

[].reduce((acc, curr) => acc + curr); // 抛出TypeError
[].reduce((acc, curr) => acc + curr, 0); // 正确

修改原始数组

在回调中修改原数组可能导致意外行为：

// 不推荐的做法
const badExample = [1, 2, 3].reduce((acc, curr, index, arr) => {
  arr.push(curr * 2); // 修改原数组
  return acc + curr;
}, 0);

与其他数组方法结合

reduce可以与其他数组方法组合使用：

const data = [1, 2, 3, 4, 5, 6];
const result = data
  .filter(x => x % 2 === 0) // 筛选偶数
  .map(x => x * 2) // 乘以2
  .reduce((acc, curr) => acc + curr, 0); // 求和

console.log(result); // 输出24 (2*2 + 4*2 + 6*2)

实现其他数组方法

可以用reduce实现一些数组方法：

实现map

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

console.log(mapWithReduce([1, 2, 3], x => x * 2)); // 输出[2, 4, 6]

实现filter

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

console.log(filterWithReduce([1, 2, 3, 4], x => x % 2 === 0)); // 输出[2, 4]

异步归约

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

async function asyncReduce(array, callback, initialValue) {
  let accumulator = initialValue;
  for (const item of array) {
    accumulator = await callback(accumulator, item);
  }
  return accumulator;
}

asyncReduce([1, 2, 3], async (acc, val) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return acc + val;
}, 0).then(console.log); // 输出6

实际应用案例

购物车总价计算

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

const total = cart.reduce((acc, item) => {
  return acc + (item.price * item.quantity);
}, 0);

console.log(total); // 输出50 (15*2 + 2*5 + 10*1)

管道函数组合

实现函数管道：

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const add5 = x => x + 5;
const multiply2 = x => x * 2;
const subtract3 = x => x - 3;

const transform = pipe(add5, multiply2, subtract3);
console.log(transform(10)); // 输出27 ((10+5)*2-3)

浏览器兼容性

reduce方法在ECMAScript 5中引入，支持所有现代浏览器和Node.js环境。对于旧版浏览器，可能需要polyfill：

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback, initialValue) {
    // polyfill实现
  };
}