JavaScript - ECMAScript 2019

ECMAScript 2019 標準於 2019 年釋出。此更新的重要補充包括 Array flat() 和 Array flatMap()，它們提供了簡潔的陣列操作方法。Object.fromEntries() 方法簡化了從鍵值對建立物件的過程。ECMAScript 2019 的這些改進旨在增強程式碼簡潔性和功能性。本章將討論 ECMAScript 2019 中所有新增的功能。

ECMAScript 2019 中新增的功能

以下是新增到 JavaScript ECMAScript 2019 版本中的新方法、功能等。

Array.flat()
Array.flatMap()
改進的 Array.Sort()
Object.fromEntries()
可選的 catch 繫結
改進的 JSON.stringify()
改進的 Function.toString()
字串字面量中允許分隔符
String.trimEnd()
String.trimStart()

JavaScript Array flat() 方法

ECMAScript 2019 將 Array.flat 引入陣列。JavaScript 陣列 flat() 方法用於透過移除巢狀陣列並將它的元素新增到原始陣列來展平陣列。

示例

在下面的程式碼中，我們使用 array.flat() 方法來展平 arr 陣列。

<html>
<body>
   <div id = "output">The flatten array is: </div>
   <script>
      const arr = [1, [10, 20], 30, [40, [50], 60], 70];
      document.getElementById("output").innerHTML +=  arr.flat();
   </script>
</body>
</html>

輸出

The flatten array is: 1,10,20,30,40,50,60,70

JavaScript Array flatMap()

ECMAScript 2019 還將 Array flatMap 引入陣列。陣列 flatMap() 在使用新元素對映陣列元素之後展平陣列。

示例

在下面的程式碼中，我們從 flatMap() 方法的回撥函式返回包含兩個元素的陣列。之後，flatMap() 方法將其展平。

在輸出中，您可以看到 'updated' 是單個數組。因此，它首先將當前元素對映到新元素或陣列，然後將其展平。

<html>
<body>
   <div id = "output">The updated array is: </div>
   <script>
      const arr = [2, 4, 6, 8];
      const updated = arr.flatMap((ele) => [ele * 2, ele * 3]);
      document.getElementById("output").innerHTML += updated;
   </script>
</body>
</html>

輸出

The updated array is: 4,6,8,12,12,18,16,24

改進的 Array sort()

在 ECMAScript 2019 中，JavaScript array.prototype.sort() 方法已進行改進以使其穩定。

2019 年之前，sort() 方法在排序相等元素時的行為並不一致。它無法為相同的陣列元素保留原始順序。

現在，array.sort() 方法是穩定的，因為它使用了合併排序的變體。

示例

在下面的程式碼中，我們定義了包含多個物件的 watches 陣列。陣列的每個物件都包含 brand 和 price 屬性。

我們使用 sort() 方法根據 brand 屬性的值對陣列進行排序。在輸出中，您可以看到它為相同的品牌名稱保留了原始順序。

<html>
<body>
   <div id = "output">The sorted array elements are: <br></div>
   <script>
      const watches = [{ brand: "Titan", price: 1000 },
        { brand: "Casio", price: 1000 },
        { brand: "Titan", price: 2000 },
        { brand: "Titan", price: 3000 }]
      watches.sort((a, b) => a.brand.localeCompare(b.brand))
      for (let obj of watches) {
         document.getElementById("output").innerHTML += JSON.stringify(obj) + "<br>";
      }
   </script>
</body>
</html>

輸出

The sorted array elements are:
{"brand":"Casio","price":1000}
{"brand":"Titan","price":1000}
{"brand":"Titan","price":2000}
{"brand":"Titan","price":3000}

JavaScript Object fromEntries

Object fromEnteries() 方法允許您從二維陣列建立一個新物件。陣列的每個元素都應該是一個長度為 2 的陣列，包含物件的鍵值對。

示例

在下面的程式碼中，我們定義了包含水果名稱和價格的二維陣列。之後，我們使用 Object.fromEntries() 方法從陣列建立物件。

<html>
<body>
   <div id = "output">The fruits object is : </div>
   <script>
      const entries = [["Apple", 20],
      ["Banana", 40],
      ["watermelon", 30]];
       
      const fruits = Object.fromEntries(entries);
       
      document.getElementById("output").innerHTML += JSON.stringify(fruits);
   </script>
</body>
</html>

輸出

The fruits object is : {"Apple":20,"Banana":40,"watermelon":30}

可選的 catch 繫結

在 ECMAScript 2019 之後，如果您不需要，可以刪除 'catch' 塊引數。

例如，在 ECMAScript 2019 之前，catch 塊必須帶引數。

try {
} catch(error){
}

ECMAScript 2019 之後，

try {
} catch {
}

改進的 JSON.stringify()

在 ECMAScript 2019 之前，JavaScript JSON.stringify() 方法無法將 Unicode 字元轉換為字串，但在 ES10 之後，這是可能的，如下面的示例所示。

示例

在下述程式碼中，我們將 Unicode 字元轉換為 JSON 字串，然後使用 JSON.parse() 方法解析該字串。

<html>
<body>
   <div id = "output1">The unicode string value is:  </div>
   <div id = "output2">The unicode JSON value is:  </div>
   <script>
      let str = JSON.stringify("\u27A6");
      document.getElementById("output1").innerHTML += str;
      document.getElementById("output2").innerHTML += JSON.parse(str);
   </script>
</body>
</html>

輸出

The unicode string value is: "➦"
The unicode JSON value is: ➦

修改後的 toString() 函式

在 ECMAScript 2019 之前，當您對函式使用 toString() 方法時，它會返回函式的原始碼，但不包含註釋、語法等。

ES10 之後，它返回包含空格、語法、註釋等的函式。

示例

以下程式碼中的 toString() 方法在轉換為字串後返回函式。生成的字串包含空格、註釋等。

<html>
<body>
   <div id = "output">After converting the function to string is: </div>
   <script>
      function test() {
         return 10 * 20;
      }
      document.getElementById("output").innerHTML += test.toString();
   </script>
</body>
</html>

輸出

After converting the function to string is: function test() { return 10 * 20; }

字串字面量中允許分隔符

ECMAScript 2019 之後，您可以使用分隔符符號 \u2028 和 \u2029 來分隔字串中的行和段落。

示例

在下面的程式碼中，我們使用 Unicode 字元來分隔行。但是，您將無法直接看到分隔線，因為我們使用 innerHTML 屬性來更新 HTML。

<html>
<body>
   <div id = "output">The string with seprator symbol is:  </div>
   <script>
      let str = "Hi\u2028";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>

JavaScript 字串 trimEnd()

字串 trim() 方法在 ECMAScript 2019 中引入。它用於移除字串兩端的空格。

字串.trimEnd() 方法移除字串末尾的空格。

示例

下面的程式碼移除字串末尾的空格。

<html>
<body>
   <div id = "output">After removing white spaces from the end of the string: </div>
   <script>
      let str = "   Hello World! ";
      document.getElementById("output").innerHTML += str.trimEnd();
   </script>
</body>
</html>

輸出

After removing white spaces from the end of the string: Hello World!

JavaScript 字串 trimStart()

ECMAScript 2019 引入了字串 trimStart() 方法。它移除字串開頭的空格。

示例

下面的程式碼移除字串開頭的空格。

<html>
<body>
   <div id = "output">After removing white spaces from the start of the string: <br></div>
   <script>
      let str = "   Hello World! ";
      document.getElementById("output").innerHTML += str.trimStart();
   </script>
</body>
</html>

輸出

After removing white spaces from the start of the string:
Hello World!

列印頁面