Javascript语法

by Ashay Mandwarya ?️??

由Ashay Mandwarya提供吗&＃xff1f;

Javascript传播语法简介 (An introduction to Spread syntax in Javascript)

这是什么&＃xff0c;为什么我们需要它&＃xff1f; (What is it and why do we need it?)

The spread syntax was introduced in the ES6 specification of Javascript. It since has proved to be a valuable piece of code making the code clean and easy to understand.

扩展语法在Javascript的ES6规范中引入。 从那以后&＃xff0c;它已被证明是使代码干净且易于理解的有价值的代码。

MDN defines … as:

MDN将…定义为&＃xff1a;

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

扩展语法允许将可迭代程序(例如数组表达式或字符串)扩展到期望零个或多个参数(用于函数调用)或元素(用于数组文字)的位置&＃xff0c;或将对象表达式扩展在零个或多个位置键值对(用于对象文字)是必需的。

Let’s all agree that the above definition is a handful and none of us caught a word it is trying to say. So let’s start with the most basic things about the spread syntax.

我们都同意上述定义是少数几个&＃xff0c;而且我们没人都想听到它要说的话。 因此&＃xff0c;让我们从有关传播语法的最基本的内容开始。

• The spread operator is just 3 dots ...

  点差运算符只有3个点...

• It can be used on iterables like an array or a string.
  它可以用于数组或字符串等可迭代对象。
• It expands an iterable to its individual elements
  它将迭代扩展到其各个元素
• It can provide a function call with an array (or any other iterable) where 0 or more arguments were expected.
  它可以为函数提供一个数组(或任何其他可迭代的数组)&＃xff0c;其中期望有0个或更多参数。

Example

例

The below snippet contains a function called sum which expects 3 arguments x, y, and z. We have an array with 3 elements, and we want to pass the elements in the array as the arguments for the function.

下面的代码片段包含一个名为sum的函数&＃xff0c;该函数需要3个参数x&＃xff0c;y和z。 我们有一个包含3个元素的数组&＃xff0c;我们想将数组中的元素作为函数的参数传递。

Before the spread operator was introduced, this was done via the apply function.

在引入散布运算符之前&＃xff0c;这是通过apply函数完成的。

After the introduction of the spread operator, it could be done very simply:

引入散布运算符后&＃xff0c;可以非常简单地完成它&＃xff1a;

As can be seen from the above snippet with the spread operator, we do not have to use the apply function. This saves us from writing more code.

从上面带有传播运算符的代码片段可以看出&＃xff0c;我们不必使用apply函数。 这使我们不必编写更多代码。

The above example gives a very rough and brief idea about the spread operator. First, let’s get into more details regarding the same, and then we will see more examples.

上面的示例给出了一个非常简单的关于传播算子的想法。 首先&＃xff0c;让我们详细了解相同的内容&＃xff0c;然后再查看更多示例。

句法 (Syntax)

The spread operator can be used in many ways and scenarios such as

散布运算符可用于多种方式和场景&＃xff0c;例如

• Inside function calls

  内部函数调用

When used in the above scenario the … is called the rest parameter. We will see examples related to this in the examples section.

在上述情况下使用…称为rest参数。 我们将在示例部分中看到与此相关的示例。

• Creating/Extending an array/iterable:

  创建/扩展数组/可迭代&＃xff1a;

例子 (Examples)

• As rest

  休息吧

… is used as an argument for a variadic function. A variadic function is a function which can have a variable number of parameters.

…用作可变参数的参数。 可变参数函数是可以具有可变数量的参数的函数。

Here when we return args, we see that we get back our array which we passed as separate values in the call. This shows that the rest operator actually works exactly opposite of the spread syntax. One expands and one condenses the value.

在这里&＃xff0c;当我们返回args时&＃xff0c;我们看到我们返回了数组&＃xff0c;该数组在调用中作为单独的值传递。 这表明rest运算符实际上与扩展语法相反。 一个扩展&＃xff0c;一个浓缩价值。

One more thing to point out is that there is no specific number of parameters mentioned in the function definition. This means using … the function can have n number of arguments. We do not need to specify the parameters beforehand.

还有一点要指出的是&＃xff0c;函数定义中没有提到特定数量的参数。 这意味着使用…该函数可以有n个参数。 我们不需要预先指定参数。

This is particularly a very flexible way of receiving arguments for a function for which the specific numbers of arguments aren’t determined like the Math.max and Math.min function. They are variadic functions as the numbers of inputs can be infinite for them.

这是一种非常灵活的接收函数参数的方式&＃xff0c;该函数无法确定特定数量的参数&＃xff0c;例如Math.max和Math.min函数。 它们是可变函数&＃xff0c;因为输入的数量对于它们可以是无限的。

Back to the example, to get the sum of all the arguments

返回示例&＃xff0c;获取所有参数的总和

We have to iterate the array and add all the individual elements to produce the result.

我们必须迭代数组并添加所有单个元素以产生结果。

• Push elements in an array

  推入数组中的元素

push() function is used to push elements into an array. The limitation with push is that we have to push elements one by one (push(1,2,3)). If there is an array whose elements are to be inserted in the array using push we will get a multidimensional array, which we did not ask for.

push()函数用于将元素推入数组。 push的局限性是我们必须一一推送元素(push(1,2,3))。 如果存在一个要使用push将其元素插入到数组中的数组&＃xff0c;我们将得到一个多维数组&＃xff0c;我们并没有要求。

Again apply to the rescue

再次申请救援

As we can see that using apply does not look very elegant and we need a simple and small syntax to do that. Let us use spread …

如我们所见&＃xff0c;使用apply看起来并不优雅&＃xff0c;我们需要一个简单的语法来实现。 让我们使用点差…

Elegant!

优雅&＃xff01;

• Copying an array

  复制数组

Simple!

简单&＃xff01;

The same result can be produced using an object

使用对象可以产生相同的结果

• Concatenating 2 arrays

  串联2个数组

Concatenation is done using the concat function

使用concat函数进行串联

Same can be achieved using the … operator

使用…运算符可以实现相同的效果

• Converting a string to an array

  将字符串转换为数组

This can be done using both the split function and the … operator

可以使用split函数和…运算符来完成此操作

• Use in max and min functions

  在最大和最小函数中使用

The below snippet tends to find the maximum element in the array, so we pass the whole array in the function but we get the result as NaN

下面的代码片段倾向于找到数组中的最大元素&＃xff0c;因此我们将整个数组传递给函数&＃xff0c;但结果为NaN

We can use apply, but as seen from the previous examples I hate using it

我们可以使用apply&＃xff0c;但是从前面的示例可以看出&＃xff0c;我讨厌使用它

Same for min

最小相同

结论 (Conclusion)

We saw many situations where the spread operator comes in handy and reduces our code and also makes it super easy to understand.

我们看到许多情况下&＃xff0c;散布运算符会派上用场&＃xff0c;从而减少了我们的代码&＃xff0c;并使其非常易于理解。

If you like it Clap? and Follow? for more.

如果您喜欢拍手&＃xff1f; 并跟随&＃xff1f; 更多。

翻译自: https://www.freecodecamp.org/news/an-introduction-to-spread-syntax-in-Javascript-fba39595922c/

Javascript语法