对象的解构赋值

一、对象的解构赋值有顺序吗

对象的解构赋值是按照属性名来解构的，属性名相同的情况下，后面的解构会覆盖掉前面的解构。

let obj = {a: 1, b: 2, c: 3};
let {a, b, c} = obj;
console.log(b); // 2
let {a: A, b: B, c: C, d: D} = obj;
console.log(B, D); // 2 undefined

在上面的例子中，代码中首先定义了一个对象obj，这个对象有三个属性：a、b和c。接着通过解构赋值将对象的属性分别赋值给了变量a、b和c。然后再次进行解构，将属性名a赋给了变量A，将属性名b赋给了变量B，将属性名c赋给了变量C，属性名d没有对应的值，所以变量D的值为undefined。

二、什么是解构赋值

解构赋值是从数组或对象中提取数据并赋值给变量的一种方式。

通过解构赋值，可以快速的获取数组或对象中需要的部分数据，而不用进行复杂的遍历操作。在ES6中，提供了数组和对象的解构赋值语法，方便了开发者的编码工作。

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(b); // 2
let obj = {name: 'Jack', age: 18};
let {name, age} = obj;
console.log(name); // Jack

在上面的例子中，对数组和对象进行了解构赋值。数组的解构赋值通过中括号来表示，对象的解构赋值通过花括号来表示。

三、对象的解构赋值是浅拷贝吗

对象的解构赋值并不是浅拷贝，而是将原对象中引用类型的属性进行浅拷贝后，将新对象的引用赋给解构赋值语句左侧的相应变量。

let obj = {a: {b: 1}};
let {a} = obj;
a.b = 2;
console.log(obj.a.b); // 2

在上面的例子中，原对象obj中的属性a是一个对象，通过解构赋值将属性a赋值给了变量a。之后，对变量a的属性进行了修改，发现原对象obj中的属性a的值也被修改了。

四、对象的解构赋值会有什么弊端

对象的解构赋值中，如果解构的属性不存在，那么对应的变量将会被赋值为undefined。如果后面的代码使用了这些未定义的变量，那么就会抛出错误。在实际的开发中应该注意解构的属性是否存在。

let obj = {a: 1, b: 2};
let {a, c} = obj;
console.log(c); // undefined

在上面的例子中，代码中尝试解构对象obj的属性a和c。由于属性c在对象中不存在，所以变量c被赋值为undefined。

五、对象结构赋值

对象的结构赋值可以有多层嵌套，也可以使用默认值来避免不存在的属性报错。

let obj = {
  name: 'Alice',
  age: 18,
  scores: {
    math: 80,
    english: 90
  }
};
let {name, age, scores: {math, chinese = 70}} = obj;
console.log(name, age, math, chinese); // Alice 18 80 70

在上面的例子中，对象中的属性score是一个对象，通过使用scores: {math, chinese = 70}的写法，将score中的属性math赋值给了变量math，而chinese设置了默认值70，如果对象中不存在属性chinese，那么变量chinese的值将被赋值为70。

六、对象解构赋值默认值

解构赋值中可以设置变量的默认值，如果解构的属性的值为undefined，那么将使用默认值。

let obj = {a: 1, c: 3};
let {a, b = 2, c} = obj;
console.log(a, b, c); // 1 2 3

在上面的例子中，对象中的属性b是不存在的，通过设置b的默认值为2，如果对象中不存在属性b，那么变量b的值将被赋值为2。

七、解构赋值避免了临时变量或对象选取

解构赋值可以很方便地获取数组和对象中需要的部分数据，避免了使用临时变量或对象属性选取的操作。

let arr = [1, 2, 3];
let [,,c] = arr;
console.log(c); // 3
let obj = {name: 'Jack', age: 18};
let {name} = obj;
console.log(name); // Jack

在上面的例子中，数组中通过解构赋值获取了变量c的值，对象中通过解构赋值获取了变量name的值。