JavaScript Academy · 课时

声明式数据转换

Q: 「声明式数据转换」这节课中我会学到什么？

使用 map、filter 和 reduce 转换数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 map、filter 和 reduce 转换数据。

第 2 / 4 课13 个步骤

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

声明式与命令式

命令式代码描述 HOW（循环、计数器和修改）。声明式代码描述 WHAT。像 map、filter 和 reduce 这样的数组方法，让您可以描述转换过程，而无需手写循环。

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

map：转换每个元素

map 会返回一个长度相同的新数组，其中每个元素都经过您的函数转换。原数组不会被修改。

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter：保留部分元素

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

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

reduce：合并为一个值

reduce 会通过累积操作，将数组合并为单个值。请提供一个归约函数和一个初始值。

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

串联操作

由于每个方法都会返回一个新数组，因此您可以将它们串联成易读的流水线，并按从上到下的顺序理解。

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

实际的流水线

将 filter、map 和 reduce 组合起来，就可以通过一个表达式回答有关数据集的问题。

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

映射为新结构

map 不仅可以处理数字，还可以重新组织对象。请将每条记录投影为您关注的字段。

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce 可以构建任何结构

reduce 不仅用于求和。它可以构建对象、对数据分组，甚至重新实现 map 和 filter。

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

顺序很重要

先进行过滤，可以避免转换最终会被丢弃的元素。请将开销较低的过滤操作放在流水线前面，以提高可读性和效率。

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

完全不进行修改

这些方法不会改变源数组。这使流水线安全且可预测，也非常契合函数式风格。

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap 处理嵌套结果

当 map 产生数组时，flatMap 可以在一个步骤中完成映射并展平一层结果。

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

快速检查

声明式转换。

在交互式课程中回答

回顾

声明式转换描述 WHAT，而不是 HOW。map 负责转换，filter 负责筛选，reduce 负责合并为一个值；可以将它们串联成易读的流水线。它们都不会修改源数组，尽早过滤可以提高效率，而 reduce 可以构建任意结构。当 map 产生数组时，请使用 flatMap。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 59
课程: 200

免费开始学习查看完整课程

常见问题解答

「声明式数据转换」课时是免费的吗？

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

「声明式数据转换」这节课中我会学到什么？

使用 map、filter 和 reduce 转换数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「声明式数据转换」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy