Share 10 ways to use the JavaScript spread operator

This article will share with you 10 ways to use the javascript spread expansion operator. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "javascript video tutorial"

Copy array

We can use the spread operator to copy 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.

Combining 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 the spread 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' ]

Add attributes to the object

Assumption 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 with 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 unlimited parameters as follows:

const myFunc = (...args) => {
  console.log(args);
};

If we now call this with multiple For the parameter function, 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]

You can see it here We got 3p 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 Object

Suppose we have an object user:

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

Now, we can use the spread operator to deconstruct it 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' ]

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: Programming Teaching! !

The above is the detailed content of Share 10 ways to use the JavaScript spread operator. For more information, please follow other related articles on the PHP Chinese website!