II.5 JavaScript：赋予交互性生命

II.5.1 核心语言概念（ES6+）

JavaScript (JS) 是一种轻量级、解释型编程语言，它为网站添加“交互行为”和功能，提高交互性并实现动态 UI 元素。

• 变量（let/const）：ES6 引入的块级作用域变量声明，比 var 提供了更好的作用域控制。 const 创建一个不可变引用，而 let 允许重新赋值。
• 箭头函数：简洁的函数语法，具有词法 this 绑定。
• 数据结构（Array、Object、Map、Set）：对于组织和操作数据至关重要。 Map 和 Set 在集合方面比普通对象提供了更好的性能和键的灵活性。
• 控制流：if-else、switch、循环（for、while、do-while、for-in、for-of）。
• 作用域：决定了变量和函数在代码不同部分的访问性。
• 闭包：与词法环境捆绑在一起的函数，即使外部函数执行完毕，也允许访问外部作用域变量。
• this 关键字：指函数执行的上下文，其值由函数的调用方式决定。
• 原型链：JavaScript 的继承机制，其中对象从其原型对象继承属性和方法。

JavaScript 随着 ES6+ 功能（如 let/const、箭头函数和增强的数据结构（Map、Set））的演变，反映了向更可预测、函数式和高性能编程模式的转变。这减少了常见的错误（例如，var 提升问题、this 绑定混淆）并实现了更复杂的应用程序逻辑，直接影响了代码质量和可伸缩性。从 arguments 到 rest 参数 的转变是 API 清晰度的一个小但重要的改进。

II.5.2 异步 JavaScript：Promises、async/await、事件循环（宏任务/微任务）

• Promises：表示异步操作最终完成或失败的对象，简化了异步代码并避免了“回调地狱”。
• async/await：基于 Promises 的语法糖，允许以更同步、可读的方式编写异步代码。
• 事件循环：JavaScript 的单线程并发模型，使用作业队列处理异步操作。
• 宏任务/微任务：事件循环中用于调度异步操作的不同队列，其中微任务具有更高的优先级。

掌握异步 JavaScript（Promises、async/await、事件循环）对于构建响应式前端应用程序至关重要。如果缺乏深入理解，开发者可能会创建“卡顿”的 UI 或陷入“回调地狱”，直接影响用户体验和代码可维护性。宏任务和微任务之间的区别解释了复杂异步流中微妙的时间差异。

II.5.3 DOM 操作：与网页交互

直接修改文档对象模型 (DOM) 以响应用户操作或数据更改来更新内容、样式或结构。DOM 操作是 JavaScript 与 HTML 和 CSS 交互的核心机制。框架抽象了这一点，但底层概念仍然是基础。

II.5.4 模块系统：import/export

ES 模块（import/export）提供了一种标准化的方式，将 JavaScript 代码组织成可重用模块，从而提高可维护性并防止全局命名空间污染。

ES 模块的广泛采用 是从旧的、效率较低的模块模式（CommonJS、AMD）的关键转变。这直接实现了打包工具中的 tree-shaking 等功能，并改进了代码组织，从而减小了包大小并提高了性能。