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 物件的屬性名和屬性值。

Share:

0 意見:

張貼留言