当前位置：首页 > ops >正文

现代 JavaScript (ES6+) 入门到实战（四）：数组的革命 map/filter/reduce - 告别 for 循环

ops 2025/6/30 22:34:12

在编程中，处理一组数据（一个列表或集合）是最常见的任务之一。在很长一段时间里，for 循环是我们手中唯一的锤子。但当你手里只有锤子时，看什么都像钉子。

for 循环虽然强大，但它过于“过程化”，你需要手动管理索引、循环条件和每一步的操作，代码冗长且容易出错。

一、回忆杀：万能但繁琐的 for 循环

假设我们有一个用户列表，现在需要完成三个任务：

提取所有用户的名字。
筛选出所有成年用户。
计算所有用户的年龄总和。

【过去我们这么写 (ES5)】

var users = [{ id: 1, name: '张三', age: 16 },{ id: 2, name: '李四', age: 22 },{ id: 3, name: '王五', age: 30 }
];// 任务1: 提取名字
var names = [];
for (var i = 0; i < users.length; i++) {names.push(users[i].name);
}
// names: ['张三', '李四', '王五']// 任务2: 筛选成年人
var adults = [];
for (var i = 0; i < users.length; i++) {if (users[i].age >= 18) {adults.push(users[i]);}
}
// adults: [{...李四}, {...王五}]// 任务3: 计算年龄总和
var totalAge = 0;
for (var i = 0; i < users.length; i++) {totalAge += users[i].age;
}
// totalAge: 68

看到问题了吗？为了三个简单的任务，我们写了三个独立的 for 循环，代码重复且意图不明确。你必须读完整个循环体，才能理解它到底在“做什么”。

二、进化时刻：高阶函数登场

ES5 就已经为数组引入了一系列强大的“高阶函数”（如 map, filter, reduce），但它们真正的威力，是在与 ES6 的箭头函数结合后才彻底释放出来的。

什么是高阶函数？ 简单说，就是一个可以接收函数作为参数，或者返回一个函数的函数。

【现在我们这么写 (ES6+)】

任务1: 提取名字 - 使用 map
map 方法会遍历数组的每个元素，并根据你提供的函数返回一个全新的、长度相同的新数组。它用于“映射”或“转换”。

const names = users.map(user => user.name);
// names: ['张三', '李四', '王五']

一行代码搞定！代码的意图非常清晰：“将 users 数组映射成一个只包含 name 的新数组”。

任务2: 筛选成年人 - 使用 filter
filter 方法同样会遍历每个元素，但它会根据你提供的返回布尔值的函数来决定是否保留该元素，最终返回一个全新的、长度可能更短的新数组。它用于“筛选”或“过滤”。

const adults = users.filter(user => user.age >= 18);
// adults: [{...李四}, {...王五}]

同样一行代码，意图明确：“将 users 数组中 age 大于等于 18 的元素过滤出来”。

任务3: 计算年龄总和 - 使用 reduce
reduce 方法是最高级、最灵活的一个。它像一个“累加器”，会遍历数组，将每个元素“缩减”为一个最终的单一值（可以是数字、字符串、对象等）。
reduce 接收两个参数：一个回调函数，一个初始值。
回调函数有四个参数：(accumulator, currentValue, currentIndex, array)，我们最常用的是前两个：

accumulator (累加器): 上一次回调返回的值，或者是初始值。
currentValue (当前值): 数组中正在处理的元素。

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

代码解读：“将 users 数组缩减为一个值。从初始值 0 开始，将每个 user 的 age 累加到 sum 上”。

三、链式调用的魔力

这些高阶函数最酷的地方在于它们都返回一个新数组，这意味着你可以将它们链式调用！

需求：找到所有成年用户的名字，并用逗号连接成一个字符串。

【现在我们这么写 (ES6+)】

const adultNames = users.filter(user => user.age >= 18)  // 1. 先筛选出成年人.map(user => user.name)        // 2. 再提取他们的名字.join(', ');                   // 3. 最后用逗号连接// adultNames: "李四, 王五"