MDN JavaScript 官方文档中的代码示例在哪里查看

一、参考页顶部：直接运行与修改的交互式示例

当通过搜索引擎或文档目录检索某个具体的 JavaScript 内置对象、方法或语句（例如 Array.prototype.map()、Promise.all() 或 if...else）进入标准参考页时，正文最顶端通常首先展示一个交互式代码编辑器（Interactive Example）。

该区域由只读或可编辑的代码窗口与实时控制台（Console）面板组合而成。它的核心定位是让读者在阅读长篇文字说明前，直观观察该 API 最常见的调用形态与返回值。

在交互式区域中，读者不仅可以直接查看语法怎么写，还能直接修改代码并点击 Run（运行）查看实时输出；若改动有误，点击 Reset（重置）即可恢复为官方原始代码。这使得初学者无需自行搭建 Node.js 环境或配置本地打包工具，即可快速理解方法的作用。

二、正文核心区域：场景化与进阶用法（Examples 小节）

页面顶部的交互式沙箱受限于版面，通常只放 5 到 15 行极简代码。如果需要了解复杂的业务场景、边界参数处理或与其它 API 的协同调用，需要向下滑动至正文中的 Examples（示例） 小节。

在 MDN 文档结构中，Examples 总是紧随在 Syntax（语法规格）、Parameters（参数列表）与 Return value（返回值）之后。一个结构完整的参考页通常包含以下层级的代码片段：

• 基础示例（Basic example / Using ...）：展示常规传参下的最简写法，每行代码附带预期输出注释（如 // Expected output: ...）。
• 使用回调函数的完整示例：例如在 filter 或 reduce 中展示包含 index 和 array 参数的解构与计算过程。
• 边界情况与容错处理：展示当入参为 null、undefined、稀疏数组（Sparse Array）或对象类型不匹配时的行为。
• 替代方案与旧版本兼容写法：对比早期替代方案或提供规范的 Polyfill（垫片）实现代码。

在 Examples 区域中，所有代码均采用标准语法高亮展示。鼠标悬停在代码块上时，右上角会出现复制图标（Copy to Clipboard），点击即可复制纯文本源码，防止手动拖选时漏选括号或混入多余字符。

三、系统化指南与教程：贯穿全章的项目代码

如果开发者的需求不是查阅某个单独的函数，而是想理解某一类技术的完整应用（例如“JavaScript 异步编程”、“面向对象原型继承”或“客户端 Web API”），应该从“参考文档（Reference）”切换到“指南与教程（Guides & Tutorials）”。

在 MDN 的导航路径中：

1. JavaScript 指南（JavaScript Guide）：位于 References > JavaScript > Guide。这里的代码示例不是单个函数的独立演示，而是循序渐进地构建一个功能模块。例如讲解正则表达式（RegExp）时，会提供从模式匹配、提取分组到动态替换的完整代码串联。
2. Web 开发入门（Learn web development）：位于 MDN 顶部主菜单的 Learn 分区。每个教程模块末尾都包含名为 Assessment（测验与练习）的章节，提供完整的待填充或已完成的项目源码（例如构建一个跳跃小球游戏、故事生成器等）。

四、官方 GitHub 仓库：查看完整工程与离线代码

MDN 页面上的所有示例并非封闭静态文本，它们全部开源并托管在 GitHub 的 mdn 组织下。对于需要完整 HTML、CSS 与 JS 文件互相配合的项目（如 Canvas 绘图、Web Audio、IndexedDB 或拖拽操作），直接在 GitHub 仓库中查看最为完整：

• mdn/interactive-examples：专门存放页面顶部交互式编辑器的代码库。目录结构按语言分类（如 live-examples/js-examples/），每个 API 都有独立的 .html 和 .js 文件，方便本地单独打开调试。
• mdn/content：MDN 所有文档的主体 Markdown 内容仓库。正文中的静态代码块均存放在对应文件路径的原始 Markdown 文件中，如果遇到文档页面加载缓慢或需要全局文本检索时，可以直接在该仓库内搜索代码关键字。
• mdn/dom-examples：针对复杂 Web API 的独立完整 Demo 仓库。例如 Fetch 配合 Service Worker、音视频流捕获等案例，均包含完整的静态资源与可运行入口。

五、查看与运行 MDN 示例时的关键注意事项

在查阅与复制代码时，需要结合以下三项工程边界条件，避免出现“在文档中运行正常，复制到本地报错”的情况：

1. 注意运行环境的差异（Browser vs Node.js）

MDN 主要面向 Web 前端标准。文档中的许多全局对象（如 window、document、localStorage 以及基于事件监听的 Web API）仅在浏览器环境中存在。如果读者将示例代码直接粘贴到本地的 Node.js 脚本或后端服务中运行，可能会抛出 ReferenceError: document is not defined。如果示例涉及纯 ECMAScript 语法（如 Object.entries() 或 Array.flat()），则两者通用。

2. 检查页面底部的浏览器兼容性矩阵（Browser Compatibility）

MDN 示例通常会采用最新的 ECMAScript 规范编写（例如可选链 ?.、空值合并 ?? 或 Array.prototype.at()）。每个参考页的倒数第二个核心模块是 Browser compatibility 表格。如果在旧版浏览器或未经过 Babel / SWC 转译的工程中使用这些示例代码，应先核对该表格，确认目标环境是否原生支持。

3. 注意控制台输出的表示格式

MDN 静态示例代码中常用注释标注输出：

const set = new Set([1, 2, 2, 3]);
console.log(set.size);
// Expected output: 3

console.log(set.has(4));
// Expected output: false

标注为 // Expected output: ... 的内容是规范输出参考，非代码的一部分。在编写业务逻辑时，切勿将注释误认为是方法内部的输出语法。

六、总结：MDN 代码示例查阅矩阵

为了在查阅 MDN 时建立清晰的操作习惯，下表与图示总结了四种代码示例位置的核心差异与适用场景：

通过理解 MDN 这四个维度的代码示例分布，开发者可以根据当前任务是“3秒验证参数”、“查找边界实现”、“系统构建认知”还是“离线工程调试”，快速精准地定位到最合适的示例区域，大幅提高查阅官方文档的效率。