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.

Copy array

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.

Merge arrays

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];

Add elements to the array

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

To the object Adding Properties

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};

Using the Math() function

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.

rest Parameters

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

Passing infinite parameters to function

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.

Convert nodeList to array

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>

Destructuring the object

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 restVariables.

Expand strings

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!