0Pricing
Frontend Academy · 课时

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

使用高阶方法转换、筛选和聚合数组，而不是手写循环。将它们链式组合，构建表达力更强的数据处理流程。

数组方法：map、filter、reduce、find 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么使用数组方法

命令式 for 循环虽然可行，但会隐藏意图。数组高阶方法声明您想要的结果，而不是声明如何进行迭代。它们生成更清晰、可测试、可组合的代码，读起来就像散文一样。

Array.map()——转换每个元素

map() 会返回一个新数组，其中每个元素都经过回调函数转换。原数组不会被修改。只要需要将一个数组转换为另一个数组，就可以使用它。

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter()——选择匹配的元素

filter() 会返回一个新数组，其中只包含回调函数返回真值的元素。回调函数是一个谓词函数。

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce()——累积一个值

reduce(callback, initialValue) 会将所有元素累积为一个值。回调函数接收累加器和当前元素。初始值就是累加器的起始值。

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find()——查找第一个匹配项

find() 会返回与谓词匹配的第一个元素；如果没有匹配项，则返回 undefined。请使用它根据 ID 或属性值查找项目。

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() 类似于 find()，但会返回匹配元素的索引；如果找不到，则返回 -1。它适合用于查找数组中需要更新的元素位置。

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() 与 Array.every()

some() 会在至少一个元素通过测试时返回 true。every() 只有在所有元素都通过测试时才返回 true。两者都会在得到第一个确定结果时提前结束。

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap()——先映射再展平

flatMap() 会映射每个元素，然后将结果展平一层。它等价于 .map(...).flat()，但效率更高。

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

链式调用数组方法

这些方法会返回新数组，因此您可以将它们链式调用。请从左到右阅读调用链：先筛选，再转换，最后聚合。

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() 与 Array.includes()

at(-1) 会获取最后一个元素。includes(value) 会检查某个值是否存在。这比 arr[arr.length - 1] 和 arr.indexOf(v) !== -1 清晰得多。

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

不可变性：不要修改原数据

map、filter、reduce 会返回新数组。push、弹出末尾元素操作和拼接操作会修改原数组。在 React 状态中，请始终创建新数组（使用展开语法或 map），而不要直接修改状态。

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

快速检查

哪种数组方法会返回一个新数组，其中包含回调函数返回 true 的元素？

回顾：数组方法

map() 会转换每个元素。filter() 会选择匹配的元素。reduce() 会将元素累积为一个值。find() 会返回第一个匹配项。some()/every() 会测试成员是否满足条件。将这些方法链式组合起来，可以用易读的声明式数据流水线替代嵌套循环。

常见问题解答

「数组方法：map、filter、reduce、find」课时是免费的吗？

是的 — 「数组方法：map、filter、reduce、find」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「数组方法：map、filter、reduce、find」这节课中我会学到什么？

使用高阶方法转换、筛选和聚合数组，而不是手写循环。将它们链式组合，构建表达力更强的数据处理流程。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「数组方法：map、filter、reduce、find」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 数组方法：map、filter、reduce、find
  2. 对象解构与展开运算符
  3. 模板字面量与可选链
  4. 模块：import 与 export
← 返回 Frontend Academy