JavaScript - ECMAScript 2017

JavaScript 的 ECMAScript 2017 版本於 2017 年釋出。ECMAScript 2017 為該語言引入了一些新特性。其中最顯著的特性是 async/await 語法，它允許我們以更同步的風格編寫非同步操作。它提供了共享記憶體和原子操作，增強了對併發程式設計的支援。

在本章中，我們將討論 ECMAScript 2017 中新增的所有新特性。

ECMAScript 2017 中新增的新特性

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

padStart() 和 padEnd() 方法
Object.entries() 方法
Object.values() 方法
JavaScript async 和 await
Object getOwnPropertyDescriptors() 方法
JavaScript 共享記憶體

這裡，我們詳細解釋了每個特性。

字串填充：padStart() 和 padEnd() 方法

ECMAScript 2017 引入了兩種字串方法，padStart() 和 padEnd() 方法，允許您透過新增特定字元來在字串的開頭和結尾新增填充。這些方法用於擴充套件字串並達到所需的長度。

示例

在下面的程式碼中，我們將所需的字串長度作為 padStart() 和 padEnd() 方法的第一個引數，並將字元作為第二個引數傳遞。

但是，您也可以將字串作為第二個引數傳遞。

<html>
<body>
   <div id = "output1">After padding at the start: </div>
   <div id = "output2">After padding at the end: </div>
   <script>
      let base = "TurorialsPoint";
      let start_updated = base.padStart(18, "@"); // Padding at the start
      let end_updated = base.padEnd(18, "*");   // Padding at the end
      document.getElementById("output1").innerHTML += start_updated;
      document.getElementById("output2").innerHTML += end_updated;
   </script>
</body>
</html>

輸出

After padding at the start: @@@@TurorialsPoint
After padding at the end: TurorialsPoint****

Object.entries() 方法

ECMAScript 2017 為物件添加了 Object.entries() 方法。Object.entries() 方法返回一個迭代器，用於遍歷物件的鍵值對。

示例

在下面的程式碼中，employee 物件包含三個屬性。我們使用 Object entries() 方法來獲取物件的迭代器。

之後，我們使用 for...of 迴圈使用迭代器遍歷物件屬性。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const employee = {
         Company: "TutorialsPoint",
         Ex_company: "TCS",
         Experience: 4,
      }
      const emp_iterator = Object.entries(employee);
      for (let pair of emp_iterator) {
         output.innerHTML += pair + "<br>";
      }
   </script>
</body>
</html>

輸出

Company,TutorialsPoint
Ex_company,TCS
Experience,4

Object.values() 方法

ECMAScript 2017 為物件引入了 Object.values() 方法。JavaScript Object.values() 方法用於獲取物件屬性值的陣列。

示例

在下面的程式碼中，我們使用 Object.values() 方法獲取陣列中所有物件的 value。

<html>
<body>
   <div id = "output">Object values are: </div>
   <script>
      const wall = {
         color: "blue",
         size: "15x12",
         paintBrand: "Asiant paints"
      }
      document.getElementById("output").innerHTML += 
	  " " + Object.values(wall);
    </script>
</body>
</html>

輸出

Object values are: blue,15x12,Asiant paints

JavaScript async 和 await

async 和 await 關鍵字在 ECMAScript 2017 中新增到語言中。async/await 關鍵字用於建立非同步函式。async 關鍵字用於建立非同步函式，await 關鍵字用於處理操作。

示例

在下面的程式碼中，printMessage() 函式是非同步的。我們在函式內部定義了一個新的 promise 並將其儲存在 getData 變數中。

承諾需要 0.5 秒才能解析。`await` 關鍵字處理承諾，並在承諾解析之前阻塞函式程式碼執行。

<html>
<body>
   <div id = "output"> </div>
   <script>
      async function printMessage() {
         let getData = new Promise(function (res, rej) {
            setTimeout(() => { res("Promise resolved !!"); }, 500);
         });
         document.getElementById("output").innerHTML = await getData;
      }

      printMessage();
   </script>
</body>
</html>

輸出

Promise resolved !!

Object.getOwnPropertyDescriptors() 方法

Object.getOwnPropertyDescriptor() 方法返回每個屬性的屬性描述符，例如 writable、enumerable、configurable、value 等。它是物件屬性的元資料。

示例

在下面的程式碼中，我們使用 getOwnPrpopertyDescriptors() 方法獲取物件每個屬性的屬性描述符。（注意：原文此處拼寫錯誤，應為 getOwnPropertyDescriptors）

<html>
<body>
   <div id = "output">The Property descriptors of the wall object is: <br></div>
   <script>
      const wall = {
         color: "blue",
         thickness: 10,
      }
      document.getElementById("output").innerHTML += 
	  JSON.stringify(Object.getOwnPropertyDescriptors(wall));
   </script>
</body>
</html>

輸出

The Property descriptors of the wall object is:
{"color":{"value":"blue","writable":true,"enumerable":true,"configurable":true},"thickness":{"value":10,"writable":true,"enumerable":true,"configurable":true}}

JavaScript 共享記憶體和原子操作

在 JavaScript 中，共享記憶體允許多個執行緒共享記憶體，從而實現多個執行緒之間的高效通訊。

JavaScript 是一種單執行緒程式語言。但是，您可以使用 Web Workers 在不同的執行緒中執行 JavaScript 程式碼。

2018 年，引入了 SharedArrayBuffer 來共享記憶體並透過共享資料執行原子操作。

列印頁面