【金秋打卡】第8天对象的解构赋值

一、课程名称：前端工程师2022版

二、课程章节：ES6基础入门-解构赋值(3-1 对象解构赋值的原理-慕课网体系课 (imooc.com))

三、课程讲师：Alex

四、课程内容：

对象的解构赋值

1、原理（重点）

（1）模式（结构）匹配{}={}

（2）属性名相同的完成赋值，不要求顺序的前后

1）完整版：如const {'age':age,'username':username}={username:'Alex',age:18};

2）可以进行简写，如const {age,username}={username:'Alex',age:18};

3）同时还可以取别名，如const { age: age, username: uname } = { username: "Alex", age: 18 };

2、注意事项

（1）默认值的生效条件：对象的属性值严格等于undefined时，对应的默认值才会生效

const { username = "ZhangSan", age = 0 } = { username: "alex" };//右边相当于隐藏了一个

age:'undefined'

console.log(uesrname,age);    //'alex' 0

（2）默认表达式：如果默认值是表达式，默认值表达式是惰性求值的

（3）将一个已经声明的变量用于解构赋值：整个赋值需要在圆括号中进行，因为浏览器会误认为花括号内是块级作用域而报错，所以一定要添加圆括号，如({x}={x:1})，而数组则不需要添加圆括号

（4）可以取到继承的属性：如可以取得Object的toString属性

const { a = 1 } = {};

const { toString } = {};

console.log(toString);

console.log(Object.prototype);

console.log({});

（5）对象的解构赋值中，与顺序无关，需要注意的是，变量名与属性名必须一致

3、应用（重点）

（1）函数参数的解构赋值

、

     // 原来的写法

        const logPersonInfo = (user) => console.log(user.username, user.age);

        logPersonInfo({ username: "alex", age: 18 });

      // 现在的写法，注意还可以设置默认值

        const logPersonInfo = (age, username) => console.log(username, age);

        logPersonInfo({ username: "alex", age: 18 });

      // 相当于{'age':age,'username':username}={username:'alex',age:18};

（2）复杂的嵌套：一一对应

 const obj = {

        x: 1,

        y: [2, 3, 4],

        z: {

          a: 5,

          b: 6,

        },

      };

      // const {x,y,z}=obj;

      // console.log(x,y,z);

      const {

        y,

        y: [, yy],

        z: z,

        z:{

            b:b

        }

      } = obj;

      console.log(yy, y, z);//3 (3) [2, 3, 4] {a: 5, b: 6}

      // [,yy]=[2,3,4],yy对应的是第二位，只需要在前面加一个逗号表示清楚即可

五、课程收获：

今天学习了对象的解构赋值，联系前面的数组的解构赋值相关的知识点还是比较好理解这一块知识的，应用的逻辑理解也是比较容易的，今天也是收获满满，继续加油！