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

在这里，我们详细解释了每个功能。

Array at() 方法

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

当您使用负索引时，它会从最后返回数组。

示例

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

<body>
   <div id = "demo1">The last array element is:  </div>
   <div id = "demo2">The third last array element is:  </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>

输出

The last array element is: 23
The third last array element is: 6

String at() 方法

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

示例

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

<html>
<body>
   <div id = "demo1">The last string character is:  </div>
   <div id = "demo2">The fourth last string character is:  </div>
   <script>
      let str = "Hello world";
      document.getElementById("demo1").innerHTML += str.at(-1);
      document.getElementById("demo2").innerHTML += str.at(-4);
   </script>
</body>
</html>

输出

The last string character is: d
The fourth last string character is: o

私有方法和字段

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

示例

在下面的代码中，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”关键字来等待导入。

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

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

打印页面