JavaScript - ECMAScript 2022 的新增功能特性

ECMAScript 2022 标准于 2022 年发布。此次更新新增的重要特性包括 私有方法和字段、Array at() 和 String at() 方法等。本章将讨论 ECMAScript 2022 中所有新增的特性。

ECMAScript 2022 新增的特性

以下是 JavaScript ECMAScript 2022 版本新增的方法、特性等。

• Array at() 方法
• String at() 方法
• 私有方法和字段
• Object.hasOwn()
• error.cause
• await import

我们在此处解释了每个特性详细信息。

数组 at() 方法

ECMAScript 2022 (ES2022) 为数组引入了数组 at() 方法。在 JavaScript 中，数组 at() 方法用于从特定索引访问数组元素。在 arr[index] 表示中，您不能使用负索引，但使用 array.at() 方法，您也可以使用负索引访问数组元素。

使用负索引时，它会从数组的末尾返回数组。

示例

在下面的代码中，我们使用负索引和 array.at() 方法访问数组中的最后一个和倒数第三个元素。

<body>
   <div id = "demo1">最后一个数组元素是:  </div>
   <div id = "demo2">倒数第三个数组元素是:  </div>
   <script>
      const arr = [10, 20, 60, 72, 6, 12, 23];
      document.getElementById("demo1").innerHTML += arr.at(-1);
      document.getElementById("demo2").innerHTML += arr.at(-3);
   </script>
</body>
</html>

输出

最后一个数组元素是: 23
倒数第三个数组元素是: 6

String at() 方法

ECMAScript 为字符串引入了 String at() 方法。在 JavaScript 中，String at() 方法用于访问特定字符串索引处的字符。它也接受负索引作为参数。

示例

在下面的代码中，我们使用负索引和 string.at() 方法访问字符串的最后一个字符和倒数第四个字符。

<html>
<body>
   <div id = "demo1">最后一个字符串字符是:  </div>
   <div id = "demo2">倒数第四个字符串字符是:  </div>
   <script>
      let str = "Hello world";
      document.getElementById("demo1").innerHTML += str.at(-1);
      document.getElementById("demo2").innerHTML += str.at(-4);
   </script>
</body>
</html>

输出

最后一个字符串字符是: d
倒数第四个字符串字符是: o

私有方法和字段

ECMAScript 2022 引入了编写私有方法和字段的方式。在 JavaScript 中，您可以将字段名称或方法名称后跟井号 ('#') 来将其设置为私有。您无法使用类实例访问私有字段和方法。但是，您可以在类内部访问它们。

示例

在下面的代码中，car 类包含"brand"私有字段和"carBrand"私有方法。getBrand() 方法是公有的。

我们创建了 car 类的实例，并使用它调用了 getBrand() 方法。getBrand() 方法调用了 carBrand() 方法。

<html>
<body>
   <div id = "output"> </div>
   <script>
      class car {
         #brand;
         constructor(brand) {
            this.#brand = brand;
         }
         getBrand() {
            return this.#carBrand();
         }
         #carBrand() {
            return "The car brand is " + this.#brand;
         }
      }
      const BMW = new car("BMW");
      document.getElementById("output").innerHTML = BMW.getBrand();
   </script>
</body>
</html>

输出

The car brand is BMW

Object hasOwn() 方法

Object.hasOwn() 方法替代了 Object.hasOwnProperty() 方法。它用于检查对象是否包含特定属性。

示例

在下面的代码中，我们使用 hasOwn() 方法检查 obj 对象是否包含 name 属性。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const obj = {
         name: "sam",
         age: 50,
      }
      document.getElementById("output").innerHTML = 
	  "Does obj contain name property? " + obj.hasOwnProperty("name");
   </script>
</body>
</html>

输出

Does obj contain name property? true

error.cause 属性

"cause"是 JavaScript 对象的一个​​属性。它表示错误的原因。该属性在 ECMAScript 2022 中引入。

示例

在下面的代码中，我们从"try"块中抛出一个新的错误。此外，我们使用 cause 属性指定错误的原因。

我们在 catch 块中访问"cause"属性值来获取错误原因。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById("demo");
      try {
         output.innerHTML += "Inside the try block <br>";
         throw new Error("New error", { cause: "Testing with error." })
      } catch (error) {
         output.innerHTML += "The reason for the error is: " + error.cause + "<br>";
      }
   </script>
</body>
</html>

输出

Inside the try block
The reason for the error is: Testing with error.

Await 导入

您可以使用异步导入来导入动态模块。异步导入需要使用 'await' 关键字。

例如，下面的代码包含一个自调用异步函数。此外，函数内部还使用了 'await' 关键字来等待导入。

(async function () {
    await (await import('./math.js')).default();
    await (await import('./operations.js')).default();
})();

警告:某些浏览器不支持上述某些功能。因此，您可以使用 polyfill 来避免错误。