Chris Bongers translator: Ishadeed

Click “like” to see, wechat search ** [big move the world],B station pay attention to [front-end small wisdom] ** this does not have a big factory background, but has a positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

Copy the array

We can copy the array using the expansion operator, but note that this is a shallow copy.

Const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]Copy the code

This allows us to copy a basic array. Note that it does not work with multilevel arrays or arrays with dates or functions.

Merge array

Let’s say we have two arrays that we want to merge into one. Earlier we could have used the concat method, but now we can use the expansion operator:

Const arr1 = [1, 2, 3]; Const arr2 = (4 and 6); const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]Copy the code

We can also use different arrangements to show which should come first.

const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];
Copy the code

In addition, the expansion notation also applies to merging multiple arrays:

const output = [...arr1, ...arr2, ...arr3, ...arr4];
Copy the code

Adds elements to an array

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

Add attributes to an object

Suppose you have an object of user, but it lacks an age attribute.

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};
Copy the code

To add an age to the User object, we can again use the expansion operator.

const output = {... user, age: 31};Copy the code

Use the Math() function

Suppose we have an array of numbers, and we want to get the maximum, minimum, or total of those numbers.

const arr1 = [1, -1, 0, 5, 3];
Copy the code

To get the minimum, we can use the expansion operator and the math.min method.

const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(... arr1); console.log(min); / / 1Copy the code

Again, to get the maximum, do this:

const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(... arr1); console.log(max); / / 5Copy the code

As you can see, the maximum is 5, and if we delete 5, it will return 3.

You might be wondering, what happens if we don’t use the expansion operator?

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN
Copy the code

This returns NaN, because JavaScript doesn’t know what the maximum value of the array is.

Rest parameters

Suppose we have a function that takes three arguments.

const myFunc(x1, x2, x3) => {
    console.log(x1);
    console.log(x2);
    console.log(x3);
}
Copy the code

We can call this function as follows:

myFunc(1, 2, 3);
Copy the code

But what happens if we want to pass an array.

const arr1 = [1, 2, 3];
Copy the code

We can use the expansion operator to extend this array into our function.

myFunc(... arr1); // 1/2/3Copy the code

Here, we break the array into three separate arguments 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/3Copy the code

Pass an infinite number of arguments to the function

Suppose we have a function that takes an infinite number of arguments, as follows:

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

If we now call this function with multiple arguments, we see the following:

myFunc(1, 'a', new Date());
Copy the code

Returns:

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]
Copy the code

We can then iterate over the parameters dynamically.

Convert nodeList to an array

Suppose we used the expansion operator to get all divs on the page:

const el = [...document.querySelectorAll('div')];
console.log(el);
// (3) [div, div, div]
Copy the code

You can see here that we got three divs from the DOM.

Now, we can easily iterate over these elements because they are arrays.

const el = [...document.querySelectorAll('div')];
el.forEach(item => {
  console.log(item);
});
// <div></div>
// <div></div>
// <div></div>
Copy the code

Deconstruction object

Suppose we have an object user:

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

Now we can use the expansion operator to decompose it into individual variables.

const {firstname, ... rest} = user; console.log(firstname); console.log(rest); // 'Chris' // { lastname: 'Bongers', age: 31 }Copy the code

Here, we deconstruct the User object and the firstName into the FirstName variable, and the rest of the object into the rest variable.

Expand string

The final use case for the expansion operator is to decompose a string into individual words.

Suppose we have the following string:

const str = 'Hello';
Copy the code

Then, if we use the expansion operator on this string, we get an array of letters.

const str = 'Hello';
const arr = [...str];
console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]
Copy the code

~ over, I am small wisdom, I want to brush the bowl, we next period see you again!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To/dailydevtip…

communication

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.