Learn deconstruction

aims

• Deconstruction objects
• Deconstruction array
• Associative array objects and deconstruction deconstruction
• Understand the type of deconstruction

Think

/*
    第一部分建立数据解构，第二部分分解数据解构清
*/

//不需要结构化就可以创建数据结构
let person=new Object();
person.name=new Object();
person.name.first='East';
person.name.last="Boat"
//不需要解构就可以分解数据结构
let firtName=person.name.first;
let lastName=person.name.last;

/*
问题：使用对象字面量我们可以理简化创建步骤。但时分解的步骤呢？？？
    let person={
        name:{
            first:"East",
            last:"Boat"
        }
    }

*/
复制代码

Deconstruction objects

Use deconstructed deconstructed sentence structure data, the attribute extraction namee

let person={
    name:"EastBoat"
}

let {name}=person
console.log(name) // EastBoat
复制代码

The more complex cases with more able to see advantages

let person={
    name:"EastBoat".
    age:18
}
let {name,age}=person;
/*
    想到于ES5代码
    let name=person.name;
    let age=person.age;
*/
复制代码

Using aliases

/*
ES5语法：
    let firstName=person.name;
    let yearsOld=person.age;
*/
let {name:firstName,age:yearsOld}=person;
复制代码

Nested deconstruction, in-depth internal data structures

Use key: {otherKeys} indicates to drill lock key, pulled out therefrom otherKey

let dog={
    handle:{
        width:'20cm',
        height:'20cm'
    },
    footer:{
        width2:'100cm',
        height2:'100cm',
    },
    age:2
}

let {handle:{width,height},footer:{width2,height2},age}=dog;
console.log(width); //20cm
console.log(height); //20cm
console.log(width2); //100cm
console.log(height2); //100cm
console.log(age); // 2

//获取属性时重命名
let {handle:{width:handleWidth,height:handelHeight},footer:{width2,height2},age}=dog
console.log(handleWidth);
console.log(handelHeight);
console.log(width2);
console.log(height2);
console.log(age);
复制代码

Deconstruction array

And objects as deconstruction, deconstruction of the array is an array of construction and contrary grammar

let arr=[1,2,3];
let [a,b,c]=arr
console.log(a,b,c);  //1,2,3
复制代码

Nested deconstruction

let arr=[1,2,3,[10,11,12]];
let [a,b,c,[e,f,g]]=arr
console.log(a,b,c); //1,2,3
console.log(e,f,g);  //10,11,12
复制代码

Array deconstruction gets the first value in the array

//ES5语法
let first=arr[0];

//ES6语法
let [first]=arr;
复制代码

Exchange value

Do not use a third temporary variable

if(stop<start){
    [start,stop]=[stop,start] //交换
}
复制代码

note

Deconstruction array index value and closely linked, the value stored in the reverse sequence when the array, just the reverse order of the names in the deconstruction

Associative array objects and deconstruction deconstruction

Key: numbers is a branch, a, b, c, d, e is the leaves, the leaves will not only create variables

let person={
    numbers:[20,30,-10,2,4]
}
let {numbers:[a,b,c,d,e]}=person;
console.log(a,b,c,d,e); //20 30 -10 2 4
复制代码

Deconstruction can type

• May even be an array deconstruct any object
• Array can not serve as a valid variable name, so you need to rename these numbers when deconstructed assignment

const {0:a,1:b,length}=['foo','bar']
console.log(a) //foo
console.log(b); // bar
console.log(length); //2
复制代码

Opening answer questions

//ES6解构赋值
let person={
    name:{
        first:'East',
        last:'Boat'
    }
}
let {name:{first:firstName,last:lastName}}=person
console.log(firstName); //East
console.log(lastName);  //Boat
复制代码

Key summary:

1. Deconstruction is retrieved from the data structure worthy of syntactic sugar
2. Deconstruction and Construction of objects or array literal syntax contrary
3. Deconstruct objects specified by the value of the property name
4. Array index value specified by the deconstruction
5. The same data structure, may be combined and nested deconstruction
6. In the case of nested deconstructed, retrieve only leaves (not branched)