从 ECMAScript 6 到 ECMAScript 2020: JS 语法的全面升级-FunTeaLearn Online Web Tutorials

前言

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 带来了全面的升级，使得该语言更加灵活、易用和强大。无论您是初学者还是有经验的开发者，通过深入理解这些功能和语法，您都将在编写更高效、更可读并且更易于维护的代码时获得更多的收益。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6486603d48841e98944f3847

从 ECMAScript 6 到 ECMAScript 2020: JS 语法的全面升级

前言

ES6