Array.prototype.reduce() 是 JavaScript 数组的一个高阶函数，用于将数组元素归并为单个值。以下是简单易懂的介绍：

1. 基本语法

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

2. 最简单的例子：数组求和

const numbers = [1, 2, 3, 4, 5];

// 传统循环写法
let sum = 0;
for (let num of numbers) {
  sum += num;
}
console.log(sum); // 15

// reduce 写法（一行搞定）
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

3. 执行过程分解

const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, curr) => {
  console.log(`acc: ${acc}, curr: ${curr}`);
  return acc + curr;
}, 0);

// 执行过程：
// 第1次: acc=0, curr=1 → 返回 0+1=1
// 第2次: acc=1, curr=2 → 返回 1+2=3  
// 第3次: acc=3, curr=3 → 返回 3+3=6
// 最终结果: 6

4. 常见应用场景

(1) 数组 → 对象

const fruits = ['apple', 'banana', 'apple', 'orange'];

// 统计水果出现次数
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count); // { apple: 2, banana: 1, orange: 1 }

(2) 数组 → 新数组

const numbers = [1, 2, 3, 4, 5];

// 筛选偶数并平方
const result = numbers.reduce((acc, num) => {
  if (num % 2 === 0) {
    acc.push(num * num);
  }
  return acc;
}, []);

console.log(result); // [4, 16]

(3) 对象数组 → 最大值

const products = [
  { name: 'A', price: 100 },
  { name: 'B', price: 200 },
  { name: 'C', price: 50 }
];

// 找最贵的产品
const expensive = products.reduce((max, product) => 
  product.price > max.price ? product : max
);

console.log(expensive); // { name: 'B', price: 200 }

5. 初始值的重要性

有初始值

[1, 2, 3].reduce((acc, curr) => acc + curr, 0);
// 执行: 0+1=1 → 1+2=3 → 3+3=6
// 结果: 6

无初始值（使用第一个元素作为初始值）

[1, 2, 3].reduce((acc, curr) => acc + curr);
// 执行: 1+2=3 → 3+3=6  
// 结果: 6

⚠️ 注意：空数组无初始值会报错：

[].reduce((acc, curr) => acc + curr); // ❌ 报错
[].reduce((acc, curr) => acc + curr, 0); // ✅ 返回 0

6. 在 Vue 中的实用示例

<template>
  <div>
    <p>总价: {{ totalPrice }}</p>
    <p>最贵商品: {{ mostExpensive.name }} ({{ mostExpensive.price }}元)</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { name: '手机', price: 2999, quantity: 1 },
        { name: '耳机', price: 399, quantity: 2 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => 
        sum + item.price * item.quantity, 0
      );
    },
    mostExpensive() {
      return this.cartItems.reduce((max, item) => 
        item.price > max.price ? item : max
      );
    }
  }
};
</script>

7. 与其他数组方法对比

// 链式调用示例
const result = [1, 2, 3, 4, 5]
  .filter(n => n % 2 === 0)    // [2, 4]
  .map(n => n * 2)             // [4, 8]  
  .reduce((sum, n) => sum + n, 0); // 12

总结

• 核心功能：将数组归并（reduce）为单个值
• 优势：替代复杂循环，代码更简洁
• 适用场景：求和、统计、分组、找最值等聚合操作
• 记忆技巧：想象成”压缩”数组为一个结果

reduce() 是函数式编程的重要工具，掌握后能大幅提升代码简洁性和可读性！