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

This article introduces the knowledge of "how to use the JavaScript ES6 deconstruction operator". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Catalogue

Preface

The role of deconstructing symbols

Usage

Application of deconstructing assignment

Talking about the Application

Extract json data

Extensible operator.

Swap variable value

Summary

Preface

There are many features in JavaScript ES6 that are designed to simplify code and make it easier for programmers to write. The deconstruction operator is one of the good features, which can make the code more concise and enhance the readability of the code by reducing the use of assignment statements, or reducing access to data subscript and object properties.

The role of deconstructing symbols

Deconstructing assignment is an extension of the assignment operator, which is a pattern matching for an array or object, and then assigns values to the variables in it.

ES6 allows you to extract values from arrays and objects and assign values to variables according to a certain pattern, which is called deconstruction

Usage

Basic use

Let [a _ let _ b _ (c)] = [1m _ 2pm _ 3]; / / a = 1, b = 2, c = 3

Nested use

/ Array let [a, [b], c]] = [1, [2], 3]]; console.log (a); / 1 console.log (b); / / 2 console.log (c); / 3 let obj / object let obj = {x: ['hello', {y:' world'}]}; let {x: [x, {y}]} = obj Console.log (x); / / hello console.log (y); / / world

ignore

/ Array let [a, b] = [1,2,3]; console.log (a); / / 1 console.log (b); / / 3 console.log / object let obj = {x: ['hello', {y:' world'}]}; let {x: [x, {}]} = obj; console.log (x); / / hello

Incomplete deconstruction

/ / Array let [a = 1, b] = []; console.log (a); / / 1 console.log (b); / / undefined// object let obj = {x: [{y: 'world'}]}; let {x: [{y}, x]} = obj; console.log (x); / / undefined console.log (y); / / world

Residual operator

/ / Array let [a,... b] = [1,2rest 3]; console.log (a); / / 1 console.log (b); / / [2jing3] / / object let {a, b,... rest} = {a: 10, b: 20, c: 30, d: 40}; console.log (a); / 10 console.log (b); / / 20 console.log (rest) / / {c: 30, d: 40}

String

Let [a, b, c, d, e] = 'hello';console.log (a); / / hconsole.log (b); / / econsole.log (c); / / lconsole.log (d); / / lconsole.log (e); / / o

Deconstructing default

/ / when the deconstruction pattern has a matching result, and the matching result is undefined, the default value will be triggered as the return result. Let [a = 2] = [undefined]; console.log (a); / / 2 console.log / object let {a = 10, b = 5} = {a: 3}; console.log (a); / / 3 console.log (b); / / 5

Swap the value of the variable.

Let a = 1 console.log b = 2; [aMagneb] = [brecom a]; console.log (a); / / 2 console.log (b); / / 1 Application of deconstructing assignment

/ / 1. Shallow cloning and merging let name = {name: "aaa"} let age = {age: 'bbb'} let person = {... name,... age} console.log (person) / / {name: "aaa", age:' bbb'} let a = [1je 2jue 3]; let b = [4jue 5]; let c = [... a dint. B]; console.log (c); / / [1pr 2, 3J, 4J 5] / / 2. Extract JSON data let JsonData = {id: 10, status: "OK", data: [111,222]} let {id, status, data: numbers} = JsonData; console.log (id, status, numbers); / / 10 "OK" [111,222] / / 3. Definition of function parameters / / parameters ordered function fun1 ([a, b, c]) {console.log (a, b, c)} fun1 ([1, 2, 3]); / / 1 23 shock / parameter unordered function fun2 ({x, y, z}) {console.log (x, y, z)} fun2 ({z: 3, x: 2, y: 1}) / / 213 fun3 / Parameter has a default value function fun3 ([axiom1recoverb]) {console.log (aformab);} fun3 ([, 3]) / / 13 talking about application

Extract json data

Several applications for deconstructing assignment are listed above, of which the second is the most commonly used one, which is to extract json data. The data passed from the back end to the front end is json data. The front end usually assigns the data to an object.

Extensible operator.

I used it when I was doing exercises on leetcode. I used arr.push (. Arr1) to merge two arrays, a bit like the shallow cloning and merging above. Compared with our previous operations of merging arrays, this is simply not too simple.

Question 88, merge two ordered arrays.

Var merge = function (nums1, m, nums2, n) {nums1.length=m; nums2.length=n; nums1.push (.nums2); let arr=nums1.sort ((return b) = > {return amurb;}) return arr;}

... This operator traverses the data in the array and copies it to the current object.

Arr.push (... arr1) this method parses all the array elements of arr1, and then adds them to arr in turn to complete the merging of the two arrays.

Swap variable value

Looking at the application of swapping variable values, I vaguely remember an upperclassman's interview question: swapping the values of an and b without taking up extra memory space. At that time, there were two solutions, one was to use XOR, and the other was to use mathematical methods to add ab and then subtract it separately. Is it possible to use this method of deconstructing symbols [aforce b] = [bforce a] now?

That's all for "how to use the JavaScript ES6 deconstructing operator". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.