ES6语法 中的解构赋值基本知识及应用

一、概念

解构赋值：让左侧出现和右侧值相同的结构，以此快速获取到我们需要的内容
应用：对数组和对象的结构赋值，尤其是对于复杂结构想要获取到某个值 解构赋值很使用

二、数组的解构赋值

1、...x扩展运算符：把剩下的内容存储到x中（x是个数组），但他只能出现在最后

let ary=[10,20,30,40,50];
//一般情况下我们想要获取到ary里的值
let n=ary[0],m=ary[1],x=ary.slice(2);
console.log(n,m,x)//10 20 [30, 40, 50]
//用解构赋值
let [n,m,...x]=ary;
console.log(n,m,x)//10 20 [30, 40, 50]

2、如果没有这一项我们可以基于等号赋值默认值

ary=[10,20,30,40,50];
let [n, ,m, , ,x=0]=ary;
console.log(n,m,x)//10 30 0

3、多维数组解构赋值

let ary=[10,[20,30,[40,50]]];
let [n,[,,[,m]]]=ary;
console.log(n,m)

三、对象的解构赋值

1、对象的解构赋值 创建的变量需要与属性名称保持一致（默认）

let obj={
    name:'liu',
    age:18,
    sex:'girl',
    friends:['li','zhang','guo','chen']
};
let {name,sex，nianling}=obj;
console.log(name,sex);//"liu" "girl" undefined

2、冒号相当于给获取的结果设置了一个别名（变量名）：创建了一个叫做nianling的变量存储了obj.age的值

let obj={
    name:'liu',
    age:18,
    sex:'girl',
    friends:['li','zhang','guo','chen']
};
let {name,sex,age:nianling}=obj;
console.log(name,sex,nianling);//"liu" "girl" 18

3、 给获取的结果设置默认值（没有这个属性走的是默认值）

let obj={
    name:'liu',
    age:18,
    sex:'girl',
    friends:['li','zhang','guo','chen']
};
let {
    height='180cm'
}=obj;
console.log(height);//"180cm"

三、应用实战

//从服务器获取的DATA 数据
let data={
    "code":0,
    "data":{
        "today":"2019-08-07",
        "data":[{
            "date":"2019-07-17",
            "number":"17",
            "weekday":"\u661f\u671f\u4e09"
        },{
            "date":"2019-07-18",
            "number":"9",
            "weekday":"\u661f\u671f\u56db"
        }]
    },
    "version":"179651561651651651651"
}
let {
    code,
    data:{
        today,
        data:calendarData
    }
} = data;
console.log(code,today,calendarData);//0 "2019-08-07" (2) [{…}, {…}]
//获取calendarData数组里的值：方法一
calendarData.forEach(item=>{
    let {
        weekday,
        date
    } = item;
    console.log(weekday,date)
})
//打印结果：
//星期三 2019-07-17  
//星期四 2019-07-18

//获取calendarData数组里的值：方法二
calendarData.forEach(({weekday,date})=>{
        console.log(weekday,date)
})
//打印结果：
//星期三 2019-07-17  
//星期四 2019-07-18

注：笔记源于珠峰培训