ECMAScript 是 JavaScript 语言的标准化版本，它定义了 JavaScript 语言的语法和语义。自 ECMAScript 6（ES6）发布以来，JavaScript 的发展就变得越来越快，每年都会发布新的版本。在本文中，我们将介绍从 ECMAScript 6 到 ECMAScript 2021 的重要特性，帮助你更好地了解和掌握 JavaScript 语言的最新进展。
ECMAScript 6
let 和 const 声明变量
ES6 引入了 let 和 const 关键字，用于声明变量。与 var 不同，let 和 const 声明的变量具有块级作用域，可以避免变量提升和全局污染。
// www.javascriptcn.com code example
// 使用 let 声明变量
let count = 0;
for (let i = 0; i < 10; i++) {
count += i;
}
console.log(count); // 输出 45
// 使用 const 声明常量
const PI = 3.14;箭头函数
箭头函数（Arrow Function）是 ES6 中的一个新特性，它可以更简洁地定义函数。箭头函数没有自己的 this，它的 this 指向定义时所在的作用域。
// 使用箭头函数定义函数 const sum = (a, b) => a + b; console.log(sum(1, 2)); // 输出 3 // 使用箭头函数作为回调函数 const numbers = [1, 2, 3]; const squares = numbers.map(n => n * n); console.log(squares); // 输出 [1, 4, 9]
模板字符串
模板字符串（Template String）是 ES6 中的另一个新特性，它允许在字符串中嵌入变量和表达式。
// 使用模板字符串
const name = 'Alice';
const age = 25;
console.log(`My name is ${name}, and I am ${age} years old.`); // 输出 "My name is Alice, and I am 25 years old."解构赋值
解构赋值（Destructuring Assignment）是 ES6 中的一个新特性，它允许从数组或对象中提取值并赋值给变量。
// www.javascriptcn.com code example
// 使用数组解构赋值
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 输出 1 2 3
// 使用对象解构赋值
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // 输出 "Alice 25"类和继承
ES6 引入了类（Class）和继承（Inheritance）的概念，让 JavaScript 更接近传统面向对象编程语言。
// www.javascriptcn.com code example
// 定义一个类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
// 继承一个类
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
sayHello() {
super.sayHello();
console.log(`I am in grade ${this.grade}.`);
}
}
// 使用类创建对象
const alice = new Person('Alice', 25);
alice.sayHello(); // 输出 "Hello, my name is Alice."
const bob = new Student('Bob', 18, 10);
bob.sayHello(); // 输出 "Hello, my name is Bob. I am in grade 10."ECMAScript 2017
async/await
async/await 是 ES2017 中的一个新特性，它简化了异步编程的写法。async/await 实际上是基于 Promise 实现的语法糖。
// 使用 async/await 定义异步函数
async function fetchData() {
const response = await fetch('/api/data');
const data = await response.json();
return data;
}Object.values 和 Object.entries
Object.values 和 Object.entries 是 ES2017 中的新方法，用于获取对象的值和键值对列表。
// 使用 Object.values 获取对象的值
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // 输出 [1, 2, 3]
// 使用 Object.entries 获取对象的键值对列表
const entries = Object.entries(obj);
console.log(entries); // 输出 [["a", 1], ["b", 2], ["c", 3]]ECMAScript 2018
Rest/Spread 属性
Rest/Spread 属性是 ES2018 中的新特性，它允许在函数调用和数组/对象字面量中使用 ... 语法，将多个参数或属性展开为单个参数或属性。
// www.javascriptcn.com code example
// 使用 Rest 属性将多个参数合并为一个数组
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3)); // 输出 6
// 使用 Spread 属性将数组展开为多个参数
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出 6
// 使用 Spread 属性将对象合并为一个新对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出 { a: 1, b: 2, c: 3, d: 4 }Promise.finally
Promise.finally 是 ES2018 中的新方法，用于在 Promise 状态变为 resolved 或 rejected 时执行一些操作。
// 使用 Promise.finally 在 Promise 结束时执行操作
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('Done'));ECMAScript 2019
Array.prototype.{flat,flatMap}
Array.prototype.flat 和 Array.prototype.flatMap 是 ES2019 中的新方法，用于操作数组。
// www.javascriptcn.com code example // 使用 Array.prototype.flat 扁平化嵌套数组 const nestedArray = [1, [2, [3, [4]]]]; const flatArray = nestedArray.flat(Infinity); console.log(flatArray); // 输出 [1, 2, 3, 4] // 使用 Array.prototype.flatMap 映射并扁平化数组 const numbers = [1, 2, 3]; const squares = numbers.flatMap(n => [n, n * n]); console.log(squares); // 输出 [1, 1, 2, 4, 3, 9]
Object.fromEntries
Object.fromEntries 是 ES2019 中的新方法，用于将键值对列表转换为对象。
// 使用 Object.fromEntries 将键值对列表转换为对象
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出 { a: 1, b: 2, c: 3 }ECMAScript 2020
Nullish 合并运算符
Nullish 合并运算符（??）是 ES2020 中的新特性，用于处理 null 或 undefined 值。
// 使用 Nullish 合并运算符处理 null 或 undefined 值 const x = null ?? 'default'; const y = undefined ?? 'default'; console.log(x, y); // 输出 "default default"
可选链运算符
可选链运算符（?.）是 ES2020 中的新特性，用于处理可能不存在的属性或方法。
// 使用可选链运算符处理可能不存在的属性或方法
const person = { name: 'Alice', age: 25 };
const grade = person.school?.grade;
console.log(grade); // 输出 undefinedECMAScript 2021
String.prototype.replaceAll
String.prototype.replaceAll 是 ES2021 中的新方法，用于替换字符串中的所有匹配项。
// 使用 String.prototype.replaceAll 替换字符串中的所有匹配项
const str = 'hello, world';
const newStr = str.replaceAll('o', '0');
console.log(newStr); // 输出 "hell0, w0rld"Promise.any
Promise.any 是 ES2021 中的新方法，用于在多个 Promise 中选择第一个 resolved 的 Promise。
// www.javascriptcn.com code example
// 使用 Promise.any 在多个 Promise 中选择第一个 resolved 的 Promise
const promises = [
fetch('/api/data/1').then(response => response.json()),
fetch('/api/data/2').then(response => response.json()),
fetch('/api/data/3').then(response => response.json())
];
Promise.any(promises)
.then(data => console.log(data))
.catch(error => console.error(error));结语
本文介绍了从 ECMAScript 6 到 ECMAScript 2021 的重要特性，包括 let 和 const 声明变量、箭头函数、类和继承、async/await、Rest/Spread 属性、Promise.finally、Array.prototype.{flat,flatMap}、Object.fromEntries、Nullish 合并运算符、可选链运算符、String.prototype.replaceAll 和 Promise.any。这些特性可以帮助你更好地了解和掌握 JavaScript 语言的最新进展，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3dda7a941bf71347518be