ES6-解构赋值

1、正常赋值

let x = 0;

2、解构赋值

let [a, b] = [0, 1];

• 本质上就是一种模式匹配
• 只要等号两边的模式相同，左边的变量就会被赋予相对应的值

let [x,[y1,y2],z] = [7,[8,88],9];
console.log(x); //7
console.log(y1); //8
console.log(y2); //88
console.log(z); // 9


 // 按位置匹配
let [x, , y] = [1, 2, 3];
console.log(y); // 3


// 解构默认值
let [s = 100] = [, 1000];
console.log(s);

3、对象类型的解构赋值

    //对象
    let obj = {
        names: '娜娜',
        age: 21,
        sex: '女',
        say: function () {
            console.log('你好我是娜娜');
        }
    }
    //ES5 的写法
    // var name1 = obj.name;
    // var age1 = obj.age;

    //ES6 结构对象时，变量名必须和属性名相同，但是顺序没有要求
    let { age, names, say } = obj;
    console.log(names);
    console.log(age);
    say()

4、以对象的形式来解构数组

let arr = [1, 2, 3, 4, 5];
let { [0]: first, 3: aa, [4]: last } = arr;
console.log(first, last, aa);

5、当对象中含有数组时

    //当对象中含有数组时
    let obj1 = {

        data: [0, 1, 2],
    }
    let {
        data,//以变量取出相对应的键值对的值，变量名必须和属性名相同
        data: arrs,//以属性名取出相对应的键值对的值，并将保存在变量 arr中
        data: [aaa, bbb, ccc] // 将上一步的arr 彻底解构
    } = obj1;
    console.log(aaa); // 0
    console.log(bbb); // 1
    console.log(ccc); // 2

6、当对象中含有数组，数组中有含有对象

    let obj2 = {
        datas: [
            {
                ages: 11,
            },
            {
                num: 222,
            }
        ],
    }
    let { datas: [{ ages }, { num }] } = obj2;
    console.log(ages, num); // 11   222

7、解构字符串时，会将字符串当作一个数组来解构

    let str = 'HelloWold'
    let [a, b, c] = str;
    let { [0]: pp } = str;
    console.log(a); //H
    console.log(b); //e
    console.log(c); //l
    console.log(pp); // H