ECMAScript 2021 是一个具有许多新特性的 JavaScript 语言版本，这些新特性能够让开发者更加轻松、高效地编写代码并构建更加强大和高性能的应用程序。在本文中，我们将利用 ECMAScript 2021 的一些新特性来构建一个扩展的播放器，并通过代码示例来展示如何使用这些新特性来构建优秀的应用程序。
了解 ECMAScript 2021 的新特性
在开始构建播放器之前，我们需要了解 ECMAScript 2021 新特性的一些基本概念和用法。下面是一些值得关注的新特性：
nullish 合并运算符
在过去的 JavaScript 版本中，我们经常使用连续的三元运算符检查 undefined 或 null 值的存在。而 ECMAScript 2021 中加入了一个新的操作符 ??，即 nullish 合并运算符。该运算符用于在变量为 null 或 undefined 时为其提供默认值。
// 传统写法 const someValue = (possiblyUndefined || defaultValue); // 新写法 const someValue = possiblyUndefined ?? defaultValue;
逻辑赋值操作符
逻辑赋值操作符是 ECMAScript 2021 中的新增特性，它简化了变量重新赋值的操作。例如：
let x = 0; x ||= 5; console.log(x); // 输出 5
Promise.allSettled
Promise.allSettled 是 Promise.all、Promise.race 方法的强化版。它返回一个 Promise 对象，当传入的所有 Promise 都已经执行完毕时，才会解析 Promise 对象。此方法提供了更好的错误处理，因为即使一个 Promise 出现错误，Promise.allSettled 也会作为包含所有 Promise 的数组返回。
-- -------------------- ---- ------- ----- -------- - - ------------------- ------------------- ----------------- -- ----- ------- - ----- ----------------------------- --------------------- -- ------------ ------------ ------ ----------- ------------ ------ ----------- ----------- ------- ---
??= 运算符
类似于逻辑赋值操作符中的 ||=，??= 运算符在变量为 null 或 undefined 时提供默认值，不同之处在于它在变量为 undefined 时才会使用默认值。
let x; x ??= 5; // 在 x 为 undefined 时，给 x 赋值 5 console.log(x); // 输出 5
构建一个扩展的播放器应用程序
现在，我们已经了解了一些 ECMAScript 2021 的新特性。让我们一起开始构建一个扩展的播放器应用程序吧！
首先，让我们创建一个 HTML 页面来放置播放器的 UI，例如：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------
-------
------
------ ----------- ----------- ------------ -------- ------
------- --------------- ---------------- --
------- --------------- ---------------- --
--------
-------
-------该页面包含一个用于播放视频的 video 元素，在该元素中，我们使用了 autoplay 和 muted 属性，分别用于自动播放和无声播放视频。
接下来，让我们使用 ECMAScript 2021 的新特性来构建播放器的 JavaScript 代码：
-- -------------------- ---- -------
-- -- --- --
----- ------ - ----------------------------------
-- ----------------
-- ---------------------------------- -
-- -------
----- ------ - ---------------------------------
------------------ - ------
----------------------------------
-- -----------
-------------------------------- ----- -- -- -
--- -
----- ---------------------------------
- ----- ----- -
-------------------
-
---
-在上述代码中，我们使用 “画中画” 特性，通过调用 video 元素的 requestPictureInPicture 方法，在现有网页上创建一个可拖动、可调整大小的独立窗口来播放视频。
如果浏览器不支持此功能，则不会显示 “画中画” 按钮，并在控制台输出错误信息。
结论
本文演示了如何使用 ECMAScript 2021 的一些新特性来构建一个扩展的播放器应用程序。掌握这些新特性可以帮助我们更有效地编写代码、提高应用程序的性能和可移植性。我们建议读者不断探索和学习 ECMA 模块的新特性，并尽可能地应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772767a6d66e0f9aad977ab