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

This article mainly introduces "how to use the JS ES extension operator". In daily operation, I believe many people have doubts about how to use the JS ES extension operator. 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 "how to use the JS ES extension operator". Next, please follow the editor to study!

Extension operator

The extension operator is three dots. It allows an expression to be expanded in place, and when multiple parameters (such as a function call) or multiple values (such as an array) are needed, it converts it into a comma-separated sequence of parameters.

The sample code is as follows:

/ / define an array let arr = [1, 2, 3, 4, 5, 6] / / use. Expand the extension operator console.log (.arr); / / 12 3 4 56 console.log / define a function function fun (. Item) {console.log (.. item);} / / call function fun (1, 2, 3, 4, 5, 6) / / 1 23 4 56 hand / use let x = 10arr = [... (x > 0?) ['a']: []), 'baked,]; console.log (.. arr); / / a b II, alternative apply () method

Because the extension operator expands the array, you no longer need the apply method to turn the array into a function parameter.

The sample code is as follows:

/ / define a function function fun (a, b, c, d, e) {console.log (a, b, c, d, e);} / define an array let arr = [1, 2, 3, 4, 5] / / ES5 call method fun.apply (null, arr) / / 12 3 45 arr / ES6 call mode fun (... arr) / / 1 2 3 45)

If we take out the maximum value in the array in the actual development, the way is as follows:

Let arr = [1, 20, 30, 50, 3, 88,] / / ES5 let max = Math.max.apply (null, arr) console.log (max); / / 88

E is written as follows:

Let arr = [1, 20, 30, 50, 3, 88,] / / ES6 let max = Math.max (... arr) console.log (max); / / 88 III. Application of extension operator

The application of extended array is mainly manifested in the following aspects

1. Copy the array

Before ECMAScript 2015, if you simply assigned arr1 to arr2, when you modify arr2, arr1 will also change, which is called shallow copy.

The sample code is as follows:

Let's first understand the concept of deep and shallow replication:

Deep copy: copying the contents of elements in an array

Shallow copy: copy the memory address of the contents of array elements

Let arr1 = [1, 2, 3, 4, 5] let arr2 = arr1console.log (arr2); / / [1, 2, 3, 4, 5] / modify the data content of arr2 arr2 [2] = 6 arr2 / both change console.log (arr1, arr2); / / [1, 2, 6, 4, 5] [1, 2, 6, 4, 5]

If you want to complete the deep copy, the sample code is as follows:

Let arr1 = [1,2,3,4,5] let arr2 = [] / / ES5 for (let I = 0; I < arr1.length; iTunes +) {arr2 [I] = arr1 [I];} arr2 [2] = 6 arr2 change console.log (arr1, arr2); / / [1, 2, 3, 4, 5] [1, 2, 6, 4, 5] / / ES6 arr2 = [... arr1] arr2 [2] = 6 / only arr2 changes console.log (arr1, arr2); / / [1,2,3,4,5] [1,2,6,4,5] 2, merge array

The extension operator provides a new way to write array merging. The sample code is as follows:

Const arr1 = ['averse,' b']; const arr2 = ['c']; const arr3 = ['dudes,' e']; / / the merged array console.log of ES5 (arr1.concat (arr2, arr3)); / / the merged array console.log ([. Arr1,... arr2,... arr3] of ES6) / / ['await,' baked, 'clocked,' dumped,'e']

It is worth noting that both methods are shallow replication.

3. Used in combination with decoupling assignment

The extension operator can be combined with a deconstruction assignment to generate an array (for fetching the rest of the data).

Note: only the extension operator can be placed last.

The sample code is as follows:

/ / scene analysis: take the first and last values in the array let arr = [1,2,3,4,5] let first, rest;// ES5: borrow the Array.slice () function first = arr [0] rest = arr.slice (1) console.log (first, rest); / 1 [2,3,4,5] / ES6 [first,... rest] = arrconsole.log (first, rest) / 1 [2, 3, 4, 5] 4. Split the string into an array

The extension operator can also turn a string into a real array. The sample code is as follows:

Let str = 'Fox Spirit Matchmaker' console.log ([... str]); / / ['Fox', 'demon', 'Xiao', 'Hong', 'Niang'] at this point, the study on "how to use the JS ES extension operator" is over, hoping to solve everyone's 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.