ES6 --- deconstruction assignment

1. summary

• Deconstructing assignment is an extension of assignment operator , Is a high-level way to declare variables

• in the light of Array or object Pattern matching , And then assign values to the variables

• Simple and easy to read in code writing , The meaning is clearer ; It is also convenient to obtain data fields in complex objects

2. Deconstruction model

• The source of deconstruction ： Deconstruction of assignment expression On the right part .

• The goal of deconstruction ： Deconstruction of assignment expression On the left part .

3. Deconstructive grammar

• Variable modifier Data model = data source

---

( One ) The deconstruction of array model （Array）

• basic

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1 2 3

var arr=[100,200]
var [a,b]=arr
// Implicit code : var a=arr[0]
//         var b=arr[1]

 var [name,{age}]=arr
// Implicit code ：var name=arr[0]
//         var age=arr[1].age

 function useState(num){
          return []
}
var [count,setCount]=useState(0)
// Implicit code ：var count=[][0]
//         var setCount=[][1]

function useState(num){
            function fn(){}
            return [num,fn]
 }

var [count,setCount]=useState(10)
console.log(count)//10
setCount(2000)
console.log(count)//2000

// Formal parameters are assigned by deconstruction 
function fn({x,y}){
     console.log(x)
     console.log(y)
}
var obj={x:100,y:200}
fn(obj)

 function fn(){
      return [100,function(arg){}]
 }
 let [ped,setpwd]=fn()
 setpwd(pwd)

• Can be nested

let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c); //1 2 3

 let [a,{son:[{age,s2:{son:[x1,y1]}]}]=obj
    // Implicit code 
    // let y1=obj[1].son[0].s2.son[1]

• Negligible

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

• Incomplete deconstruction

let [a = 1, b] = []; // a = 1, b = undefined

• Remainder operator

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

• character string

// In the deconstruction of arrays , If the object of deconstruction is an ergodic object , Can be deconstructed and assigned . The traversable object implements  Iterator  Interface data 
let [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o

• Deconstruct default

// Deconstruction has default values    Just pass it on =20
let obj={}
let {a=20}=obj
console.log(a)

let [a = 2] = [undefined]; // a = 2
 When deconstruction patterns have matching results , And the matching result is  undefined  when , The default value is triggered as the return result .

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

1. a  And  b  The matching result is  undefined , Trigger default ：a = 3; b = a =3
2. a  Normal deconstruction assignment , Matching results ：a = 1,b  Matching results  undefined , Trigger default ：b = a =1
3. a  And  b  Normal deconstruction assignment , Matching results ：a = 1,b = 2

( Two ) The structure of the object model （Object）

• basic

 var obj={aeg:21,name:"lili"}
 var {age,name}=obj
 // Implicit code : var age=obj.age
 //         var name=obj.name
 console.log(age)
 console.log(name)

var {x1,x2}=obj2
// Implicit code  var x1=obj.x1
//        var x2=obj.x2


var {x1:{x2},x3}=obj3
// Implicit code var x1=obj3.x1
//        var x2=obj3.x1.x2  // When obj3={}  when   This line will report an error  x1 by undefined  You can't .x2 operation 
//        var x3=obj.x3

• Can be nested and ignored

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

• Incomplete deconstruction

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

• Remainder operator

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

• Deconstruct default

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;