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 來避免錯誤。

列印頁面