Home > Article > Web Front-end > 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:
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 ]
| 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 2|
miniCalendar
|
[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]
| From 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
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])); // 13From 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 withSet 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.childNodesand 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().
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 tutorialThe 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!