JavaScript 物件解構賦值

ES2015提供瞭解構賦值功能，使之前較為複雜的操作變得更為簡單，本文介紹其中的物件解構賦值。

關於其他解構賦值功能，參閱本站的其他相關文章。

首先看一段簡單的程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
let {web:webName,age:webAge}={web:"螞蟻部落",age:6};
console.log(webName);
console.log(webAge);

谷歌控制檯執行效果截圖如下：

程式碼分析如下：

（1）.之所以叫物件解構賦值，賦值運算子兩側都是物件直接量形式，很好理解。

（2）.變數webName和age都賦值成功。

上面對ES2015物件結構賦值有了一個初步的瞭解，下面再進行一下深入介紹。

一.物件結構賦值簡化：

物件直接量在ES2015中進行了優化，更多內容可以參閱ES2015物件新增特性一章節。

首先看一下ES2015之前的寫法：

[JavaScript] 純文字檢視 複製程式碼
let webName = "螞蟻部落";
let age = 6;
let obj = {
  webName:webName,
  age:age
}
console.log(obj.webName);
console.log(obj.age);

谷歌控制檯執行效果截圖如下：

程式碼是ES2015之前寫法，列印結果毫無疑問，更多物件直接量內容參閱JavaScript 物件直接量一章節。

使用ES2015簡易寫法改造上述程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = "螞蟻部落";
let age = 6;
let obj = {
  webName,
  age
}
console.log(obj.webName);
console.log(obj.age);

上述程式碼是縮寫形式，同樣實現了物件屬性的賦值效果，谷歌控制檯執行效果截圖如下：

特別說明：並不是所有的情況都適用簡寫形式，只有當作為屬性值的變數名稱與屬性名稱相同時才適用。

那麼物件解構賦值的簡寫形式就非常容易理解了，先看一個非簡寫程式碼：

[JavaScript] 純文字檢視 複製程式碼
let {web:web,age:age}={web:"螞蟻部落",age:6};
console.log(web);
console.log(age);

谷歌控制檯執行效果截圖如下：

上述程式碼簡化如下：

[JavaScript] 純文字檢視 複製程式碼
let {web,age}={web:"螞蟻部落",age:6};
console.log(web);
console.log(age);

谷歌控制檯執行效果截圖如下：

二.物件解構賦值無順序要求：

物件結構賦值對屬性的順序無要求，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let {age:age,web:web}={web:"螞蟻部落",age:6};
console.log(web);
console.log(age);

谷歌控制檯執行效果截圖如下：

由控制檯列印結果可以得出，屬性的順序無關緊要。

如果沒有找到同名屬性，那麼變數的值為undefined，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let {age:age,web:web}={web:"螞蟻部落",address:"青島市南區"};
console.log(web);
console.log(age);

谷歌控制檯執行效果截圖如下：

三.變數宣告與賦值可以分開進行：

前面所有程式碼都是宣告變數的同時進行賦值，當然我們也可以分開進行:

[JavaScript] 純文字檢視 複製程式碼
let url;
({ url } = { url: "www.softwhy.com" });
console.log(url);

注意小括號很重要，如果沒有小括號，那麼{}就會被解讀為語句塊。

[JavaScript] 純文字檢視 複製程式碼
let obj = {
  web: [
    4,
    { webName: "螞蟻部落" }
  ]
};
  
let { web: [age, { webName }] } = obj;
console.log(age,webName);

物件的解構賦值也可以進行巢狀。

四.解構賦值預設值：

[JavaScript] 純文字檢視 複製程式碼
let {web:webName="螞蟻部落"} = {};
console.log(webName);

由於沒有對應的屬性，那麼weName的值就是預設值"螞蟻部落"。

如果變數名稱和變數名稱相同，也可以採用如下寫法：

[JavaScript] 純文字檢視 複製程式碼
let {webName="螞蟻部落"} = {};
console.log(webName);

預設值生效的條件是，對應的屬性值嚴格等於（===）undefined。

[JavaScript] 純文字檢視 複製程式碼
let {webName="螞蟻部落"} = {webName:undefined};
let{url="softwhy.com"}={url:null};
console.log(webName);
console.log(url);

null!==undefined，所以url的值是null，而不是"softwhy.com"。

五.物件解構賦值簡單程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func() {
  let a = 1;
  let b = 2;
  let c = 3;
  return {a,b,c}
}
let {a,b,c}=func();
console.log(a,b,c);

可以很方便一次性從函式中返回多個值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let {log,sin,cos} = Math;
console.log(sin)

很方便的獲取Math物件的方法。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let {toString: toStr} = 5;
console.log(toStr === Number.prototype.toString);

如果等號的右邊是一個值型別資料，那麼會現將其轉換為物件。