数组方法：map、filter、reduce、find

学习使用实际项目中最常用的四种数组方法来转换、筛选和聚合数据。

10 分钟 · 3 题

在真实项目中，你的大部分时间都花在转换数据上：一份要展示的产品列表、要排序的 API 结果、要合计的购物车。map、filter、reduce 和 find 方法可以用更简短、更具表达力的代码取代你的大多数 for 循环。它们从不修改原始数组：它们返回一个新的结果，这能避免一整类的 bug。

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter 只保留通过测试的元素，并返回一个新数组（可能为空）。find 在第一个匹配的元素处停止，并返回该元素本身，若无匹配则返回 undefined。思考练习：要获取所有有库存的产品，你会选哪个？而要获取那一个名为 "mouse" 的产品呢？

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce 是最强大的：它把一个数组归约成单个值（一个数字、一个对象、一个字符串）。它接收一个带有累加器和当前元素的函数，外加一个初始值。经典用例：计算购物车总额。

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

要选对方法，只需问自己一个问题：结果应该是什么形态？和原来一样多的元素但经过转换：map。一个子集：filter。单个元素：find。单个计算得出的值：reduce。这种反射式的判断无论在面试还是项目中都能为你节省宝贵的时间。

知识检测

确认你已牢记本课的重点内容。

1. 哪个方法总是返回一个与原数组长度相同的数组？
   • filter
   • map
   • reduce
   • find
2. 如果没有任何元素满足条件，find 会返回什么？
   • null
   • undefined
   • 一个空数组
   • 抛出一个错误
3. 在 cart.reduce((sum, item) => sum + item.unitPrice, 0) 中，末尾的 0 是做什么用的？
   • 它是 sum 累加器的初始值
   • 它是遍历的起始索引
   • 它是当数组无效时返回的值