ES2015(常称 ES6)核心特性:作用域、模块、集合与异步
本文目录
开发者常把 ES2015 叫作 ES6;标准发布后采用年份编号,因此“ES6 特性”在很多旧文章里是一个宽泛标签。本文聚焦 ES2015,不把后来版本的能力混进同一张清单。项目是否能使用某语法,最终取决于浏览器/Node 版本、构建目标和 polyfill,而不是 Babel 是否能解析代码。
声明、作用域与解构
var 是函数作用域,let 和 const 是块级词法作用域。后两者从块起始到声明初始化之间处于暂时性死区,访问会抛出 ReferenceError,不能简单说“let 不提升”。const 固定的是绑定,若值是对象,属性仍可变;想要不可变状态需要额外约束或创建新对象。
数组解构按迭代顺序取值,对象解构按属性键取值;默认值只在结果为 undefined 时生效。rest 必须位于最后,且解构并不替代输入校验。扩展语法便于组合数组与对象,但复制只到一层,嵌套对象仍共享引用。
const [first, ...remaining] = ['alpha', 'beta', 'gamma'];
const { id, label: displayLabel = '未命名', ...metadata } = {
id: 'item-1',
label: undefined,
active: true,
};
const defaults = { pageSize: 20, filters: { status: 'all' } };
const input = { pageSize: 50 };
const options = { ...defaults, ...input };
options.filters === defaults.filters; // true: nested value is shared
模板字符串适合插值和多行文本,但把不可信值插进 HTML 模板仍然可能产生 XSS;字符串语法不会自动转义输出上下文。函数默认参数、rest 参数和参数解构能让输入约定更直接,仍需对来自网络的数据做运行时校验。
函数、类与模块
箭头函数从外层词法环境捕获 this,没有自己的 arguments,也不能用 new 构造对象。对象方法需要动态的接收者时用普通方法简写;不要为了短而把箭头函数塞进所有场景。
class 提供基于原型的构造器/方法语法,实例方法仍共享在原型上。extends / super 表达继承关系,但组合通常比复杂的继承层级更容易维护。类体运行在严格模式;静态字段、私有字段和装饰器等能力并非全部属于 ES2015,使用前应检查对应标准年份和目标运行时。
ES modules 用静态 import / export 表达依赖,默认是严格模式并有模块级作用域。静态导入在解析阶段确定;按条件加载可使用后续版本的动态 import()。浏览器原生模块需要正确的 MIME、CORS 和模块脚本加载配置,开发服务器的成功不等于生产 CDN 已配置正确。
集合、迭代器与异步
for...of 遍历可迭代值;for...in 遍历可枚举属性名,数组中不应拿它当元素循环。Map 允许任意类型的键并保留插入顺序,Set 用于唯一值集合;弱集合主要服务于对象关联,不能被枚举。Symbol 可创建唯一属性键,但并不是安全的私有存储。
ES2015 引入 Promise,用于表达一次异步结果及其链式处理;它不自动并行或取消底层工作。Promise.all 全部成功才兑现,任一拒绝会让组合结果拒绝;async/await 和 Promise.allSettled 是后续版本能力。把它们混称为“ES6 新特性”会让旧浏览器支持范围判断失真。
const byId = new Map();
for (const item of [{ id: 'a', score: 8 }, { id: 'b', score: 12 }]) {
byId.set(item.id, item);
}
const selected = Array.from(byId.values())
.filter((item) => item.score >= 10)
.map((item) => item.id);
迁移与兼容验收
- 锁定支持的浏览器和 Node 版本,检查语法特性与内置 API 两张兼容表。
- 语法转换不一定提供缺失 API 的 polyfill;按需选择 polyfill,并评估包体与全局副作用。
- 单测覆盖 TDZ、空值默认、可迭代输入、浅拷贝共享和 Promise rejection。
- 浏览器模块要在真实 HTTP/HTTPS 环境验证 MIME、跨源响应、缓存与错误日志。
- 搜索仓库里模板字符串生成 HTML、无意的原地修改及不必要的类继承。
参考:MDN let、MDN Destructuring、MDN Arrow functions、MDN JavaScript modules、MDN Promise、ECMAScript specification。
Live Notes
留言提交后会先进入审核,审核通过后对其他读者公开。