0Pricing
JavaScript Academy · 课时

映射与过滤——基础

使用映射和过滤转换并筛选数据；将它们串联起来，并避免变更以编写更安全的代码

映射与过滤——基础 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 2 节课。

map 与 filter 简介

目标：使用 map 转换元素，并使用 filter 选取元素。

  • map：转换
  • filter：筛选
  • 链接使用 map → filter
  • 不进行修改
映射与过滤——基础 — 插图 1

map 基础

map 会对每个元素应用一个函数，并返回一个新数组（长度不变）。

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
映射与过滤——基础 — 插图 2

filter 基础

filter 只返回回调函数返回 true 的元素（长度可能改变）。

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
映射与过滤——基础 — 插图 3

链接示例

组合多个步骤：先使用 map 进行转换，再使用 filter 进行筛选。

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
映射与过滤——基础 — 插图 4

不修改原数组示例

不可变性：map/filter 会返回新数组；原数组不会改变。

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
映射与过滤——基础 — 插图 5

编写简洁数组代码的提示

提示：

  • 为简短的回调函数使用清晰的名称（n、item）。
  • 让链保持简短（最多 2–3 步）。
  • 优先使用纯回调函数（没有副作用）。
映射与过滤——基础 — 插图 6

map 与 filter 小测

快速检查：转换每个元素。

映射与过滤——基础 — 插图 7

复习

复习：使用 map 转换值，使用 筛选 选出部分值，并将它们串联起来而不改变原始数组。

映射与过滤——基础 — 插图 8

常见问题解答

「映射与过滤——基础」课时是免费的吗？

是的 — 「映射与过滤——基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 2 节课。

「映射与过滤——基础」这节课中我会学到什么？

使用映射和过滤转换并筛选数据；将它们串联起来，并避免变更以编写更安全的代码 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「映射与过滤——基础」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 映射与过滤——基础
  2. 归并、部分与全部判断、查找——简单模式
← 返回 JavaScript Academy