Javascript 简明教程

JavaScript - ECMAScript 2019

ECMAScript 2019 标准在 2019 年发布。此更新的重要新增功能包括 Array flat() 和 Array flatMap()，它们提供了简明扼要的数组操作方法。 Object.fromEntries() 方法简化了从键值对创建对象的过程。ECMAScript 2019 中的这些改进旨在增强代码简洁性和功能性。本章将讨论 ECMAScript 2019 中新增的所有功能。

New Features Added in ECMAScript 2019

下面是添加到 ECMAScript 2019 版本的 JavaScript 中的新方法、功能等。

Array.flat()
Array.flatMap()
Revised Array.Sort()
Object.fromEntries()
Optional catch binding
Revised JSON.stringify()
Revised Function.toString()
字符串文字中允许使用分隔符符号
String.trimEnd()
String.trimStart()

JavaScript Array flat() Method

ECMAScript 2019 在数组中引入了 Array.flat。JavaScript 数组 flat() 方法用于通过移除嵌套数组并将其元素添加到原始数组中来对数组进行扁平化。

Example

在下面的代码中，我们使用 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。array flatMap() 在通过新元素对数组元素进行映射后，扁平化数组。

Example

在下面的代码中，我们从 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

Revised Array sort()

在 ECMAScript 2019 中，JavaScript array.prototype.sort() 方法经过修订，使其稳定。

在 2019 年之前，sort() 方法对相等元素的排序行为不一致。它无法为相同的数组元素保留原始顺序。

现在，array.sort() 方法是稳定的，因为它使用了归并排序的变体。

Example

在下面的代码中，我们定义了包含多个对象的 watches 数组。数组的每个对象都包含品牌和价格属性。

我们使用 sort() 方法根据品牌属性的值对数组进行排序。在输出中，你可以看到它为相同的品牌名称保留了原始顺序。

<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 的数组，包含对象的关键值对。

Example

在下面的代码中，我们定义了包含水果名称和价格的二维数组。之后，我们使用 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}

Optional catch binding

在 ECMAScript 2019 之后，如果你不需要它，可以去掉 'catch' 块参数。

例如，在 ECMAScript 2019 之前，你必须为 catch 块加上参数。

try {
} catch(error){
}

在 ECMAScript 2019 之后，

try {
} catch {
}

Revised JSON.stringify()

在 ECMAScript 2019 之前，JavaScript JSON.stringify() 方法无法将 Unicode 字符转换成字符串，但在 ES10 之后，这是可能的，如下例所示。

Example

在下面的代码中，我们将 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: ➦

Revised Function toString()

在 ECMAScript 2019 之前，当你在函数中使用 toString() 方法时，它会返回函数的源代码，不带注释、语法等。

在 ES10 之后，它会返回带有空格、语法、注释等的函数。

Example

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; }

Separator symbols allowed in string literals

在 ECMAScript 2019 之后，可以使用分隔符 \u2028 和 \u2029 来分隔字符串中的行和段落。

Example

在以下代码中，我们使用 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 String trimEnd()

字符串 trim() 方法是在 ECMAScript 2019 中引入的。它用于移除字符串两端的空格。

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

Example

以下代码将移除字符串末尾的空格。

<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 String trimStart()

ECMAScript 2019 引入了 string trimStart() 方法。它会移除字符串开头的空格。

Example

以下代码将移除字符串开头的空格。

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