JS数组方法精讲 (map/filter/reduce)

深入理解 map、filter、reduce 三个核心数组方法，学会用函数式思路处理数据。 · 难度：入门 · +15XP

数组三剑客

JavaScript 数组提供了多个高阶方法，其中最常用的是 map、filter 和 reduce。它们都不会修改原数组，而是返回新数组或单个值，适合链式调用和函数式编程风格。

1. map() — 映射

map 对数组每个元素执行回调函数，返回新数组。

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

2. filter() — 过滤

filter 保留回调返回 true 的元素，组成新数组。

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0); // [2, 4]

3. reduce() — 归约

reduce 将数组归约为单个值（可指定初始值）。

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 10

方法对比

链式调用示例

const orders = [
  { price: 10, qty: 2 },
  { price: 15, qty: 1 },
  { price: 20, qty: 3 }
];
const total = orders
  .filter(order => order.qty > 1)
  .map(order => order.price * order.qty)
  .reduce((sum, val) => sum + val, 0);
console.log(total); // 10*2 + 20*3 = 80

练习提示

右侧有一个包含多个产品的数组。请先使用 filter 筛选出价格大于50的产品，再使用 map 提取它们的名称，最后用 reduce 计算筛选后产品的总价格。