“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Rest parameters…

🎨 Let’s start with the simplest example

If you want to implement a function that returns the sum of two numbers, you can write it like this

function sum(a, b) {
  return a + b;
}
Copy the code

After passing in two parameters, we get what we expect

The sum (1, 2) / / 3Copy the code

If you want to implement three numbers, it’s easy to just add a parameter c

function sum(a, b, c) {
  return a + b + c;
}
Copy the code

We can certainly do this if we have a small number of variables, but what if we don’t know the parameters, or if we have N parameters? For example, if you want the sum of 1+2+3+4+5+6+7+8+9+10.

If we pass 10 parameters, which is obviously an inelegant way to write, we can use Rest parameters (residual parameters)… To deal with.

Rest arguments can be made by using three points… And followed by the names of the array containing the remaining parameters to include them in the function definition. These dots literally mean “collect the remaining arguments into an array.”

Now summing over any number of arguments, we can put all of the arguments into the array ARgs, so we don’t have to worry about the number of variables.

function sumAll(... Args) {// let sum = 0; for (let arg of args) sum += arg; return sum; } console.log(sumAll(1, 2)) console.log(sumAll(1, 2, 3)) console.log(sumAll(1, 2, 3, 4))Copy the code

💥 Note: Rest parameters must be placed at the end of the parameter list

The Rest argument collects all remaining arguments, so the following usage makes no sense and results in an error:

/ / arg2 in... Error ❌ function f(arg1... rest, arg2) { }Copy the code

Spread the grammar

As you can see from the example above, we pass the argument list (1,2,3,4) to a function. In the function we get an array [1,2,3,4];

📖 If you need to do the opposite now, how do you do it?

🎨 For example, the built-in function math.max returns the largest value of the argument:

Math.max(3, 5, 1) ; / / 5Copy the code

🍉 If you now have an array [3, 5, 1], how do you call math.max?

If you pass in the array directly, you can see that the end result is NaN.

📖 What about that?

First of all, we certainly can’t manually set the math.max (arg[0], arg[1], arg[2]) parameters one by one, because we’re not sure how many there are.

Spread Spread Spread Spread Spread Spread Spread Spread Spread But the effect is completely opposite.

Spread syntax except that it expands the array to be a list of arguments. You can also convert strings into character arrays

extension

The Spread syntax can also be used to copy an array

let arr = [1, 2, 3]; // Add the array spread to the argument list // then place the result in a new array let arrCopy = [...arr];Copy the code

Modifying the original array does not modify the copy (note that this pointer pair is of simple type)

Or copy an object

let obj = { a: 1, b: 2, c: 3 }; // Spread the object into the argument list // then return the result to a new object let objCopy = {... obj };Copy the code

Modifying the original Object does not modify the copy (note that this pointer is similar to the attribute value of simple type and object. assign) 👉 address

conclusion

See “…” in code Is either a REST parameter or a spread syntax.

Usage scenarios

  • Rest arguments are used to create functions that can take any number of arguments.
  • Spread syntax is used for functions that pass arrays to lists that typically require many arguments.

Distinguish between

  • if.Appear in theFunction parametersAt the end of the list, then, is the REST parameter, which collects the remaining parameters from the parameter list into an array.
  • if.Appear in theA function callOr similarexpressionThat’s the spread syntax, which expands an array into a list.

References:

Rest parameters and spread syntax

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 super detailed SUMMARY of JS mapping (Map)

👉 Do you really know JavaScript destruct assignment?

👉 JS guide to using the built-in Date object Date

👉 recursion of function progression and case analysis