0Pricing
JavaScript Academy · 课时

结构化克隆与 URLSearchParams

使用 structuredClone 深拷贝数据（保留 Dates/Maps/Sets），并使用 URLSearchParams 解析和构建查询字符串

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

为什么使用这些工具

目标：安全地复制和序列化 URL 数据。

  • structuredClone会深度复制数据
  • 保留日期/映射/集合
  • URLSearchParams解析和构建查询字符串
  • 适合初学者的模式
结构化克隆与 URLSearchParams — 插图 1

保留类型的深度复制

structuredClone会创建深度副本，并完整保留日期对象。

// Deep copy with structuredClone (Node 17+/modern browsers)
const original = { n: 1, list: [1, 2], when: new Date("2024-01-01") };
const copy = structuredClone(original);

copy.n = 2;
copy.list.push(3);

console.log("original.n:", original.n);
console.log("copy.n:", copy.n);
console.log("dates equal type?", copy.when instanceof Date);
结构化克隆与 URLSearchParams — 插图 2

JSON 会丢失类型

JSON 只包含数据；日期/映射/集合会变成普通值，或者直接丢失。

// JSON round-trip loses special types (e.g., Date becomes string)
const obj = { when: new Date("2024-01-01"), ok: true };
const round = JSON.parse(JSON.stringify(obj));

console.log("after JSON:", typeof round.when, round.when);
console.log("is Date?", round.when instanceof Date);
结构化克隆与 URLSearchParams — 插图 3

映射与集合可以保留

使用 structuredClone 克隆时，映射和集合都能正确保留。

// structuredClone preserves Map and Set
const m1 = new Map([["a", 1]]);
const s1 = new Set([1, 2]);

const cloned = structuredClone({ m1, s1 });

console.log("map has a?", cloned.m1.has("a"));
console.log("set has 2?", cloned.s1.has(2));
结构化克隆与 URLSearchParams — 插图 4

解析查询字符串

URLSearchParams读取查询字符串；需要时可以使用get、getAll、has并进行迭代。

// Parse a query string with URLSearchParams
const qs = "q=shoes&color=red&color=blue&page=2";
const params = new URLSearchParams(qs);

console.log("q:", params.get("q"));
console.log("first color:", params.get("color"));
console.log("all colors:", params.getAll("color"));
console.log("page:", params.get("page"));
结构化克隆与 URLSearchParams — 插图 5

构建查询字符串

使用set/append，然后调用toString()创建安全的查询字符串。

// Build a query string from key/value pairs
const build = new URLSearchParams();
build.set("q", "shoes");
build.append("color", "red");
build.append("color", "blue");
build.set("page", String(2));

console.log("query:", build.toString());
// Example full URL
const url = "https://example.com/search?" + build.toString();
console.log("url:", url);
结构化克隆与 URLSearchParams — 插图 6

structuredClone 与 JSON 测验

快速检查：保留类型的深度复制。

结构化克隆与 URLSearchParams — 插图 7

回顾

回顾：使用structuredClone进行保留日期/映射/集合等类型的深度复制。使用URLSearchParams安全地解析和构建查询字符串。

结构化克隆与 URLSearchParams — 插图 8

常见问题解答

「结构化克隆与 URLSearchParams」课时是免费的吗？

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

「结构化克隆与 URLSearchParams」这节课中我会学到什么？

使用 structuredClone 深拷贝数据（保留 Dates/Maps/Sets），并使用 URLSearchParams 解析和构建查询字符串 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「结构化克隆与 URLSearchParams」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. JSON.parse / JSON.stringify 基础
  2. 结构化克隆与 URLSearchParams
  3. 安全解析 JSON 的策略
← 返回 JavaScript Academy