17370845950

JavaScript数组最核心的三个方法是filter、map和reduce：filter按条件筛选元素并返回新数组；map对每个元素执行变换生成等长新数组；reduce通过累加器将数组聚合为单个值。

JavaScript 数组方法里最常用、最核心的三个是 filter、map 和 reduce，它们分别对应“筛选”、“转换”和“聚合”这三种典型操作，不修改原数组，返回新数组或新值，是函数式编程的基础。

filter：按条件留下符合条件的元素

filter 接收一个回调函数，对每个元素执行判断，返回 true 的元素会被保留在新数组中。

• 回调函数接收三个参数：当前元素（必填）、索引、原数组（后两个可选）
• 原数组不变，返回一个新数组（长度 ≤ 原数组）
• 常见用法：剔除空值、筛选数字、找特定状态的对象

例如，过滤出所有正数：

[−2, 0, 3, −1, 5].filter(x => x > 0); // [3, 5]

再比如，从用户列表中找出已激活的用户：

users.filter(user => user.active === true);

map：对每个元素做变换，生成新数组

map 把原数组每个元素传入回调函数，用其返回值组成一个新数组，长度与原数组一致。

• 适合字段提取（如取所有 id）、格式转换（如转成大写）、结构重组（如添加计算字段）
• 注意：如果回调没写 return，会得到一堆 undefined
• 不建议在 map 里做副作用（如修改外部变量、发请求），它专注“映射”

例如，把字符串数组全转为大写：

['hello', 'world'].map(s => s.toUpperCase()); // ['HELLO', 'WORLD']

又如，从对象数组中提取 id 和 name：

products.map(p => ({ id: p.id, title: p.name }));

reduce：把数组逐步合并成一个值

reduce 接收两个参数：累加器回调函数 + 初始值（可选）。它从左到右遍历，把上一次结果和当前元素一起传入回调，最终输出单个值。

• 初始值不传时，第一次调用用数组第一个元素作累加器，从第二个开始遍历
• 常见用途：求和、计数、扁平化、分组、查找最大值、对象合并等
• 别忘了明确指定初始值，尤其当结果类型与元素类型不同时（如数组→对象）

例如，求数字数组总和：

[1, 2, 3, 4].reduce((sum, curr) => sum + curr, 0); // 10

统计每种类型的数量（返回对象）：

orders.reduce((acc, order) => {
  acc[order.type] = (acc[order.type] || 0) + 1;
  return acc;
}, {});

基本上就这些。filter、map、reduce 是数组处理的三驾马车，掌握它们的意图和基本写法，就能应对大多数数据转换场景。不需要死记参数顺序，多写几次自然就熟了。