解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

语法

let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

数组的解构赋值

    let arr = [1,2,3,4,5];
    // let x=arr[0];
    // let y=arr[1];
    // let m=arr[2];
    // let n=arr[3];
    let [x,y,m,n] = arr;
    console.log(x,y,m,n);
    // 设置默认值
    // let [x1,x2=10]=[1];
    // console.log(x1,x2);
    // 是先赋值默认值再被覆盖还是？
    let [X1,X2=(function () {console.log('haha')();return 10;})] = [1,12];
    console.log(X1,X2); // 1 12
    // 只有后面解构的值是undefined的时候才会走默认值

    // 省略赋值
    let [,,m2] = [1,2,3];
    console.log(m2); // 3

    // 不定参数赋值 将湖面的项放在一个数组中赋值给y3
    let [y1,y2,...y3] = [1,2,3,4,5];
    console.log(y3); // array(3,4,5)

对象的解构赋值

  // 如果变量名和属性名一致，可以直接省略写法
    let {name:name,age:age}={name:"珠峰",age: 10}
    let {name,age}={name:"珠峰",age: 10};
    console.log(name,age);

    // 默认值
    let {name,age=100}={name:"珠峰"};
    let {name,age=100}={name:"珠峰",age:undefined};
    console.log(name,age);


    // 嵌套
    let {name,age=100,list:[a1,a2,a3,a4]}={name:"珠峰",age:undefined,list:['JS','NODE','vue','react']};
    console.log(name,age,a1,a2,a3,a4);



    let x1,x2;
    [x1,x2] = [1,2];

    {} 开头是块级作用域不能这样 需要用()括起来
    // let x1,x2;
    // {x1,x2} = {x1:1,x2:2};

    let x1,x2;
    ({x1,x2}= {x1:1,x2:2});
    console.log(x1,x2);

其他数据类型解构赋值

    // 使用数组解构赋值的形式，如果右边不是一个数组，默认将其转换为类数组（类似数组的对象,必须有个Length属性）
    // let [x,y] = '1'; // 不行
    let [x,y] = '123';
    console.log(x,y); // 1 2

    // 适用对象的解构赋值模式 ，如果右边不是一个对象，默认个将其转换为一个对象,再进行解构赋值
    let {a} = 1;
    console.log(a);
    console.log(Object(1)); // 有个{__proto__: } 属性
    let {__proto__:a} = 1;
    console.log(a);

    let {length:b} = '1234';
    console.log(Object("1234"));
    console.log(b);

函数类型机构赋值

    function getA([a,b,c,...d]){
        console.log(a,b,c,d);
    }
    getA([1,2,3,4,5]);  // 1 2 3 [4,5]

    function getB({name,age}) {
        console.log(name,age)
    }
    getB({name:"珠峰",age:10}); // 珠峰 10

    // 默认值
    function getC({name="珠峰",age=100}) {
        console.log(name,age)
    }
    getC({name:"珠峰"}); // 珠峰 100
    getC({}); // 珠峰 100

    // 默认值
    function getD({name="珠峰",age=100}={}) {
        console.log(name,age)
    }
    getD(); // 珠峰 100

    function getD1({name,age}={name:"珠峰",age:100}) {
        console.log(name,age);
    }

    getD();     // 珠峰 100
    getD1();    // 珠峰 100
    getD({});   // 珠峰 100
    getD1({});  // undefined undefined

注意 getD()和getD1()在参数是{}的时候结果是不同的