前言
ECMAScript 是 JavaScript 的标准。每年都会发布一个新版本，其中包含新的特性和语法糖，以便开发者们更加轻松地使用 JavaScript。
在 ECMAScript 2020（ES11）中，又有一些新的特性被引入。在本文中，我们将会探讨这些新特性，包括:
- 可选链操作符（Optional chaining）
- 空值合并操作符（Nullish coalescing）
- 将 BigInt 用作基本数据类型
- 动态导入(import())
- Promise.allSettled()
- globalThis 对象
可选链操作符（Optional chaining）
在旧版的 JavaScript 中，当我们需要访问对象的某个属性时，通常需要先判断该对象是否存在，才能安全地访问属性。例如：
-- -------------------- ---- -------
--- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- -----
-
--
-- ------- -- -------------- -- -------------------- -
---------------------------------
-这样的代码非常繁琐，可读性也不好。在 ECMAScript 2020 中引入了可选链操作符，可以更方便地处理这种情况：
let city = person?.address?.city; // 如果 person.address 或 person.address.city 不存在，则返回 undefined
可选链操作符 ?. 可以自动判断前面的属性或方法是否存在。如果存在则返回属性值，否则返回 undefined。
空值合并操作符（Nullish coalescing）
在 JavaScript 中，有两种“假值”—— null 和 undefined。而使用逻辑或运算符 || 的方式无法区分它们，例如：
let foo = null || 'Hello World'; console.log(foo); // 输出: "Hello World"
在这个例子中，因为 null 是一个“假值”，所以 foo 被赋值为 'Hello World'。但实际上 null 是一个有效的值，也需要被保留。
在 ECMAScript 2020 中引入了空值合并操作符 ??，可以更好地处理这种情况：
let bar = null ?? 'Hello World'; console.log(bar); // 输出: null
这里的 ?? 表示 “如果左侧的值为 null 或 undefined，则返回右侧的值”。这样就可以很清楚地区分两个假值了。
将 BigInt 用作基本数据类型
在 JavaScript 中，数字类型的最大值是 Number.MAX_SAFE_INTEGER，是一个 53 位的整数。如果超过了这个范围，就会出现精度问题。例如：
console.log(Number.MAX_SAFE_INTEGER + 1); // 输出: 9007199254740992 console.log(Number.MAX_SAFE_INTEGER + 2); // 输出: 9007199254740992
在 ECMAScript 2020 中引入了 BigInt 类型，可以处理超过 Number.MAX_SAFE_INTEGER 的数值计算：
let big = 9007199254740992n; // 最后面加上 n，表示该数字为 BigInt 类型 console.log(big + 1n); // 输出: 9007199254740993n console.log(big + 2n); // 输出: 9007199254740994n
这里要注意，由于 BigInt 只是在 ES11 中被引入，有些浏览器可能还不支持，所以在使用时要注意浏览器兼容性。
动态导入(import())
在旧版的 JavaScript 中，使用 import 导入模块时，只能在模块顶部使用，不能在函数内部或代码块中使用。例如：
-- -------------------- ---- ------- -- --- ------ - ------- - ---- ----------- -- ----------- - ------ - -------- - ---- ----------- -- ----- - -------- ----- - ------ - -------- - ---- ----------- -- ----- -
在 ECMAScript 2020 中，可以使用动态导入语法 import()，在任何部分异步地导入模块：
-- -------------------- ---- -------
-- ----
-- ----------- -
------------------------------ -- -
--- -------- - ----------------
-- -- --------
---
-
----- -------- ----- -
--- ------ - ----- -------------------
--- -------- - ----------------
-- -- --------
-使用 import() 返回一个 Promise，可以使用 then 或 async/await 的方式处理导入的模块。
Promise.allSettled()
在旧版的 JavaScript 中，Promise.all 方法返回一个 Promise，只有所有的 Promise 都被解析后，它才会被解析。但如果其中有一个 Promise 被拒绝了，就会导致整个 Promise.all 失败。
在 ECMAScript 2020 中，引入了 Promise.allSettled 方法，可以对所有的 Promise 进行处理，而不会因为其中一个 Promise 失败而终止整个 Promise：
-- -------------------- ---- ------- --- -------- - - ----------------------- ------------------------ ---------------------- -- ---------------------------- ------------- -- ---------------------- -- -------------------------- --------------- ------------ -- --------------------
Promise.allSettled 方法返回一个 Promise，其中包含每个 Promise 的状态（fulfilled 或 rejected）和值（值或错误信息）。
globalThis 对象
在 JavaScript 中，全局作用域可以通过 window 对象获取。但在其他宿主环境中（例如 Web Worker 或 Node.js），不存在 window 对象，这时我们就需要使用其他方式来获取全局作用域。
在 ECMAScript 2020 中，引入了 globalThis 对象。无论在哪个宿主环境中，我们都可以通过 globalThis 来获取全局作用域：
console.log(globalThis.setTimeout === setTimeout); // 输出: true
globalThis 对象是一个全局的、常量对象，可以被所有的 JavaScript 代码访问。
总结
在 ECMAScript 2020 中，引入了可选链操作符、空值合并操作符、BigInt 类型、动态导入语法、Promise.allSettled 方法和 globalThis 对象等新特性。这些特性不仅可以使开发者们更加便利地使用 JavaScript，还可以提高代码的可读性和健壮性。建议开发者们学习和使用这些新特性，提升自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6656186bd3423812e4abc7df