JavaScript - ECMAScript 2019 的新增功能特性

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

ECMAScript 2019 中的新增功能

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

• Array.flat()
• Array.flatMap()
• 修订的 Array.Sort()
• Object.fromEntries()
• 可选的 catch 绑定
• 修订的 JSON.stringify()
• 修订的 Function.toString()
• 字符串字面量中允许使用分隔符
• String.trimEnd()
• String.trimStart()

JavaScript 数组 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

修订后的数组 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 fromEntries() 方法允许您从二维数组创建一个新对象。该数组的每个元素都应该是一个长度为 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">将该函数转换为字符串后为: </div>
   <script>
      function test() {
         return 10 * 20;
      }
      document.getElementById("output").innerHTML += test.toString();
   </script>
</body>
</html>

输出

将该函数转换为字符串后为: 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 中引入的。它用于删除字符串两端的空格。

string.trimEnd() 方法从字符串末尾删除空格。

示例

以下代码从字符串末尾删除空格。

<html>
<body>
   <div id = "output">从字符串末尾删除空格后: </div>
   <script>
      let str = "   Hello World! ";
      document.getElementById("output").innerHTML += str.trimEnd();
   </script>
</body>
</html>

输出

从字符串末尾删除空格后: Hello World!

JavaScript 字符串 trimStart()

ECMAScript 2019 引入了字符串 trimStart() 方法。该方法用于从字符串开头删除空格。

示例

以下代码用于从字符串开头删除空格。

<html>
<body>
   <div id = "output">从字符串开头删除空格后: <br></div>
   <script>
      let str = "   Hello World! ";
      document.getElementById("output").innerHTML += str.trimStart();
   </script>
</body>
</html>

输出

从字符串开头删除空格后:
Hello World!