ES6系列 (六）解构

目标

• 解构对象
• 解构数组
• 结合数组解构和对象解构
• 了解解构的类型

思考

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

//不需要结构化就可以创建数据结构
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"
        }
    }

*/

解构对象

使用解构语句解构数据结构，提取namee属性

let person={
    name:"EastBoat"
}

let {name}=person
console.log(name) // EastBoat

用例越复杂越能看出优势所在

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

使用别名

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

嵌套解构，深入数据结构内部

使用key:{otherKeys}表示要钻取锁定的key,从中抽离出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);

解构数组

和对象解构一样，数组的解构也是与数组建构语法相反

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

嵌套解构

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

数组解构获取数组第一个值

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

//ES6语法
let [first]=arr;

交换值

不使用第三个临时变量

if(stop<start){
    [start,stop]=[stop,start] //交换
}

注意

数组解构和索引值紧密相连，所以数组时相反的顺序存储值，只需在解构中反转名称顺序

结合数组解构和对象解构

重点：numbers是分支，a,b,c,d,e是叶子，只有叶子才会创建变量

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

可以解构的类型

• 可以对任何对象甚至是数组进行解构
• 数组不能作为有效的变量名，所以解构赋值时需要重命名这些数字

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

解答开篇问题

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

总结重点:

1. 解构是从数据结构中检索值得语法糖
2. 解构与建构对象或数组字面量的语法恰恰相反
3. 对象解构中通过属性名指定值
4. 数组解构中通过索引指定值
5. 与数据结构一样，解构可以组合和嵌套
6. 在嵌套解构的情况下，只检索叶子（而不是分支）