ES6-对象的解构赋值

一.概念：结构匹配（左右都是对象形式），属性相同的完成属性值赋值，不论属性名的书写顺序。

const {sex: b age: a} = { age: 18, sex: '男' };
        console.log(a, b);//18 '男'
//---------------------------------------------

const { age: age, sex: sex } = { age: 18, sex: '男' };//属性名和常量名可以一样,因为属性名默认是字符串类型的，符合标识符命名规范就可以省略''

        console.log(age, sex);//18 '男'

//属性名和变量、常量名一样，上面的可以简写为以下：

const { age, sex } = { age: 18, sex: '男' };

//------------------------------------------------

const {age} = {sex:1}//这样也是可以，没规定属性名要对上，age打印是undefined

 二.注意事项

1.默认值

①生效条件：对应的属性值===undefined

②如果解构赋值右边对象没有这个属性，那么就相当于undefined；const{age，sex}={}；此时打印age和sex都是undefined；

③简写形式（属性名和变量常量名一样）的默认值语法

const { age='未知', sex='未知' } = { age: 18, sex: '男' };
        //const { age: age='未知', sex: sex='未知' } = { age: 18, sex: '男' };//和上面等价

③默认值是表达式惰性求值，这点和数组解构赋值相同

2.将已经声明的变量用于解构赋值，赋值过程需要在圆括号中进行

 let a = 1;
        {a}={a:1};//报错，因为浏览器认为{}是代码块
//---------正确写法-----------
let a = 1;
        ({ a } = { a: 1 });
//----------------------
let { a } = { a: 1 };//前面有let时是没问题的
//---------------------
 let a = 1;
[a] = [1];//数组解构赋值这样写，没问题不报错

3.可以取到继承的属性(其原型链上原型的属性、方法)

打印Object.prototype

 

 

 

 

 

 字面量创建的对象本质也是new Object（）出来的；

const { toString } = {};
        console.log(Object.prototype);
        console.log(toString);//ƒ toString()

三.应用

1.函数参数的解构赋值

const fn = ({ a=0, b=0 }) => {//参数括号不能省略，会报错，形参是{a=0,b=0}这个整体
            console.log(a, b);//1,2
        }
        fn({ a: 1, b: 2 });

2.复杂的嵌套

 const obj = {
            x: 1,
            y: [2, 3, 4],
            z: {
                a: 5,
                b: 6
            }
        };
        const {
            y: y,
            y: [, , yy],
            z: z,
            z: {
                a: a,
                b: b
            }
        } = obj;
        // 属性值相同的进行属性值赋值y=[2, 3, 4] 、[, , yy]= [2, 3, 4]、z= { a: 5, b: 6 }、{a:a,b:b}={a:5,b:6}
        //[, , yy]= [2, 3, 4]、{a:a,b:b}={a:5,b:6}又构成了解构赋值，yy ,a ,b 也是const声明的；

注意：解构赋值左边，同一属性名可以写多次（比如这里的y，z），不影响匹配赋值；