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

This article mainly introduces "what are the JS extension operator writing methods". In the daily operation, I believe that many people have doubts about the JS extension operator writing method. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what is the JS extension operator writing method?" Next, please follow the editor to study!

1. String rotation array

The most common practice of string to array is as follows:

Let str = 'hello' let arr = str.split ('') console.log (arr) / / ['hype,' eBay, 'lump,' lump,'o']

After using the extension operator, you can do this:

Let str = 'hello' let arr = [... str] console.log (arr) / / [' hype, 'eBay,' lump, 'lump,' o']

two。 Convert a class array to an array

In JS, there is a data structure called NodeList, which is very similar to an array, also known as a "class array". What is a class array? This is how it is defined in MDN:

"Class array: any object that has a length property and several indexed properties.

What are the class arrays? The following can be thought of as class arrays:

The object returned by NodeList:document.querySelectorAll ()

The object returned by HTMLCollection:document.getElementsByTagName ()

Arguments: parameter object in a function

Class arrays don't have array methods such as push, map, and so on, so you often need to convert them to arrays, which we usually do:

Let nodeList = document.querySelectorAll ('div') console.log (nodeList instanceof NodeList) / / true let arr = Array.apply (null, nodeList) console.log (arr instanceof Array) / / true / / or let arr2 = [] .slice.call (nodeList) console.log (arr2 instanceof Array) / / true / / or let arr3 = Array.from (nodeList) console.log (arr3 instanceof Array) / / true

With the extension operator, you can do this:

Let nodeList = document.querySelectorAll ('div') let arr = [... nodeList] console.log (arr instanceof Array) / / true

3. Add items to the array

Adding several items to an array is usually done like this:

Let arr = [5] / / add arr.unshift (1Magne2) console.log (arr) / / [1Magne2, 5] / / add arr.push (6,7) console.log (arr) from the tail / / [1Power2,5,6,7] / / add arr.splice (2,0,3,4) console.log (arr) from any position / / [1Power2,3,4,5,6,7]

After using the extension operator:

Let arr = [3,4] arr = [1,2,... arr, 5,6] console.log (arr) / / [1,2,3,4,5,6]

4. Copy arrays and objects

Usually copy an array, you can do this:

Let arr = [1,3,5,7] let arr2 = arr.concat () / / or let arr3 = arr.slice () arr [0] = 2 console.log (arr) / / [2,3,5,7] console.log (arr2) / / [1,3,5,7] console.log (arr3) / / [1,3,5,7]

But with the extension operator, the copy array can be written very simply:

Let arr = [1,3,5,7] let arr2 = [... arr] arr [0] = 2 console.log (arr2) / / [1,3,5,7]

Similarly, the extension operator can also copy objects. Common practice for copying objects:

Let person = {name: 'Bran', age: 12} let p2 = Object.assign ({}, person) person.age = 20 console.log (person) / / {name: 'Bran', age: 20} console.log (p2) / / {name: 'Bran', age: 12}

With the extension operator, it is quite convenient to copy an object:

Let person = {name: 'Bran', age: 12} let p2 = {... person} person.age = 20 console.log (person) / / {name: 'Bran', age: 20} console.log (p2) / / {name: 'Bran', age: 12} / / you can even write let {... p3} = person

"Note: the extension operator can only deeply copy objects with an one-tier structure, and if the object is a two-tier structure, then using the extension operator to copy will be a shallow copy.

5. Merge arrays or objects

Array merging is usually done like this:

Let arr1 = [1,3,5] let arr2 = [2,4,6] let arr3 = arr1.concat (arr2) console.log (arr3) / / [1,3,5,2,4,6]

After using the extension operator, you can write:

Let arr1 = [1,3,5] let arr2 = [2,4,6] let arr3 = [... arr1,... arr2] console.log (arr3) / / [1,3,5,2,4,6]

By the way, it can merge objects in addition to arrays. To merge objects, the usual practice is:

Let p1 = {name: 'Bran'} let p2 = {age: 12} let p3 = Object.assign ({}, p1, p2) console.log (p3) / / {name: 'Bran', age: 12}

Match the union object with an extension operation:

Let p1 = {name: 'Bran'} let p2 = {age: 12} let p3 = {... p1,... p2} console.log (p3) / / {name: 'Bran', age: 12}

6. Deconstruct object

Often we do this when we set parameters to an object:

Let person = {name: 'Bran', age: 12, sex: 'male'} let name = person.name let age = person.age let sex = person.sex

With the extension operator, we can write it like this, but in fact, the following is not the way the extension operator is written, but the rest of the operator, although it looks similar after it is written, but at the point of operating on the object, it can basically be considered to be the opposite of the extension operator, which is used to expand the properties of the object to multiple variables. The residual operator is used to aggregate multiple parameters into a single variable.

Let person = {name: 'Bran', age: 12, sex: 'male'} let {name,... reset} = person console.log (name) / /' Bran 'console.log (reset) / / {age: 12, sex:' male'}

7. Add attributes to an object

Adding attributes to an object usually goes like this:

Let person = {name: 'Bran'} person.age = 12 console.log (person) / / {name: 'Bran', age: 12}

Use the extension operator to add properties to the object:

Let person = {name: 'Bran'} person = {... person, age: 12} console.log (person) / / {name: 'Bran', age: 12}

Here are two tips for using extension operators to add properties to objects:

1. Set the default value for the new object:

/ / the age attribute value of the default person object is 12 let person = {age: 12,. {name: 'Bran'}} console.log (person) / / {age: 12, name: 'Bran'}

two。 Override object properties

The age property of the let person = {name: 'Bran', age: 12} / / person object is rewritten as 20 person = {... person, age: 20} console.log (person) / / {name: 'Bran', age: 20}

8. Set object Getter

The common practice for setting up an object Getter is as follows:

Let person = {name: 'Bran'} Object.defineProperty (person, 'age', {get () {return 12}, enumerable: true, configurable: true}) console.log (person.age) / / 12

With the extension operator, you can write:

Let person = {name: 'Bran'} person = {... person, get age () {return 12}} console.log (person.age) / / 12

9. Expand the array as a function parameter

If we have a function with a formal parameter that has multiple parameters, but when we call it, we find that the input parameter is an array, the general practice is like this:

Let arr = [1,3,5] function fn (a, b, c) {} fn.apply (null, arr)

After using the extension operator, it is much easier:

Let arr = [1,3,5] function fn (a, b, c) {} fn (... arr)

10. Functions with infinite parameters

If there is such an accumulation function, it will add up all the parameters passed in, the common practice is to integrate all the parameters into the array, and then do this:

Function doSum (arr) {return arr.reduce ((acc, cur) = > acc + cur)} console.log (doSum ([1,3])) / / 4 console.log (doSum ([1,3,5])) / / 9

If the arguments are not arrays, but need to be passed one by one, which means that the function must support infinite arguments, this may be done:

Function doSum () {let sum = 0 for (let I = 0, l = arguments.length; I

< l; i++){ sum += arguments[i] } return sum // 或者 // let args = [].slice.call(arguments) // return args.reduce((acc, cur) =>

Acc + cur)} console.log (doSum (1,3)) / / 4 console.log (doSum (1,3,5)) / / 9 console.log (doSum (1,3,5,7)) / / 16

With the extension operator, it's much easier:

Function doSum (. Arr) {return arr.reduce ((acc, cur) = > acc + cur)} console.log (doSum (1,3)) / / 4 console.log (doSum (1,3,5)) / / 9 console.log (doSum (1,3,5,7)) / / 16

11. The remaining parameters of the extension function

Sometimes a function needs to pass a lot of parameters. For example, there may be a lot of parameters passed from other pages in the onLoad lifecycle function of Mini Program page (WePY), and then some data initialization work needs to be done in the function, which makes it look bloated and ugly, such as:

Function init (a, b, x, y) {/ / do a series of initialization data work}

After using the extension operator, we can deconstruct the parameters according to the business and split the work that should have been initialized in a function into multiple ones. We can do this:

Function other (x, y) {} function init (a, b,... restConfig) {/ / operate with an and b parameters / / pass the rest of the parameters to the original function return other (... restConfig)}

twelve。 Use in conjunction with Math function

For example, when you need to find the maximum value for an array, you usually do this:

Let arr = [3,1,8,5,4] function max (arr) {return [] .concat (arr). Sort ((a, b) = > b-a)} console.log (max (arr) [0]) / / 8 / or arr.reduce ((acc, cur) = > Math.max (acc, cur)) / / 8 / or Math.max.apply (null, arr) / / 8

However, after using the extension operator, you can write the maximum value of the array more succinctly:

Let arr = [3,1,8,5,4] let max = Math.max (... arr) console.log (max) / / 8

13. Use in new expressions

Suppose you have a date in array format, and if you want to create a date instance through the Date constructor, you might do this:

Let arr = [2021, 1, 1] let date = new Date ([] .toString.call (arr)) console.log (date) / / 'Mon Feb 01 2021 00:00:00 GMT+0800 (China Standard time)' / / or let date2 = new (Function.prototype.bind.apply (Date, [null] .concat (arr)) console.log (date2) / / 'Mon Feb 01 2021 00:00:00 GMT+0800 (China Standard time)'

With the extension operator, it's much easier:

Let arr = [2021, 1, 1] let date = new Date (... arr) console.log (date) / / 'Mon Feb 01 2021 00:00:00 GMT+0800 (China Standard time)' this ends the study of "what are the JS extension operators?". I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.