對象的解構賦值

一、對象的解構賦值有順序嗎

對象的解構賦值是按照屬性名來解構的，屬性名相同的情況下，後面的解構會覆蓋掉前面的解構。

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的值。