JavaScript数组方法全解析：map、filter与reduce

JavaScript 中的数组是开发中最常用的数据结构之一，而 map、filter 和 reduce 是数组中最重要的三个方法。它们属于高阶函数，能够以函数式编程的方式处理数组，使代码更简洁、易读、可维护。下面是对这三个方法的详细解析：

🧠 一、map：映射转换数组

✅ 用途：

对数组中的每个元素进行映射转换，返回一个新数组，不改变原数组。

🔧 语法：

array.map(function(currentValue, index, array) {
  // return 转换后的值
}, thisArg)

📌 示例：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

⚠️ 注意：

• 不会修改原数组
• 返回值是一个新数组，长度与原数组相同

🧹 二、filter：过滤数组元素

✅ 用途：

根据条件过滤数组中的元素，返回一个符合条件元素组成的新数组。

🔧 语法：

array.filter(function(currentValue, index, array) {
  // return true 保留，false 排除
}, thisArg)

📌 示例：

const numbers = [10, 20, 30, 40, 50];
const filtered = numbers.filter(num => num > 30);
console.log(filtered); // [40, 50]

⚠️ 注意：

• 返回值是新数组，包含满足条件的元素
• 不会修改原数组

🔁 三、reduce：聚合数组为一个值

✅ 用途：

将数组中的所有元素累积为一个值，常用于求和、计数、扁平化等。

🔧 语法：

array.reduce(function(accumulator, currentValue, index, array) {
  // return 新的 accumulator
}, initialValue)

📌 示例1：求和

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

📌 示例2：统计字符出现次数

const str = 'hello';
const count = str.split('').reduce((acc, char) => {
  acc[char] = (acc[char] || 0) + 1;
  return acc;
}, {});
console.log(count); // { h: 1, e: 1, l: 2, o: 1 }

⚠️ 注意：

• initialValue 可选，作为初始值传入
• 如果不提供，初始值是数组第一个元素
• 返回的是一个聚合值（可以是数字、对象、数组等）

🆚 三者对比总结

🧩 实战场景对比

场景一：从用户数组中提取名字

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const names = users.map(user => user.name); // ["Alice", "Bob", "Charlie"]

场景二：筛选年龄大于18的用户

const adults = users.filter(user => user.age > 18);

场景三：统计所有用户的总年龄

const totalAge = users.reduce((sum, user) => sum + user.age, 0);

💡 小技巧

• 可以链式调用，如：

  const result = arr
    .filter(item => item > 10)
    .map(item => item * 2)
    .reduce((sum, item) => sum + item, 0);
  

• 用 reduce 实现 map 或 filter：

  // reduce 实现 map
  const mapped = arr.reduce((acc, item) => {
    acc.push(item * 2);
    return acc;
  }, []);
  

📚 总结

• map：转换数组元素
• filter：筛选符合条件的元素
• reduce：聚合数组为一个值

这三者构成了 JavaScript 函数式编程的核心，掌握它们能让你写出更简洁、优雅、可维护的代码！

如需进一步了解，还可以学习：

• find、some、every、forEach 等其他数组方法
• 不可变数据（Immutability）与函数式编程思想
• 链式调用与性能优化