Javascript 简明教程

JavaScript - ECMAScript 2019

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

The ECMAScript 2019 standard was released in 2019. Important additions to this update include Array flat() and Array flatMap(), offering concise array manipulation methods. The Object.fromEntries() method simplifies object creation from key-value pairs. These improvements in ECMAScript 2019 aimed to enhance code conciseness and functionality. This chapter will discuss all the newly added features in ECMAScript 2019.

New Features Added in ECMAScript 2019

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

Here are the new methods, features, etc., added to the ECMAScript 2019 version of JavaScript.

  1. Array.flat()

  2. Array.flatMap()

  3. Revised Array.Sort()

  4. Object.fromEntries()

  5. Optional catch binding

  6. Revised JSON.stringify()

  7. Revised Function.toString()

  8. Separator symbols allowed in string literals

  9. String.trimEnd()

  10. String.trimStart()

JavaScript Array flat() Method

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

The ECMAScript 2019 introduced Array.flat to the arrays. The JavaScript array flat() method is used to flatten the array by removing the nested array and adding its elements to the original array.

Example

在下面的代码中，我们使用 array.flat() 方法来扁平化 arr 数组。

In the code below, we used the array.flat() method to flatten the arr array.

<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() 在通过新元素对数组元素进行映射后，扁平化数组。

The ECMAScript 2019 also introduced Array flatMap to arrays. The array flatMap() flatten the array after mapping the array elements with new elements.

Example

在下面的代码中，我们从 flatMap() 方法的回调函数中返回一个包含两个元素的数组。之后，flatMap() 方法将其扁平化。

In the below code, we return the array of two elements from the callback function of the flatMap() method. After that, the flatMap() method flattens it.

在输出中，你可以看到 'updated' 是一个单独的数组。因此，它首先将当前元素映射到一个新元素或数组，并对其进行扁平化。

In the output, you can see that 'updated' is a single array. So, it first maps the current element to a new element or array and flattens it.

<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() 方法经过修订，使其稳定。

In ECMAScript 2019, JavaScript array.prototype.sort() method has been revised to make it stable.

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

Before 2019, the behavior of the sort() method was not consistent in sorting the equal elements. It could not preserve the original order for the same array elements.

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

Now, array.sort() method is stable as it uses the variation of the merge sort.

Example

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

In the below code, we have defined the watches array containing multiple objects. Each object of the array contains the brand and price property.

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

We used the sort() method to sort the array based on the value of the brand property. In the output, you can see that it preserves the original order for the same brand name.

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

The Object fromEnteries() method allows you to create a new object from the 2-dimensional array. Each element of the array should be an array of length 2, containing the key-value pair for the object.

Example

在下面的代码中，我们定义了包含水果名称和价格的二维数组。之后，我们使用 Object.fromEntries() 方法从数组中创建一个对象。

In the below code, we have defined the 2D array containing the fruit name and price. After that, we used the Object.fromEntries() method to create an object from the array.

<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' 块参数。

After ECMAScript 2019, you can remove the 'catch' block parameter if you don’t need it.

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

For example, before ECMAScript 2019, you must need the parameters with the catch block.

try {
} catch(error){
}

在 ECMAScript 2019 之后，

After ECMAScript 2019,

try {
} catch {
}

Revised JSON.stringify()

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

Before ECMAScript 2019, JavaScript JSON.stringify() method was not able to convert the Unicode characters into a string, but after ES10, it is possible, as shown in the example below.

Example

在下面的代码中，我们将 Unicode 字符转换成 JSON 字符串，然后使用 JSON.parse() 方法解析字符串。

In the code below, we convert the Unicode character into the JSON string and then use the JSON.parse() method to parse the string.

<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() 方法时，它会返回函数的源代码，不带注释、语法等。

Before ECMAScript 2019, when you used the toString() method with the function, it returned the function’s source code without comment, syntax, etc.

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

After ES10, it returns the function with spaces, syntax, comments, etc.

Example

toString() 方法会返回字符串形式的函数，用于在以下代码中进行转换。结果字符串包含空格、注释等。

The toString() method returns the function after converting into the string in the below code. The resultant string contains the spaces, comments, etc.

<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 来分隔字符串中的行和段落。

After ECMAScript 2019, you can use the separator symbols \u2028 and \u2029)to separate the line and paragraph in the string.

Example

在以下代码中，我们使用 Unicode 字符来分隔行。但是，由于我们使用 innerHTML 属性来更新 HTML，因此看不到直接分隔的行。

In the below code, we used the Unicode character to separate the line. However, you won’t be able to see separating lines directly as we use the innerHTML property to update the 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 中引入的。它用于移除字符串两端的空格。

The string trim() method was introduced in ECMAScript 2019. It is used to remove the whitespace from both ends of the string.

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

The string.trimEnd() method removes the whitespaces from the end of the string.

Example

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

The code below removes the white spaces from the end of the string.

<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() 方法。它会移除字符串开头的空格。

ECMAScript 2019 introdued the string trimStart() method. It removes the whitespaces from the start of the string.

Example

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

The code below removes the white spaces from the start of the string.

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