领略ES10的新功能

by Ashay Mandwarya ?️??

由Ashay Mandwarya提供吗？

领略ES10的新功能 (A taste of what’s new in ES10)

Every year, a new version of ECMAScript is released with the proposals which are officially ready for distribution to devs and users alike. This article will be discussing the latest iteration of the language, and what new features it brings to the table.

每年，都会发布带有建议的ECMAScript新版本，正式可以将其分发给开发人员和用户。 本文将讨论该语言的最新版本及其带来的新功能。

ES10/ES2019 has made great improvements in this update. It introduces functions and methods which will enable developers to write less code, and do more productive work.

ES10 / ES2019在此更新中进行了重大改进。 它介绍了一些功能和方法，这些功能和方法将使开发人员可以编写更少的代码，并且可以进行更多的工作。

Let’s jump right into it.

让我们直接跳进去。

平面() (flat())

flat() is a method which is used to flatten an array. There are certain situations in which the elements of an array are an array. These types of arrays are called nested arrays.

flat()是用于展平数组的方法。 在某些情况下，数组的元素是数组。 这些类型的数组称为嵌套数组。

Normally to un-nest (flatten) them, we had to use recursion. Now with the introduction of flat(), it can be done in a single line. F.Y.I — a flattened array is an array of depth 0. flat() takes an argument, a number which represents the depth. Depth is the amount of nesting inside an array. Let's see an example of explaining nesting and depth.

通常，要取消嵌套(变平)它们，我们必须使用递归。 现在，随着flat()的引入，它可以在一行中完成。 FYI —展平的数组是深度为0的数组。flat()接受一个参数，该数字代表深度。 深度是数组内嵌套的数量。 让我们看一个解释嵌套和深度的例子。

The above is an array of depth 3. It is an array inside of an array, inside of an array, inside of an array ???. Generally, in JavaScript an array can have a depth of infinity or until you run out of memory. Suppose if an array has nesting depth of 3 and we flatten only till depth 2, then there still will be one nested array inside the main array.

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

句法 (Syntax)

退货 (Returns)

It returns a flattened array.

它返回一个展平的数组。

例 (Example)

The nested array of depth 3 is flattened using flat for a depth of 3.

深度3的嵌套数组使用flat展平3的深度。

If we put the depth as 2, we get this:

如果将深度设为2，则得到以下结果：

We can see we still have an un-flattened array, in the output.

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

flatMap() (flatMap())

flatMap() is used to flatten a nested array and to change the values according to a function like a map() function. This function works on an array and takes a callback as an argument. The callback dictates how the array has to be flattened. It works just like a map, but in addition, it also flattens it. If you want to know more about maps, check out this article.

flatMap()用于展平嵌套数组并根据诸如map()函数之类的函数更改值。 该函数在数组上起作用，并以回调作为参数。 回调指示如何平整数组。 它就像地图一样工作，但除此之外，它也将其展平。 如果您想了解更多关于地图，看看这个文章。

flatMap() can be used to flatten an array of depth of 1 only, as internally it calls a map function followed by flat function with a depth of 1.

flatMap()仅可用于展平深度为1的数组，因为在内部它会调用map函数，然后调用深度为1的flat函数。

句法 (Syntax)

退货 (Returns)

A flattened array with manipulated values courtesy of the callback function which is provided to it. Just like a map.

提供给它的回调函数提供了带有操纵值的扁平数组。 就像地图一样。

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

map() + flat() =＆ gt; flatma p()

例 (Example)

In this example, map and flatMap are shown one by one to show the difference between the two functions. map() returns an array of arrays that contained the values, while the output of flatMap() was same as map, in addition to the flattening of the array.

在此示例中，map和flatMap一张一张地显示，以显示两个函数之间的差异。 map()返回包含值的数组数组，而flatMap()的输出与map相同，除了扁平化该数组。

Object.fromEntries() (Object.fromEntries())

Another very useful function. Object.fromEntries is used to form objects from a provided key value pair. It takes in a list of key-value pairs and returns an object whose properties are given by the entries. It functions as reverse of Object.entries().

另一个非常有用的功能。 Object.fromEntries用于根据提供的键值对形成对象。 它接受键值对的列表，并返回其属性由条目指定的对象。 它与Object.entries()的功能相反。

参量 (Parameters)

It takes in any iterable, i.e. an array.

它接受任何迭代，即数组。

退货 (Returns)

It returns an object with the given key-value pairs.

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

例 (Example)

We can see that when we supplied a map (which stores values in pairs) to the fromEntries() function, we get an object with respective key-value pairs as just in the map.

我们可以看到，当向fromEntries()函数提供一个映射(成对存储值)时，我们得到一个具有相应键值对的对象，就像在映射中一样。

trimStart() (trimStart())

The trimStart() method removes whitespace from the beginning of a string. trimLeft() is an alias of this method.

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

句法 (Syntax)

退货 (Returns)

It returns a string with the white spaces from the front removed.

它返回一个字符串，其中前面的空格已删除。

例 (Example)

We can clearly see the removed white spaces from the output.

我们可以清楚地看到从输出中删除的空白。

trimEnd() (trimEnd())

The trimEnd() method removes white space from the end of a string. trimRight() is an alias of this method.

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

句法 (Syntax)

退货 (Returns)

It returns a string with all spaces trimmed from the end.

它返回一个字符串，该字符串的所有空格都从末尾开始修剪。

例 (Example)

We can clearly see the spaces from the end are trimmed.

我们可以清楚地看到从尾部开始的空间已被修剪。

更改以绑定 (Changes to catch binding)

Until ES10, we were forced by the syntax to bind an exception variable for the catch clause, whether it was necessary or not. Many time it can be noticed that the catch block is just redundant. ES10 proposal enables us to simply omit the variable altogether, giving us one less thing to care about.

在ES10之前，无论是否需要，语法都迫使我们为catch子句绑定一个异常变量。 很多时候可以注意到catch块只是多余的。 ES10提案使我们可以完全省略该变量，从而使我们无需担心。

例 (Example)

In the above example, we can see that no variable is to be provided to catch to run.

在上面的示例中，我们可以看到没有提供任何变量来捕获运行。

符号说明 (Symbol Description)

When we create a Symbol in JS, it is possible to specify a description which can be used for debugging later. The process of getting back this description is a bit tedious. We have to re-construct the Symbol again and with the help of the toString() method to access the description.

当我们在JS中创建Symbol时，可以指定一个描述，以便以后进行调试。 恢复此描述的过程有点繁琐。 我们必须重新构造Symbol并借助toString()方法来访问描述。

ES10 adds a new read-only property known as description, which returns the description of the Symbol.

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

例 (Example)

We can see that we directly get the description using .description property of the Symbol.

我们可以看到，我们使用Symbol的.description属性直接获取描述。

结语 (Wrap up)

These were some of the features that are going to be introduced in the current ES10 standard. I hope you enjoyed the article! Thanks for reading.

这些是当前ES10标准中将引入的一些功能。 希望您喜欢这篇文章！ 谢谢阅读。

翻译自: https://www.freecodecamp.org/news/a-taste-of-whats-new-in-es10-68d28ba22f92/