Home > Article > Web Front-end > Detailed explanation of 10 uses of JavaScript spread operator (summary)
This article will introduce you to 10 ways to use the spread operator in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
We can use the spread operator to copy an array, but please note that this is a shallow copy.
const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ]
This way we can copy a basic array, note that it does not work with multi-level arrays or arrays with dates or functions.
Suppose we have two arrays that we want to merge into one. In the early days, we could use the concat
method, but now we can use expansion Operator:
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]
We can also use different arrangements to indicate which one should appear first.
const arr3 = [...arr2, ...arr1]; console.log(arr3); [4, 5, 6, 1, 2, 3];
In addition, the expansion operator is also suitable for merging multiple arrays:
const output = [...arr1, ...arr2, ...arr3, ...arr4];
let arr1 = ['this', 'is', 'an']; arr1 = [...arr1, 'array']; console.log(arr1); // [ 'this', 'is', 'an', 'array' ]
Suppose you have an object of user
, but it is missing an age
property.
const user = { firstname: 'Chris', lastname: 'Bongers' };
To add age
to this user
object, we can again utilize the spread operator.
const output = {...user, age: 31};
Suppose we have an array of numbers and we want to get the maximum, minimum or sum of these numbers.
const arr1 = [1, -1, 0, 5, 3];
To get the minimum value, we can use the spread operator and the Math.min
method.
const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(...arr1); console.log(min); // -1
Similarly, to get the maximum value, you can do this:
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(...arr1); console.log(max); // 5
As you can see, the maximum value is 5
, if we delete 5
, it will return 3
.
You may be wondering, what happens if we don’t use the spread operator?
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(arr1); console.log(max); // NaN
This returns NaN because JavaScript doesn't know what the maximum value of the array is.
Suppose we have a function that has three parameters.
const myFunc(x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }
We can call this function as follows:
myFunc(1, 2, 3);
But what happens if we want to pass an array.
const arr1 = [1, 2, 3];
We can use the spread operator to expand this array into our function.
myFunc(...arr1); // 1 // 2 // 3
Here, we split the array into three separate parameters and pass them to the function.
const myFunc = (x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }; const arr1 = [1, 2, 3]; myFunc(...arr1); // 1 // 2 // 3
Suppose we have a function that accepts infinite parameters as follows:
const myFunc = (...args) => { console.log(args); };
If we now When calling this function with multiple parameters, you will see the following situation:
myFunc(1, 'a', new Date());
Returns:
[ 1, 'a', Date { __proto__: Date {} } ]
Then, we can dynamically loop through the parameters.
Suppose we use the spread operator to get all p
on the page:
const el = [...document.querySelectorAll('p')]; console.log(el); // (3) [p, p, p]
Here you can see that we got 3 p
from the dom.
Now, we can easily iterate over these elements since they are arrays.
const el = [...document.querySelectorAll('p')]; el.forEach(item => { console.log(item); }); // <p></p> // <p></p> // <p></p>
Suppose we have an object user
:
const user = { firstname: 'Chris', lastname: 'Bongers', age: 31 };
Now, we can use the spread operator to It is broken down into individual variables.
const {firstname, ...rest} = user; console.log(firstname); console.log(rest); // 'Chris' // { lastname: 'Bongers', age: 31 }
Here, we deconstruct the user
object and firstname
into the firstname
variable and the rest of the object into rest
Variables.
The final use case for the spread operator is to break a string into individual words.
Suppose we have the following string:
const str = 'Hello';
Then, if we use the spread operator on this string, we will get an array of letters.
const str = 'Hello'; const arr = [...str]; console.log(arr); // [ 'H', 'e', 'l', 'l', 'o' ]
~ End
Original address: https://dev.to/dailydevtips1/10-ways-to-use-the-spread-operator-in-javascript-1imb
Author: Chris Bongers
Translation address: https://segmentfault.com/a/1190000038998504
For more programming-related knowledge, please visit: programmingvideo! !
The above is the detailed content of Detailed explanation of 10 uses of JavaScript spread operator (summary). For more information, please follow other related articles on the PHP Chinese website!