ECMAScript
一、ECMAScript 概述
1. 什么是 ECMA
ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为 Ecma 国际。
2. 什么是 ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。ECMAScript 和 JavaScript 的关系是：前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。
3. ECMA-262 历史
-
ES1 (1997): 制定了语言的基本语法
-
ES2 (1998): 较小改动
-
ES3 (1999): 引入正则、异常处理、格式化输出等
-
ES4 (2007): 过于激进，未发布
-
ES5 (2009): 引入严格模式、JSON，扩展对象、数组、原型、字符串、日期方法
-
ES6/ES2015 (2015): 模块化、面向对象语法、Promise、箭头函数、let、const等
-
从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1
二、ES6 (ES2015) 核心特性
1. let 和 const 声明
// let 特性
let a = 1;
// 1. 不允许重复声明
// let a = 2; // 报错
// 2. 块级作用域
{
let b = 2;
}
// console.log(b); // 报错
// 3. 不存在变量提升
// console.log(c); // 报错
let c = 3;
// const 特性
const PI = 3.14;
// PI = 3.1415; // 报错
// 但对于对象和数组，内容可以修改
const obj = {a: 1};
obj.a = 2; // 允许2. 解构赋值
// 数组解构
let [x, y] = [1, 2];
// 对象解构
let {name, age} = {name: '张三', age: 20};
// 函数参数解构
function foo({x, y}) {
console.log(x, y);
}
foo({x: 1, y: 2});3. 模板字符串
let name = '李四';
let str = `你好，${name}！
欢迎来到ES6的世界。`;4. 箭头函数
// 简化写法
const sum = (a, b) => a + b;
// this 绑定
const obj = {
value: 1,
getValue: function() {
setTimeout(() => {
console.log(this.value); // 1
}, 100);
}
};5. 函数参数默认值
function greet(name = '匿名') {
console.log(`你好，${name}`);
}6. 扩展运算符和 rest 参数
// 扩展运算符
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
// rest 参数
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}7. Symbol 类型
const sym1 = Symbol('key');
const sym2 = Symbol('key');
console.log(sym1 === sym2); // false8. Promise
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('成功'), 1000);
});
promise.then(value => console.log(value));9. Set 和 Map
// Set
let set = new Set([1, 2, 3, 3]);
console.log(set.size); // 3
// Map
let map = new Map();
map.set('name', '张三');10. Class 类
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`你好，我是${this.name}`);
}
}11. 模块化
// math.js
export function add(a, b) { return a + b; }
// app.js
import { add } from './math.js';三、ES2016 新特性
1. Array.prototype.includes
[1, 2, 3].includes(2); // true2. 指数运算符
2 ** 3; // 8四、ES2017 新特性
1. async/await
async function fetchData() {
const response = await fetch('api/data');
const data = await response.json();
return data;
}2. Object.values/Object.entries
const obj = {a: 1, b: 2};
Object.values(obj); // [1, 2]
Object.entries(obj); // [['a', 1], ['b', 2]]五、ES2018 新特性
1. 对象 rest/spread
const obj = {a: 1, b: 2, c: 3};
const {a, ...rest} = obj; // rest = {b: 2, c: 3}
const newObj = {...obj, d: 4};2. 正则表达式命名捕获组
const re = /(?\d{4})-(?\d{2})/;
const match = re.exec('2023-05');
match.groups.year; // "2023" 六、ES2019 新特性
1. Array.prototype.flat/flatMap
[1, [2, [3]]].flat(2); // [1, 2, 3]
[1, 2].flatMap(x => [x, x*2]); // [1, 2, 2, 4]2. Object.fromEntries
const entries = [['a', 1], ['b', 2]];
Object.fromEntries(entries); // {a: 1, b: 2}七、ES2020 新特性
1. 可选链操作符
const street = user?.address?.street;2. 空值合并运算符
const name = user.name ?? '匿名';3. Promise.allSettled
Promise.allSettled([promise1, promise2])
.then(results => console.log(results));八、ES2021 新特性
1. String.prototype.replaceAll
'hello world'.replaceAll('l', 'L'); // "heLLo worLd"2. 逻辑赋值运算符
a ||= b; // a = a || b
a &&= b; // a = a && b
a ??= b; // a = a ?? b九、ES2022 新特性
1. 顶层 await
// 模块顶层可以直接使用 await
const response = await fetch('api/data');2. 类静态块
class C {
static {
// 类初始化代码
}
}十、ES2023 新特性
1. Array.prototype.findLast/findLastIndex
[1, 2, 3, 2].findLast(x => x === 2); // 2十一、ES2024 新特性
1. 原生数组分组
const groups = Object.groupBy(items, item => item.category);2. Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();总结
从 ES6 到 ES2024，JavaScript 语言经历了巨大的变革和发展。这些新特性极大地提升了开发效率、代码可读性和维护性。作为现代 JavaScript 开发者，掌握这些特性是必不可少的技能。建议在实际项目中逐步尝试使用这些新特性，同时注意浏览器和运行环境的兼容性问题。