前言
ECMAScript(简称ES)是JavaScript的标准化规范，自 ES6 开始，JS 做出了一系列重大改进，这些变化让该语言更加强大、灵活和易用。本文将介绍从 ES6 到 ES2020 中的主要变化，深入探讨新功能和语法，并提供示例代码，以帮助您更好地理解和应用它们。
ES6
块级作用域
在 ES6 之前，JavaScript 只支持函数作用域，也就是说，在函数中声明的变量仅在该函数中有效。如果需要将变量限制在某个代码块中，通常需要使用诸如 var 和 function 这样的关键字。
ES6 引入了 let 和 const 关键字，允许开发者声明块级作用域的变量和常量，从而避免了变量被意外篡改的问题。以下是一些示例代码：
-- -------------------- ---- -------
-- -- --- ---
-------- --------- -
--- - - --
-- ------ -
--- - - -- -- - -- ----------- - --
--------------- -- -- -
-
--------------- -- -- -
-
-- -- ----- ---
----- -- - ---------- -- ------箭头函数
箭头函数是一种更为简洁的函数定义方式，使用箭头（=>）符号表示函数定义。相较于传统的函数定义方式，箭头函数通常更短，并且更易于理解。以下是一些示例代码：
// 传统的函数定义
function add(a, b) {
return a + b;
}
// 箭头函数
const add = (a, b) => a + b;模板字符串
模板字符串是一种更强大的字符串定义方式，允许插入变量和表达式，以及多行字符串的定义。在模板字符串中，变量和表达式需要放在 ${} 内。以下是一些示例代码：
const name = 'Jack';
console.log(`Hello ${name}!`);解构赋值
解构赋值允许开发者从数组和对象中提取数据，然后将这些数据分配给多个变量。这种方式可以更便捷地使用函数返回的多个值，并且可以从对象中提取特定的属性。以下是一些示例代码：
-- -------------------- ---- -------
-- --------
----- --- -- - --- ---
-------------- --- -- -- - -
-- --------
----- ------ - -
----- -------
---- ---
-------- -
----- ---- ------
------ ----
-
--
----- - ----- ---- -------- - ----- ----- - - - -------
----------------- ---- ----- ------- -- -- ---- -- --- ---- --延展操作符
延展操作符允许开发者将一个数组或对象拆分为多个独立的值，并且可以在函数调用时传递多个参数。以下是一些示例代码：
-- -------------------- ---- ------- -- --------- ----- ------- - --- -- --- ------------------------ -- -- - - - -- ------------ -------- ------------- -- -- - ------ - - - - -- - ----- ------- - --- -- --- ------------------------------------ -- -- -
ES7
数组.includes()
数组.includes() 是一个用于检查数组是否包含某个特定元素的方法。在 ES6 之前，通常需要使用 indexOf() 来检查数组是否包含某个元素。includes() 的使用更加直观，如下所示：
const numbers = [1, 2, 3]; console.log(numbers.includes(2)); // 输出 true
指数运算符
指数运算符(**) 是一个新的运算符，用于计算一个数的幂。以下是一些示例代码：
console.log(2 ** 3); // 输出 8 console.log(10 ** -2); // 输出 0.01
ES8
对象.entries()
对象.entries() 方法将一个对象的属性和值作为一个数组返回。这可以帮助开发者更轻松地对对象进行迭代和操作。以下是一些示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
----- ---- ------
------ ----
-
--
--- ---- ----- ------ -- ----------------------- -
-------------------- -----------
-字符串填充
字符串填充(padEnd) 是一个新的字符串方法，用于在字符串结尾添加指定数量的字符。以下是一些示例代码：
const str = 'Hello'; console.log(str.padEnd(10, '.')); // 输出 'Hello.....'
ES9
异步迭代
异步迭代 是一个新的迭代模式，支持异步函数并返回 promise。这种模式下，使用 Symbol.asyncIterator 来定义一个异步迭代器，然后使用 for-await-of 语句来执行异步迭代。
以下是一些示例代码：
-- -------------------- ---- -------
-- ---------
----- ------------- - -
------------------------ -
------ -
-- --
----- ------ -
-- ------- - -- -
----- --- --------------- -- ------------------- -------
------ - ------ --------- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
-- -- ------------ ------
------ ---------- -
--- ----- ---- --- -- -------------- -
-----------------
-
-----ES10
数组.flat()
数组.flat() 是一个新的数组方法，用于将嵌套数组拍平为单个数组。以下是一些示例代码：
const arr1 = [[1, 2], [3, 4]]; console.log(arr1.flat()); // 输出 [1,2,3,4] const arr2 = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; console.log(arr2.flat(2)); // 输出 [1,2,3,4,5,6,7,8]
可选的catch绑定
在 ES6 中引入了 catch 关键字来捕获异常，但在 ES6-9 中，当使用 catch 时，必须将捕获到的异常声明为一个变量。如果只想简单地记录异常而不想在代码中引用该异常，这会很麻烦。
在 ES10 中，引入了可选的 catch 绑定，允许在不指定变量的情况下使用 catch 来记录异常。以下是一些示例代码：
try {
// do something that may throw an exception
} catch {
// log the exception
console.log('An error occurred');
}ES2020
可选的链式调用
ES2020 引入了可选的链式调用，允许开发者在调用对象属性或方法之前检查该属性或方法是否存在。如果不存在，该表达式将返回 undefined 而不是抛出异常。以下是一些示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
----- ---- ------
------ ----
-
--
----- ---- - --------------------- -- --------------
------------------ -- -- ---- -----Nullish 合并运算符
Nullish 合并运算符(??) 是一个新的逻辑运算符，用于将 null 或 undefined 值转换为默认值。这种运算符仅在左操作数的值为 null 或 undefined 时才返回右操作数，否则返回左操作数的值。以下是一些示例代码：
const message = ''; const greeting = message ?? 'Hello'; console.log(greeting); // 输出 ''
总结
在本文中，我们了解了从 ES6 到 ES2020 中的主要功能和语法。这些新功能和语法对 JavaScript 带来了全面的升级，使得该语言更加灵活、易用和强大。无论您是初学者还是有经验的开发者，通过深入理解这些功能和语法，您都将在编写更高效、更可读并且更易于维护的代码时获得更多的收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486603d48841e98944f3847