JavaScript与ECMAScript
2025年3月7日大约 6 分钟
JavaScript与ECMAScript
ECMAScript是JavaScript的标准规范，而JavaScript是这个规范的一种实现。本文将解释两者的关系，以及ECMAScript各个版本的主要特性。
JavaScript与ECMAScript的关系
什么是ECMAScript？
ECMAScript是由ECMA国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。它提供了脚本语言的规范，规定了语法、类型、语句、关键字、保留字、运算符和对象等核心内容。
JavaScript的组成部分
JavaScript实际上由三部分组成：
- ECMAScript：提供核心语言功能
- DOM（文档对象模型）：提供访问和操作网页内容的方法和接口
- BOM（浏览器对象模型）：提供与浏览器交互的方法和接口
// ECMAScript：语言核心
let message = "Hello World";
const sum = (a, b) => a + b;
// DOM：文档操作
document.getElementById("demo").innerHTML = message;
// BOM：浏览器交互
window.alert(message);
console.log(navigator.userAgent);为什么需要标准化？
在JavaScript早期，不同浏览器厂商对JavaScript的实现各不相同，导致开发者需要为不同浏览器编写不同的代码。ECMAScript的标准化旨在确保JavaScript在所有支持它的平台上以一致的方式工作。
ECMAScript版本演进
ECMAScript 1（1997年）
首个官方标准，奠定了JavaScript的基础。包含了基本语法、数据类型、语句、函数和对象等核心内容。
ECMAScript 2（1998年）
主要是编辑修改，使标准与ISO/IEC 16262国际标准保持一致，没有增加新特性。
ECMAScript 3（1999年）
引入了许多重要特性，成为JavaScript发展的重要里程碑：
- 正则表达式
- try/catch异常处理
- 新的控制语句（do-while, switch）
- 字符串和数组的新方法
// ES3正则表达式
let pattern = /\d+/g;
let result = "Year 2023".match(pattern);
// ES3异常处理
try {
// 可能出错的代码
nonExistentFunction();
} catch (error) {
console.error("捕获到错误：", error.message);
}ECMAScript 4
这个版本由于变化过于激进而被放弃，从未正式发布。
ECMAScript 5（2009年）
经过十年的停滞后，ECMAScript 5带来了重要的更新：
- 严格模式（"use strict"）
- JSON对象
- 数组方法（forEach, map, filter, reduce等）
- Object.create, Object.defineProperty等对象操作方法
- Function.prototype.bind
// 严格模式
"use strict";
function strictFunc() {
// 在严格模式下，未声明的变量赋值会抛出错误
// x = 10; // 这会抛出ReferenceError
}
// ES5数组方法
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
let sum = numbers.reduce((acc, curr) => acc + curr, 0);ECMAScript 5.1（2011年）
对ES5的小幅修订，主要是澄清一些细节。
ECMAScript 6（ES2015）
这是JavaScript历史上最重大的更新，引入了大量新特性：
- 箭头函数
- 类
- 模块系统
- let和const声明
- 模板字符串
- 解构赋值
- 默认参数
- 扩展运算符
- Promise
- Map和Set集合
- Symbol类型
- 迭代器和生成器
- Proxy和Reflect
// ES6箭头函数和模板字符串
const greet = name => `Hello, ${name}!`;
// ES6类
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return `My name is ${this.name}`;
}
}
// ES6解构赋值
const [a, b] = [1, 2];
const {name, age} = {name: 'Alice', age: 25};
// ES6 Promise
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));ECMAScript 2016（ES7）
引入了两个小特性：
- Array.prototype.includes
- 指数运算符（**）
// ES7 includes方法
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true
// ES7指数运算符
const power = 2 ** 10; // 1024ECMAScript 2017（ES8）
主要特性包括：
- async/await
- Object.values/Object.entries
- String padding
- Object.getOwnPropertyDescriptors
- 尾逗号函数参数列表
// ES8 async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('获取数据失败:', error);
}
}
// ES8 Object.values和Object.entries
const person = { name: 'Bob', age: 30 };
console.log(Object.values(person)); // ['Bob', 30]
console.log(Object.entries(person)); // [['name', 'Bob'], ['age', 30]]ECMAScript 2018（ES9）
主要特性包括：
- 异步迭代
- Rest/Spread属性
- Promise.finally()
- 正则表达式改进
// ES9 对象展开运算符
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
// ES9 Promise.finally()
fetchData()
.then(data => processData(data))
.catch(error => handleError(error))
.finally(() => cleanUp()); // 无论成功失败都会执行ECMAScript 2019（ES10）
主要特性包括：
- Array.prototype.flat/flatMap
- Object.fromEntries
- String.prototype.trimStart/trimEnd
- Optional catch binding
- Function.prototype.toString改进
// ES10 Array.flat
const nestedArray = [1, 2, [3, 4, [5, 6]]];
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5, 6]
// ES10 Object.fromEntries
const entries = [['name', 'Charlie'], ['age', 35]];
const obj = Object.fromEntries(entries); // { name: 'Charlie', age: 35 }ECMAScript 2020（ES11）
主要特性包括：
- 可选链操作符（?.）
- 空值合并操作符（??）
- BigInt
- Promise.allSettled
- globalThis
- 动态导入
// ES11 可选链操作符
const user = {
profile: {
// address: { city: 'Beijing' }
}
};
const city = user.profile?.address?.city; // 不会报错，返回undefined
// ES11 空值合并操作符
const name = null ?? 'Anonymous'; // 'Anonymous'
const age = 0 ?? 30; // 0（因为0不是null或undefined）ECMAScript 2021（ES12）
主要特性包括：
- String.prototype.replaceAll
- Promise.any
- 逻辑赋值运算符（&&=, ||=, ??=）
- WeakRef
- 数字分隔符
// ES12 String.replaceAll
const text = "Hello World, Hello Everyone";
const newText = text.replaceAll("Hello", "Hi"); // "Hi World, Hi Everyone"
// ES12 数字分隔符
const billion = 1_000_000_000; // 更易读的数字表示ECMAScript 2022（ES13）
主要特性包括：
- 类字段（公共和私有）
- 顶层await
- Object.hasOwn
- 正则表达式索引
- Error Cause
// ES13 类字段和私有方法
class Counter {
#count = 0; // 私有字段
increment() {
this.#count++;
}
get value() {
return this.#count;
}
}
// ES13 顶层await（模块中）
// 不需要async函数包装
const data = await fetch('https://api.example.com/data').then(r => r.json());JavaScript引擎与ECMAScript实现
不同的浏览器和JavaScript运行时使用不同的JavaScript引擎：
- V8：Google Chrome和Node.js使用
- SpiderMonkey：Firefox使用
- JavaScriptCore：Safari使用
- Chakra：旧版Edge使用（新版Edge现在使用V8）
这些引擎负责将ECMAScript代码转换为机器代码并执行，它们的实现方式和性能各不相同，但都遵循ECMAScript标准。
ECMAScript与JavaScript的未来
ECMAScript继续以年度发布周期演进，每年都会有新的语言特性被提案和采纳。TC39委员会（负责ECMAScript标准的技术委员会）采用分阶段提案流程：
- Stage 0：Strawperson（初步想法）
- Stage 1：Proposal（提案）
- Stage 2：Draft（草案）
- Stage 3：Candidate（候选）
- Stage 4：Finished（完成，将被纳入下一版本）
了解ECMAScript的发展方向有助于开发者提前适应新特性，并使用转译工具（如Babel）在当前环境中使用这些特性。
总结
ECMAScript是JavaScript的标准规范，定义了语言的核心功能。JavaScript则是这个规范的实现，同时还包括DOM和BOM。随着ECMAScript的不断发展，JavaScript已经从一个简单的脚本语言演变成为一个功能强大、应用广泛的编程语言。
作为开发者，了解ECMAScript的版本特性有助于我们编写更现代、更高效的JavaScript代码，同时也能更好地理解JavaScript的设计理念和发展方向。
延伸阅读
- ECMAScript官方规范
- TC39提案GitHub仓库
- Can I use - 检查各浏览器对ECMAScript特性的支持情况