Shulou(Shulou.com)06/01 Report--

The purpose of this article is to share with you what the three points in es6 mean. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In es6, there are three dots. It refers to the "extension operator", which can expand the array expression or string at the syntax level when a function call or array construction is made, or expand the object expression as a "key-value" when constructing a literal object.

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

What do three dots mean in es6

The real name of the three dots (...) is the extension operator, which is a new addition in ES6. It can expand the array expression or string at the syntax level when the function call / array construction is made. It can also expand the object expression in the way of key-value when constructing literal objects.

The literal quantity generally refers to the concise construction of [1 name:'chuichui' 2] or {3}, and the multi-layer nested array and three points of objects are powerless.

To put it bluntly, it means to take off your clothes, whether it's curly braces ([]) or curly braces ({}). Take them all off!

/ / Array var number = [1 name:'chuichui',height:176 2 console.log 3 4 5 5 5] console.log (... console.log) / / 1 2 3 4 56 6 / object var man = {name:'chuichui',height:176} console.log ({... man}) / {name:'chuichui',height:176}

8 uses of extension operator

1. Copy array objects

Copying a Bay array with an extender is a common operation in ES6:

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

To copy an array with extension operators, only the first layer is a deep copy, that is, using an extension operator to copy an 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 position 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 a clearer comparison, as follows:

Variable description result operation copyArray [2021, [1,2,3,4,5,6,7], 1] copy array miniCalendarcopyArray [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; 3 to the second element of the array. Re-assign the third element of the array to 2miniCalendar [0, 2021, [0, 2, 3, 4, 5, 6, 7, 8], 1] from the result, the second element of the array is an array, which is more than 1 dimension, and the change of the element in it will cause the value of the original variable to change accordingly.

Copy the object 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 extension operator copy object is only copied deeply at one level, and the following code is based on the above code:

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

From the result of the print, the extension operator only makes a deep copy of the first layer of the object.

Strictly speaking, extension operators do not perform deep copies

two。 Merge operation

Let's take a 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 transfer

Const sum = (num1, num2) = > num1 + num2;console.log (sum (. [6,7]); / / 13console.log (sum (. [6,7,8])); / / 13

From the above code, the number of parameters defined by the function is the number of values passed in by the extension operator.

Used 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); / / 1console.log (max); / / 10

4. Array deduplication

Use with Set to remove duplicates from 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 extension operator. Turn it into a character array, as follows:

Const title = "china"; const charts = [. Title]; console.log (charts); / / ['centering,' hacking, 'iTunes,' nasty,'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 rotation array

A NodeList 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, without all the methods of Array, such as find, map, filter, and so on, but you can use forEach () to iterate.

You can convert it to an array through the extension operator, as follows:

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

7. Deconstruction variable

Destruct the array as follows:

Const [currentMonth,... others] = [7, 8, 9, 10, 11, 12]; console.log (currentMonth); / / 7console.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); / / Crayonconsole.log (location); / / {province: 'Guangdong', city:' Shenzhen'}

8. Print log

When printing iterable objects, you need to print each item using an extension, as follows:

Const years = [2018, 2019, 2020, 2021]; console.log (.. years); / / 2018 2019 2020 2021 Thank you for reading! This is the end of the article on "what do the three points in es6 mean?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.