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!

打印页面