Deconstruction symbol

preface

Recently, I have been learning JavaScript, and I saw the deconstructive symbols in ES6. I think this has brought a leap forward to the simplicity of our code, and it has been applied in enterprise development. If you work in the future, others are using it, but you can’t read their code, it will cause a great impact. So study up.

Right, you don’t have to, but you can’t

There are many features in JavaScript ES6 that are designed to simplify code and make it easier for programmers to write. Deconstruction operators are a good feature, which can make code cleaner and more readable by reducing the use of assignment statements, or by reducing access to data subscripts and object properties.

Deconstruct what symbols do

Destructible assignment is an extension of the assignment operator, which is a pattern matching method for arrays or objects and then assigning values to variables within them

ES6 allows extracting values from arrays and objects and assigning values to variables in a pattern known as deconstruction

Method of use

• The basic use

  let [a,b,c] = [1.2.3];
  // let a = 1, b = 2, c = 3;
  Copy the code

• Use nested

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

• ignore

  / / array
   let [a, , b] = [1.2.3];
  	console.log(a); / / 1
  	console.log(b); / / 3
  
  / / object
   let obj = { x: ['hello', { y: 'world'}};let { x: [x, { }] } = obj;
  	console.log(x); // hello
  Copy the code

• 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
  Copy the code

• Residual operator

  / / array
   let [a, ...b] = [1.2.3];
  	console.log(a); / / 1
  	console.log(b); / / [2, 3]
  
  / / 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 }
  Copy the code

• string

   let [a, b, c, d, e] = 'hello';
  	console.log(a); // h
  	console.log(b); // e
  	console.log(c); // l
  	console.log(d); // l
  	console.log(e); // o
  Copy the code

• Deconstruct default values

  // When the destruct pattern has a match and the match is undefined, the default value is triggered as the return result.
   let [a = 2] = [undefined]; 
  	console.log(a); / / 2
  / / object
  let {a = 10, b = 5} = {a: 3};
   	console.log(a); / / 3
   	console.log(b); / / 5
  Copy the code

• Swap the values of variables.

   let a = 1;
   let b = 2;
   [a,b] = [b,a];
   	console.log(a); / / 2
   	console.log(b); / / 1
  Copy the code

Deconstruct the application of assignment

// 1. Shallow cloning and merging
let name = { name: "aaa" }
let age = { age: 'bbb' }
letperson = { ... name, ... age }console.log(person) // { name: "aaa", age: 'bbb' }

let a = [1.2.3];
let b = [4.5];
let c = [...a,...b];
console.log(c); / / [1, 2, 3, 4, 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
// The parameters are ordered
function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1.2.3]); / / 1 2 3

// The parameters are unordered
function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3.x: 2.y: 1 }); / / 1 2 3

// The parameters have default values
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3]) / / 1 3
Copy the code

Introduction to the application

Extracting JSON data

There are several applications for deconstructing assignment listed above. The most common one is to extract JSON data. The data that is passed from the back end to the front end is JSON data.

Extensible operators.

I used it in leetCode. I used arr.push(… Arr1) to merge two arrays, similar to the shallow clone and merge shown above. This is not too easy compared to what we’ve been doing with merging arrays.

Problem 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((a,b) = >{
        return a-b;
    })
    return arr;
};
Copy the code

. This operator iterates over the data in the array and copies it into the current object.

arr.push(… The arR1 () method parses all the elements of the arR1 array and adds them to the arR.

Exchange variable value

Looking at the swap variable values application, I vaguely remember an interview question from an upperclass student: swap the values of A and B without taking up extra memory space. (a=a+b,b=a-b,a=a-b) (a=a+b,b=a-b,a=a-b) (a=a+b,b=a-b)