Understand the ES6 spread operator and talk about 8 ways to use it

This article takes you through the expansion operators in ES6 and introduces 8 ways to use the ES6 expansion operators.

Expand operator… is introduced in ES6, which expands the iterable object into its separate elements. The so-called iterable object is any Objects that can be traversed using a for of loop, such as: Array, String, Map, Set , DOM nodes, etc.

1. Copy array objects

Using the expansion operator to copy an array is a common operation in ES6:

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]

The expansion operator copies an array, onlyThe first layer is deep copy, that is, using the spread operator to copy a one-dimensional array is a deep copy. See the following code:

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

Put the printed results together to make it clearer. The comparison is as follows:

1. Reassign the first element of the second element of the array to 0; 2. Add an element 8 to the second element of the array; 3. Reassign the third element of the array to 2From the results, the second element of the array is an array, which is larger than 1 dimension. Changes to the elements inside will cause the original variable to The value changes accordingly

Variable description	Result	Operation
copyArray	[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	Copy ArrayminiCalendar
##copyArray	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
miniCalendar	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

Copy the object, the code is as follows:

const time = {
    year: 2021,
    month: 7,
    day: {
        value: 1,
    },
};
const copyTime = { ...time };
console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }

The expansion operator copy object will only perform a deep copy on one level, from the following code It is based on the above code:

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }

Judging from the printed results, the spread operator only performs a deep copy of the first layer of the object.

Strictly speaking, the spread operator does not perform deep copy

2. Merge operation

Let’s first look at the array Merge, as follows:

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

Merge objects. When merging objects, if a key already exists, it will be replaced by the last object with the same key.

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }

3. Parameter passing

const sum = (num1, num2) => num1 + num2;

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13

From the above code, we can see that the number of parameters passed in by the expansion operator is the same as the number of parameters defined by the function.

is used together with the

math function, as follows:

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10

4. Array deduplication

and

Set Use together to eliminate duplicates in the array, as follows:

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

5. String to character array

String is also an iterable object , so you can also use the expansion operator ... to convert it into a character array, as follows:

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

Then you can simply intercept the string, as follows:

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

6. NodeList Convert to array

NodeList The object is a collection of nodes, usually composed of attributes, such as Node. childNodes and methods such as document.querySelectorAll return.

NodeList is similar to an array, but not an array. It does not have all the methods of Array, such as find, map, filter, etc., but can be iterated using forEach().

It can be converted into an array through the spread operator, as follows:

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

7. Destructuring variables

Destructuring the array, as follows:

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

Destructuring the object, as follows:

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }

8. Print log

When printing iterable objects, you need You can use expansion operators to print each item, as follows:

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

Summary

Extension operators

… Make the code concise, it should be ES6 The most popular operator among them.

This article is reproduced from: https://juejin.cn/post/6979840705921286180

For more programming-related knowledge, please visit:

Introduction to Programming ! !

The above is the detailed content of Understand the ES6 spread operator and talk about 8 ways to use it. For more information, please follow other related articles on the PHP Chinese website!