2017年1月16日

[筆記] JavaScript ES6 中的物件解構賦值（object destructuring）

      , , ,  

在上一篇文章中我們說明了 ES6 當中如何使用陣列解構賦值（[筆記] ES6 中的陣列解構賦值（array destructuring）），這篇我們一樣著重在解構賦值的部分，進一步說明如何以物件解構賦值（object destructuring）。

物件解構賦值的基本使用


物件解構賦值的基本使用方法如下：


let obj = {
  website: "pjchender",
  country: "Taiwan"
}

let {website, country} = obj;
console.log(website);  // pjchender
console.log(country);  // Taiwan

在這當中有一個很重要的點，陣列的解構賦值強調的順序，而物件的解構賦值強調的則是屬性名稱，屬性名稱必須相互對應才能夠取得到值。

物件解構賦值的寫法看似簡單，但實際上，在上面這段程式碼中 let {website, country} = obj ，實際上完整的寫法應該是像這樣子（也就是說上面那段程式碼是簡寫）：


let {website:website, country:country} = obj;

它會根據前面的屬性名稱來對應要給的值，但值其實是給冒號（：）後面的變數，用圖來看像是這樣子：


所以真正被建立和賦值的 let{ } 當中，冒號（：）後的變數。

我們可以透過另一個例子更容易了解這個概念：


let obj = {
  website: "pjchender",
  country: "Taiwan"
}

let {website:wb, country:ct} = obj;

console.log(website, country);   //  Error:website in not defined
console.log(wb, ct)  // "pjchender", "Taiwan"

我們把冒號後的內容改寫成 wb 和 ct，接著我們會發現，當我們呼叫原本的變數 website 和 country 時，會回報 error；但是當我們呼叫 wb 和 ct 這兩個變數時，則能夠正確回傳變數值，也就是說，在物件解構賦值中，冒號前是用來對應物件的屬性名稱，冒號後才是真正建立的變數名稱和被賦值的對象。

相對的，當冒號前的屬性名稱對應不到物件中的屬性名稱時，則會出現 undefined：


// website 和 wb 並沒有相對應
let{website} = {wb: "pjchender"};
console.log(website);    // undefined

物件解構賦值是以屬性名稱做對應


和陣列解構賦值不同的是，在陣列解構賦值中，我們可以接受下面這樣的寫法：


let [a, , c] = [1, 2, 3];
console.log(a, c); // 1, 3

但是在物件解構賦值中，我們不能像上面這樣寫：


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

之所以會回報錯誤，主要的原因是在陣列的解構賦值強調的是順序，而物件的解構賦值強調的則是屬性名稱，屬性名稱必須相互對應才能夠取得到值

物件解構賦值同樣能給予預設值


和陣列的解構賦值一樣，物件的解構賦值也能賦予預設值，方法如下：

此範例擷取自阮一峰-ECMAScript 6 入門

物件解構賦值的用途


物件解構賦值的用途相當多（可參考阮一峰-ECMAScript 6 入門），其中在提取 JSON 數據時相當方便：


let data_JSON = {
  id: 74,
  website: "pjchender",
  country: "Taiwan",
  detail:{
    add: "Tainan",
    phone: "0933333333"
  }
}

let {id, website, country, detail} = data_JSON;
console.log(id, website, country, detail);

如此就能夠快速提領出 JSON 物件的屬性名和屬性值。

資料來源：

0 意見:

張貼留言