Deconstruction of ES6 [transfer]

The article is transferred from a deep understanding of the deconstruction of ES6,
which is only for your own study and comparison;

One: Why use deconstruction:

Before extracting data objects, you need to assign values ​​one by one. It may be possible to mine the entire organization for a small data. ES6 adds deconstruction to arrays and objects to facilitate data extraction.

Two: object deconstruction:

1:

let node = {
    type:"node",
    name:"haha",
 }
 let {
  
  type,name} = node;
 console.log(type)//"node"
 console.log(name)//"haha"
 
 
  
  

Note : When the calculation result of the right side of the destructuring assignment expression (the right side of the equal sign) is null or undefined, an exception will be reported. Because any Tawau that reads nul or undefined results in a runtime error.
2: default value

let {
  
  type,name,value} = node;
 console.log(type)     //"node"
 console.log(name)   //"haha"
console.log(value)    //undefined
let {
  
  type,name,value="vvvv"} = node;
console.log(value)    //"vvvv"
 
 
  
  

3: Assign to different local variable names

let node = {
    type:"node",
    name:"haha",
 }
let {
  
  type:localtype,name:localname="wuyunqiang"} = node;
console.log(localtype);       //"node"
console.log(localname);     //"haha"
 
 
  
  

4: Nested Pushes to Destructuring

let node = {
     type:"id",
     name:"haha",
       loc:{
         start:{
            line:1,
            column:1
         },
         end:{
           line:1,
           column:4
         },
      }
}
let {loc:{start}} = node;
console.log(start.line)
console.log(start.column)
 
 
  
  

Three: Array deconstruction:

Array destructuring is similar to object destructuring. Objects retrieve values ​​based on keys, and arrays retrieve values ​​based on positions.
1: assign value according to position index

let colors = ["red","green","blue"];
let [ , second] = colors;
console.log(second)//"green"
 
 
  
  

2: for value exchange

ES6 之前
let a = 1 ;
let b = 2;
let tmp;
tmp =a; a= b;b= tmp;
console.log(a)//2
console.log(b)//1

ES6之后
let a = 1; let b = 2;
[a,b] = [b,a];
console.log(a)//2
console.log(b)//1

3: default nested index like object
4: remaining items

let colors = ["red","green","blue"];
let [first ,...rest] = colors;
console.log(first);             // "red"
console.log(rest.length)   // 2
console.log(rest[0])          //"green"
 
 
  
  

Four: Mixed deconstruction:

Object and array destructuring can be used together.

let node = {
     type:"id",
     name:"haha",
       loc:{
         start:{
            line:1,
            column:1
         },
         end:{
           line:1,
           column:4
         },
      }
   range:[0,3]
}
let {loc :{start},range:[startindex]}=node;
console.log(start.line); // 1
console.log(startindex) // 0
 
 
  
  

Using a mix of object and array destructuring, any part of a node can be extracted. This approach is especially useful for extracting data from JSON configuration structures, as it does not require exploring the entire structure.

Five: Parameter deconstruction:

Parameter structures provide an alternative to more clearly specifying what a function expects as input. It uses object or array patterns instead of named parameters.

function setCookie(name,value,{secure,path,domain,expires}){
   
   //设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})
 
 
  
  

Note :
1: The parameters of the structure are required, otherwise an error will be reported
2: The parameter structure can also be set to a default value

function setCookie(name,value,{
    secure=true,
    path="xxxx",
    domain="xxxx",
    expires=20000
}={}){
   
   //设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})