解构赋值

什么是解构?: es6中按照一定的模式,从数组或者对象中提取值

// a): 如果是数组解构,则写 [] 模式
// b): 如果是对象解构,则写 {} 模式
// c): 从数组中和对象中取值v

解构赋值作用?

// 更简单的从数组中和对象中取值(减少代码量)

演示数组解构:

// 语法:  let [变量1, 变量2, 变量3, ....] = 数组

let ary = ['a', 'b', 'c', 'd', 'e'];
// let a = ary[0];
// 解构赋值
let [test1, ...hehe] = ary;
console.log(test1);
console.log(hehe);
// console.log(test2);
// console.log(test3);

数组解构赋值总结:

// 1. 本质就是将数组中的依次取出分别赋值给前面的变量
// 2. 如果数组解构赋值,左侧的变量少于数组中的值,那么最后的结果依然是一一对应显示
// 3. 如果数组解构赋值,左侧的变量多余数组中的值,那么多余的变量就是undefined
// 4. 在数组解构赋值中,依然可以使用 ...语法,表示的是剩余的值,以数组的形式保存
// 5. 如果在数组解构赋值中使用..., 必须放到最后
// 6. 数组解构就是将数组中的每一个值取出赋值给另外的变量

对象解构赋值:

    //本质: 就是将对象中的属性或方法取出赋值给另外一个变量
    //语法: let {属性名: 变量1, 属性名: 变量2 } = 对象

    // 举例演示对象解构赋值
    let People = {
        uname: '老段',
        uage: 29,
        ugender: '男'
    }
    // let {uname: a, uage: b, ugender: c} = People;
    // console.log(a);
    // console.log(b);
    // console.log(c);

对象解构赋值总结:

    // a): 对象解构赋值中,属性名必须和对象中的属性保持一致(如果不一致则为udefined)
    // b): 对象解构赋值中,如果属性名和变量名一致,则可以省略不写变量名

    let People = {
        uname: '老段',
        uage: 29,
        ugender: '男'
    }
    //  let {uname: uname, uage: uage, ugender: ugender} = People;
    //  可以按照如下写法
    // let {uname, uage, ugender} = People;
    //思考:
    let {uname, userage, ugender} = People;
    console.log(uname, userage, ugender);

演示

let People = {
uname: ‘zs’,
}
// 在对象People中虽然没有gender,但是给gender设置了一个默认值
let {uname, gender = ‘男’} = People;
// 问题是:
console.log(uname); //? zs
console.log(gender); //? 男

    //注意: 在对象解构赋值中,如果对象中有该属性,则就是该属性对应的值
    // 在对象解构赋值中,如果对象中没有该属性,且给该属性设置了默认值,则最后的
    // 的结果就是默认值

let People = {
uname: ‘zs’,
child: {
uname: ‘小明’
}
}
// let {child} = People;
let {child: {uname}} = People;
console.log(uname); //? 小明