2017年1月17日 星期二

[筆記] JavaScript ES6 中的物件的擴展(object literal extension)


在 ES6 中,對於物件的使用有了更彈性的應用,除了撰寫物件的方式變得更為精簡之外,更允許將屬性名稱指定為變數,以達到動態賦予屬性名稱的效果,讓我們來看看在 ES6 中物件的擴展吧。

物件的擴展(object literal extension)


在 ES6 中允許在物件中直接給變量,這時候物件的屬性名稱為變數的名稱,物件的屬性值為變數的值,讓我們來看一下這個例子:


let website = "pjchender";
let obj = {website};
console.log(obj);    //[Object]{website: "pjchender"}


這時候變數的名稱(website)會變成物件的屬性名稱,變數的值("pjchener")會變成物件的屬性值。實際上,let obj = {website} 也是一種縮寫,完整的寫法會是 let obj = {website:website} 它實際上對應的關係如下圖所示:


也因此,如果我們輸入如下的程式碼:


let website = "pjchender";
let obj = {abc:website};
console.log(obj); // [object]{abc: "pjchender}


建立出來的物件,他的屬性名稱就會是 "abc" 而不是 "website"。

我們可以用同樣的方式為多個物件的屬性賦值:


let website = "pjchender";
let country = "Taiwan";

let obj = {
  website,
  country
};
console.log(obj); // [object]{country: "Taiwan", website: "pjchender"}


在 object literal 中所賦予的值,會覆蓋掉在更上 let 的宣告:


let name = "PJCHEN";
let country = "Taiwan";

let obj_es6 = {
  name: "Aaron",
  country,
}

console.log(obj_es6); // [Object]{name: "Aaron", country: "Taiwan"}


從這裡我們可以看到最後 name 這個屬性值會是 Aaron 而不是 PJCHEN。

物件中的方法也可以簡寫


除了物件中的屬性可以簡寫外,物件中的方法也可以透過這樣的方式簡寫(第8-10行),例如:


let name = "PJCHEN";
let country = "Taiwan";

let obj = {
  name,
  country,
  location(){
    console.log(this.name + ' lives in ' + this.country);
  }
}

obj.location();  // PJCHEN lives in Taiwan


這樣方法的簡寫,原本的寫法如下:

let obj = {
  name: name,
  country: country,
  location: function(){
    console.log(this.name + ' lives in ' + this.country);
  }
}


另外,還有一點需要注意的是,這樣簡寫的方法,預設的屬性名稱會是字串的型態,也因此原本的簡寫 location( ){...} 等同於 'location'( ){...}

在 ES6 中允許將表達式作為屬性名稱,以達到動態賦值的效果


在 ES6 中,允許將表達式作為屬性的名稱,只需要使用 [ ] 就可以了,方法如下:


let obj_es = {
  ["web"+"site"]: "pjchender"
}
console.log(obj_es); // [Object]{website: "pjchender"}


透過這樣的方式,我們更可以去動態賦予屬性名稱:



let websiteName = "pjchender";
let a = 2;
let b = 3;

let obj_es = {
  [websiteName]: "welcome",
  [a+b]: "sumNumber"
}
console.log(obj_es);  // [Object]{5: "sumNumber", pjchender: "welcome"}



透過 [ ] 的方式,我們的屬性名稱就可以放入變數,以達到動態給予屬性名稱的效果。

Share:

0 意見:

張貼留言