前言
Javascript 是一门广泛应用于 Web 开发的语言，而 ECMAScript 是 Javascript 的标准化规范。随着 Web 技术的不断发展，ECMAScript 的版本也在不断更新，ECMAScript 2021 是最新的版本。本文将深入介绍 ECMAScript 2021 的新特性，以及如何更好地应用这些特性来编写跨浏览器扩展。
ECMAScript 2021 的新特性
可选链操作符
可选链操作符 ?. 是 ECMAScript 2021 中最受欢迎的新特性之一。这个操作符可以使得我们在访问对象属性时更加方便，特别是当对象属性可能是 null 或 undefined 时。下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
-------- -
----- ---- ------
------ -----
--
--
--
----- ---- - ------------------------
------------------ -- ---- -----
----- --- - -----------------------
----------------- -- ---------在上面的代码中，我们使用 ?. 操作符来访问 data.user.address.city 属性，如果 data.user.address 为 null 或 undefined，那么 city 变量将会是 undefined。这个操作符可以帮助我们避免在访问对象属性时出现错误。
Promise.allSettled
在之前的 ECMAScript 版本中，我们可以使用 Promise.all 方法来并行执行多个 Promise，但是如果其中有一个 Promise 出现了错误，那么整个 Promise.all 操作就会失败。在 ECMAScript 2021 中，我们可以使用 Promise.allSettled 方法来解决这个问题。这个方法会返回一个数组，其中包含了所有 Promise 的执行结果，无论它们是成功还是失败。下面是一个示例代码：
-- -------------------- ---- ------- ----- -------- - - ----------------------- ------------------------ ----------------------- -- ------------------------------------------- -- - --------------------- --- -- ------- -- - -- - ------- ------------ ------ ----- -- -- - ------- ----------- ------- ------- -- -- - ------- ------------ ------ ----- - -- -
在上面的代码中，我们使用 Promise.allSettled 方法来并行执行三个 Promise，其中一个失败了，但是整个操作仍然成功完成，并且返回了所有 Promise 的执行结果。
数字分隔符
在 ECMAScript 2021 中，我们可以使用下划线 _ 来分隔数字，使得数字的阅读更加方便。下面是一个示例代码：
const number = 1_000_000; console.log(number); // 1000000
在上面的代码中，我们使用下划线来分隔数字，这样我们就可以更加清晰地看到这个数字是 100 万。
如何应用 ECMAScript 2021 特性来编写跨浏览器扩展
跨浏览器扩展是一种可以在多个浏览器中运行的 Javascript 应用程序。在编写跨浏览器扩展时，我们需要考虑到不同浏览器对 Javascript 的支持程度以及安全性等问题。下面是一些应用 ECMAScript 2021 特性的示例代码：
可选链操作符
const city = data?.user?.address?.city;
在跨浏览器扩展中，我们需要经常访问浏览器 API，但是不同浏览器对这些 API 的支持程度不同。我们可以使用可选链操作符来避免访问不存在的 API 时出现错误。
Promise.allSettled
const promises = [
browser.storage.local.get('foo'),
browser.storage.local.get('bar'),
];
Promise.allSettled(promises).then((results) => {
console.log(results);
});在跨浏览器扩展中，我们经常需要使用浏览器 API 来访问本地存储或者发送网络请求等操作。我们可以使用 Promise.allSettled 方法来并行执行多个 API 请求，无论它们是成功还是失败。
数字分隔符
const number = 1_000_000;
browser.browserAction.setBadgeText({ text: number.toLocaleString() });在跨浏览器扩展中，我们经常需要将数字显示在扩展程序的图标上。我们可以使用数字分隔符来方便地阅读这些数字。
结论
ECMAScript 2021 是 Javascript 的最新标准化规范，它引入了很多有用的新特性。在编写跨浏览器扩展时，我们可以使用这些特性来提高代码的可读性和可维护性。在了解 ECMAScript 2021 的新特性之后，我们可以更加自信地编写跨浏览器扩展，并且让我们的代码更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674581b4c1a23897ea9c28f1