What do three dots mean in es6

In es6, the three dots "..." refer to the "expansion operator", which can expand array expressions or strings at the syntax level during function calls or array construction; it can also be used When constructing a literal object, expand the object expression in a "key-value" manner.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

What do the three dots in es6 mean?

The real name of the three dots (...) is the expansion operation Symbol is a newly added content in ES6. It can expand array expressions or strings at the syntactic level during function call/array construction; it can also expand object expressions according to key- when constructing literal objects. Expand value

Literals generally refer to [1,2,3] or {name:'chuichui'}, a simple construction method, three points of multi-layer nested arrays and objects There's nothing you can do

To put it bluntly, it means taking off your clothes, whether it's braces ([]) or curly braces ({}), it doesn't matter, take them all off!

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//对象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

8 ways to use the spread operator

1. Copy array object

Using the expander to copy an array is a commonly used operation in ES6:

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

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

The expansion operator copies the array, only the first layer is a deep copy, that is, used for one-dimensional arrays Extension operator copy is a deep copy, look at 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 for clearer comparison, as follows:

Copy Array 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 in the elements inside will cause the value of the original variable to change accordingly

Variable description	Result	Operation
##copyArray	[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	miniCalendar
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 deep copy on one layer. The following code 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 } }

From the printed result, The spread operator only makes a deep copy of the first level of the object.

Strictly speaking, the spread operator does not perform deep copy

2. Merge operation

Let’s first look at the merging of arrays, 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 how many parameters the function defines and the value passed in by the expansion operator Just how many.

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

Use with

Set to eliminate duplicates from an 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 spread 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 character String interception, as follows:

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

6. NodeList Convert to array

NodeList An object is a collection of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll.

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

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

Deconstruct 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 to use expansion characters for each item, as follows:

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

Summary##Extension Operator... makes the code more concise and should be the more popular operator in ES6.

【Related recommendations:

javascript video tutorial

, web front-end】

The above is the detailed content of What do three dots mean in es6. For more information, please follow other related articles on the PHP Chinese website!