Javascript 简明教程

JavaScript - ECMAScript 2022

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

The ECMAScript 2022 standard was released in 2022. Important features added to this update include private methods and fields, Array at() and String at() methods etc. This chapter discuss all the newly added features in ECMAScript 2022.

New Features Added in ECMAScript 2022

以下是 ECMAScript 2022 版 JavaScript 中添加的新方法、特性等。

Here are the new methods, features, etc., added to the ECMAScript 2022 version of JavaScript.

  1. Array at() Method

  2. String at() Method

  3. Private methods and fields

  4. Object.hasOwn()

  5. error.cause

  6. await import

这里，我们详细解释了每项特性。

Here, we have explained each feature in detail.

Array at() Method

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

ECMAScript 2022 (ES2022) introduced Array at() method to arrays. In JavaScript, array at() method used to access the array element from the particular index. You can’t use the negative index in the arr[index] representation, but with the array.at() method, you can also use the negative index to access array elements.

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

When you use the negative index, it returns the array from the last.

Example

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

In the below code, we access the last and third-last elements from the array using the negative indexes and array.at() method.

<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() Method

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

ECMAScript introduced String at() method to strings. In JavaScript, the String at() method is used to access the characters from the particular string index. It also accepts the negative index as an argument.

Example

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

In the code below, we access the last and fourth last characters from the string using the negative indexes and string.at() method.

<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

Private Methods and Fields

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

ECMAScript 2022 introduced the way to write private methods and fields. In JavaScritp, you can write the field name or method name followed by the hash sign ('#') to make them private. You can’t access the private fields and methods using the class instance. However, you can access them inside the class.

Example

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

In the below code, the car class contains the 'brand' private field and the 'carBrand' private method. The getBrand() method is public.

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

We have created the instance of the car class and invoked the getBrand() method using it. The getBrand() method calls the carBrand() method.

<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() Method

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

The Object.hasOwn() method is a replacement for the Object.hasOwnProperty() method. It is used to check whether the object contains a particular property.

Example

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

In the code below, we use the hasOwn() method to check whether the obj object contains the name property.

<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

The error.cause Property

'cause' 是 JavaScript 对象的属性。它表示错误的原因。它在 ECMAScript 2022 中引入。

The 'cause' is a property of the JavaScript object. It represents the reason for the error. It is introduced in ECMAScript 2022.

Example

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

In the below code, we throw a new error from the 'try' block. Also, we specify the reason for the error using the cause property.

我们访问 catch 块中的 'cause' 属性值以了解原因。

We access the 'cause' property value in the catch block to know the reason.

<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.

The Await Import

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

You can use the asynchronous import to import the dynamic modules. You need to use the 'await' keyword for the asynchronous import.

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

For example, the below code contains the self-invoking asynchronous function. Also, the 'await' keyword is used inside the function to await the import.

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

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

Warning – Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.