ES11（ECMAScript 2020）中的常用新特性和语法-JavaScript中文网-JavaScript教程资源分享门户

随着时间的推移，JavaScript语言不断发展和变化，让前端开发人员需要不断学习掌握新的语言特性和语法。2020年，ES11（ECMAScript 2020）发布了一些新特性和语法，让JavaScript语言更加强大和易于使用。本文将介绍ES11中的常用新特性和语法，详细解释每个功能的作用以及示例代码，帮助开发人员掌握这些新特性和语法，提高开发效率和代码质量。

空值合并运算符（Nullish Coalescing Operator）

在JavaScript中，使用||运算符进行默认值的设置，但当默认值为假值时（例如0、NaN、""等），会使用默认值而不是实际值。为了解决这个问题，ES11为JavaScript语言引入了空值合并（Nullish Coalescing）操作符 ??，只有当原始值为 null 或 undefined 时， ??运算符才会返回默认值。

const a = null ?? "default"; // 'default'
const b = '' ?? "default"; // ''
const c = undefined ?? "default"; // 'default'

可选链操作符（Optional Chaining）

在使用对象或数组中的嵌套值时，我们经常需要检查属性或键是否存在，以避免抛出错误，但这样的检查很容易变得复杂和冗长。ES11为JavaScript引入了可选链（Optional Chaining）操作符 ?.，使得代码更加简洁和易于阅读。

例如，在访问深层次嵌套的对象属性时：

-- -------------------- ---- -------
----- ------ - -
  ----- --------
  -------- -
    ----- -
      ----- ---- -----
    -
  -
--

----- -------- - ------ -- -------------- -- ------------------- -- -------------------------

可以使用可选链操作符改写为：

const cityName = person?.country?.city?.name;

动态 `import`

import()已经存在一段时间了，可以动态地加载JavaScript模块（返回一个 Promise）。在ES11中，可以使用该语法的一个新变体，用于动态导入模块的命名空间，并将其作为参数传递给函数。

const { default: module } = await import('./module.js');

数组扁平化（Array Flat）

扁平化数组是将多层嵌套的数组转换为单层的数组。ES11引入了 flat()方法，该方法将多维数组扁平化为单层数组。

const arr1 = [1, 2, [3, 4]];
const arr2 = arr1.flat();
// arr2: [1, 2, 3, 4]

ES11还为flat()方法添加了一个可选参数 depth，用于指定扁平化的深度，默认值为1。

const arr1 = [1, 2, [3, [4, 5]]];
const arr2 = arr1.flat(2);
// arr2: [1, 2, 3, 4, 5]

字符串运算符 `trimStart()` 和 `trimEnd()`

在ES11中，终于为字符串添加了 trimStart() 和 trimEnd() 这两个方法，用于从字符串的开头或结尾删除空格或其他指定字符。

const str1 = "  Hello World  ";
const str2 = str1.trimStart(); // "Hello World  "
const str3 = str1.trimEnd();   // "  Hello World"

双重大于号（Double-Question-Marks）

双重大于号运算符 >>用于颠倒位。在ES11中，引入了 >>> 运算符，它可以无符号地右移二进制表示，不会保留符号位，而是一直用0填充左侧。

const a = 4 >>> 0; // 4
const b = -4 >>> 0; // 4294967292

结论

在ES11中，提供了很多有用的新特性和语法，并且这些功能使得JavaScript语言变得更加灵活和强大。开发者应该积极地研究、使用和探索这些新特性和语法，以提高其开发效率和代码质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6721e6562e7021665e09449c

ES11（ECMAScript 2020）中的常用新特性和语法