ECMAScript 是 JavaScript 语言的标准化版本，它定义了 JavaScript 语言的语法和语义。自 ECMAScript 6（ES6）发布以来，JavaScript 的发展就变得越来越快，每年都会发布新的版本。在本文中，我们将介绍从 ECMAScript 6 到 ECMAScript 2021 的重要特性，帮助你更好地了解和掌握 JavaScript 语言的最新进展。
ECMAScript 6
let 和 const 声明变量
ES6 引入了 let 和 const 关键字，用于声明变量。与 var 不同，let 和 const 声明的变量具有块级作用域，可以避免变量提升和全局污染。
-- -------------------- ---- ------- -- -- --- ---- --- ----- - -- --- ---- - - -- - - --- ---- - ----- -- -- - ------------------- -- -- -- -- -- ----- ---- ----- -- - -----
箭头函数
箭头函数（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 中的一个新特性，它允许从数组或对象中提取值并赋值给变量。
-- -------------------- ---- ------- -- -------- ----- ------- - --- -- --- ----- --- -- -- - -------- -------------- -- --- -- -- - - - -- -------- ----- ------ - - ----- -------- ---- -- -- ----- - ----- --- - - ------- ----------------- ----- -- -- ------ ---
类和继承
ES6 引入了类（Class）和继承（Inheritance）的概念，让 JavaScript 更接近传统面向对象编程语言。
-- -------------------- ---- -------
-- -----
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-
-- -----
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
-----------------
-------------- -- -- ----- -----------------
-
-
-- -------
----- ----- - --- --------------- ----
----------------- -- -- ------- -- ---- -- -------
----- --- - --- -------------- --- ----
--------------- -- -- ------- -- ---- -- ---- - -- -- ----- ----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 中的新特性，它允许在函数调用和数组/对象字面量中使用 ... 语法，将多个参数或属性展开为单个参数或属性。
-- -------------------- ---- ------- -- -- ---- -------------- -------- --------------- - ------ ---------------------- -- -- ----- - -- --- - ------------------ -- ---- -- -- - -- -- ------ ------------ ----- ------- - --- -- --- ----------------------------- -- -- - -- -- ------ ------------- ----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ----- --------- - - -------- ------- -- ----------------------- -- -- - -- -- -- -- -- -- -- - -
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 中的新方法，用于操作数组。
-- -------------------- ---- ------- -- -- -------------------- ------- ----- ----------- - --- --- --- ------- ----- --------- - --------------------------- ----------------------- -- -- --- -- -- -- -- -- ----------------------- -------- ----- ------- - --- -- --- ----- ------- - ----------------- -- --- - - ---- --------------------- -- -- --- -- -- -- -- --
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。
-- -------------------- ---- ------- -- -- ----------- --- ------- ------ -------- - ------- ----- -------- - - ---------------------------------- -- ----------------- ---------------------------------- -- ----------------- ---------------------------------- -- ---------------- -- --------------------- ---------- -- ------------------ ------------ -- ----------------------
结语
本文介绍了从 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
