尝鲜 ES2019 的新功能

水深无声 2022-03-09 05:26 312阅读 0赞

> 翻译：疯狂的技术宅  
> 链接：[https://medium.freecodecamp.org/a-taste-of-whats-new-in-es10-68d28ba22f92][https_medium.freecodecamp.org_a-taste-of-whats-new-in-es10-68d28ba22f92]

ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。

**ES10/ES2019** 在本次更新中有很大的改进。它引入了一些新的函数和方法，使开发者能够编写更少的代码，并提高工作效率。

**让我们直接进入正题。**

### flat() ###

`flat()` 是一种用于展平数组的方法。在某些时候，数组的元素还是数组，这些类型的数组称为嵌套数组。

要取消数组的嵌套（展平它们），我们不得不使用递归。现在引入 `flat()`，可以用一行代码完成。 一个被展平的数组是一个深度为 0 的数组，`flat()` 接受一个参数，一个代表深度的数字。深度指的是数组内嵌套的数量。下面这个例子可以帮你理解嵌套和深度。

![一个深度为 3 的嵌套数组][3]  
*一个深度为 3 的嵌套数组*

上面是一个深度为 3 的数组。它是一个数组在另一个数组的内部，又在另一个数组内部，又在另一个数组内部 ???。通常在 JavaScript 中，数组的深度可以为无穷大，或者直到内存不足为止。假设一个数组的嵌套深度为3，并且我们仅将其展平到深度 2，那么主数组中仍然会存在一个嵌套数组。

#### **句法** ####

![在这里插入图片描述][2019031214335339.png]

#### **返回值** ####

它返回一个扁平数组。

#### **示例** ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]

用 `flat()` 展平一个深度为3的嵌套数组，参数深度为3。

如果将参数深度设为2，我们得到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]

可以看到输出中仍然有一个未展平的数组。

### **flatMap()** ###

`flatMap()` 用于展平嵌套数组并根据给出的像 `map()` 这样的函数更改值。此函数作用于数组并用一个回调函数作为参数。回调函数用于指示数组应该怎样被展平。它就像 map 一样工作，此外也使它变得扁平。如果你想了解有关 map 的更多信息，请查看关于[this][]的文章。

`flatMap()` 可用于展平深度为1的数组，它在内部调用 map 函数，后跟着参数深度为1的 `flat` 函数，。

#### **句法** ####

![在这里插入图片描述][20190312143444971.png]

#### **返回值** ####

带有操纵值的扁平数组，由提供给它的回调函数提供。就像一个map一样。

**map()** \+ **flat()** => **flatmap()**

#### 示例 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]

在此例中，我们逐个显示 map 和 flatMap 以显示两个函数之间的差异。 `map()` 返回嵌套数组，而`flatMap()` 的输出除了数组的展平外，还与 map 的结构相同。

### Object.fromEntries() ###

另一个非常有用的函数 `Object.fromEntries` 用于根据提供的键值对生成对象。它接受一个键值对列表，并返回一个对象，对象的属性由参数 entries 给出。它的作用与 \*\*Object.entries()\*\*相反。

#### **参数** ####

接受任何可迭代的对象，即数组。

#### **返回值** ####

返回有给定键值对的对象。

#### **示例** ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]

我们可以看到，当向 `fromEntries()` 函数提供了一个map（将值成对存储）时，会得到一个对象，其对应的键值对和 map 中一样。

### trimStart() ###

`trimStart()` 方法删除字符串开头的空格。 `trimLeft()` 是此方法的别名。

#### **句法** ####

![在这里插入图片描述][20190312143508858.png]

#### **返回值** ####

返回一个字符串，前面的空格被删除。

#### **示例** ####

![在这里插入图片描述][20190312143516976.png]

可以清楚地看到输出中删除的空格。

### trimEnd() ###

`trimEnd()` 方法删除字符串末尾的空格。 `trimRight()` 是此方法的别名。

#### **句法** ####

![在这里插入图片描述][20190312143528656.png]

#### **返回值** ####

它返回一个字符串，末尾所有的空格被删除。

#### **示例** ####

![在这里插入图片描述][20190312143536786.png]

我们可以清楚地看到末尾的空格被删除。

### **修改 catch 绑定** ###

在 ES10 之前，我们必须通过语法为 catch 子句绑定异常变量，无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。

#### **示例** ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]

在上面的例子中，可以看到没有为 catch 提供变量。

### 符号描述 ###

当我们在 JS 中创建一个 Symbol 时，可以指定一个在以后用于调试的描述。得到这个描述的过程有点无聊，必须再次重新构造 Symbol，并在 `toString()` 方法的帮助下才能访问描述。

ES10添加了一个新的名为 description 的只读属性，它返回 Symbol 的描述。

#### **示例** ####

![在这里插入图片描述][20190312143553123.png]

可以看到使用 Symbol 的`.description` 属性能够直接获取描述。

### 总结 ###

以上是当前 ES2019 标准中将要引入的一些功能。希望你喜欢这篇文章！感谢阅读。

--------------------

欢迎关注微信公众号：jingchengyideng，每天第一时间阅读最新技术文章。

![SouthEast][]

[https_medium.freecodecamp.org_a-taste-of-whats-new-in-es10-68d28ba22f92]: https://medium.freecodecamp.org/a-taste-of-whats-new-in-es10-68d28ba22f92
[3]: /images/20220309/a017df89fa614edebc46b8c624daee31.png
[2019031214335339.png]: /images/20220309/e8931076a43541cebf675e975846d57a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70]: /images/20220309/22b8a2ead9ad4edb8e3d2a97dc1ced4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 1]: /images/20220309/3b2cdef25a5441b1a1c09173b03f2549.png
[this]: https://hackernoon.com/map-filter-reduce-ebbed4be4201
[20190312143444971.png]: /images/20220309/2bfeda9e26bc4e64b55d4973ae34787d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 2]: /images/20220309/19e2e1758fba473c9a70cebb36cd7754.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 3]: /images/20220309/0e46bb3d6d22496ba3241dfd5fc5f30b.png
[20190312143508858.png]: /images/20220309/e1928626c2a744ac97580ba8e27398ba.png
[20190312143516976.png]: /images/20220309/965de6ac8ca4410faddc1721c28b245b.png
[20190312143528656.png]: /images/20220309/67c427d80b73406c9ac9483760e33e84.png
[20190312143536786.png]: /images/20220309/c3bfafb8dd3846e0976eafb06c817586.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2V5ZW9mYW5nZWw_size_16_color_FFFFFF_t_70 4]: /images/20220309/70c3b0ac34484fbcb6f57c834f1cf531.png
[20190312143553123.png]: /images/20220309/9b68063ea04e4af38f8c022eab7de85d.png
[SouthEast]: /images/20220309/ee9149d5bef1409a9fbc66ef3789ef12.png