Object 轉成 Array 後,各種應用就出現了

由於 ECMAScript 提供了 Object Literal,因此建立 object 非常簡單,特別適合將 function 的 argument 以 object 表示,又由於 ECMAScript 的 object 與 array 非常類似,若能將 object 轉成 array,就能善用 Array.prototype 下豐富的 method。

Version


ECMAScript 2017

Object.entries


1
2
3
4
5
6
7
var foo = {
firstName: 'Sam',
lastName: 'Xiao',
};

Object.entries(foo)
.forEach(item => console.log(`${item[0]}: ${item[1]}`));

使用 Object Literal 宣告 foo object,再使用 ECMAScript 2017 的 Object.entries() 將 object 轉成 array,如此就能使用 Array.prototype.forEach() 等方式處理 object。

object000

Practice


實務上該怎麼使用這個特性呢 ? 傳統我們喜歡將 arguement 以 primitive type 傳入 function,但這樣很容易造成 parameter 個數爆炸,也就是 Refactoring 所謂的 Primitive ObsessionLong Parameter List 兩個 Code Smell。

若 argument 改用 object 方式傳遞,則 function 會清爽許多,且可讀性也更高。

1
2
3
4
5
6
7
8
this.$store.commit('RecipientInfo/setRecipientName', this.selectedItem.name);
this.$store.commit('RecipientInfo/setRecipientMobilePhone', this.selectedItem.mobile);
this.$store.commit('RecipientInfo/setRecipientLocalPhone', this.selectedItem.phone);
this.$store.commit('RecipientInfo/setRecipientAddressCityId', this.selectedItem.city);
this.$store.commit('RecipientInfo/setRecipientAddressCity', this.selectedItem.cityName);
this.$store.commit('RecipientInfo/setRecipientAddressTownId', this.selectedItem.town);
this.$store.commit('RecipientInfo/setRecipientAddressTown', this.selectedItem.townName);
this.$store.commit('RecipientInfo/setRecipientAddress', this.selectedItem.address);

如使用 Vuex 時,常會看到類似的 code,目的是呼叫 mutation,將值一一寫入 state。

1
2
3
4
5
6
7
8
9
10
11
12
const mutation = {
recipientName: this.selectedItem.name,
recipientMobilePhone: this.selectedItem.mobile,
recipientLocalPhone: this.selectedItem.phone,
recipientAddressCityId: this.selectedItem.city,
recipientAddressCity: this.selectedItem.cityName,
recipientAddressTownId: this.selectedItem.town,
recipientAddressTown: this.selectedItem.townName,
recipientAddress: this.selectedItem.address,
};

commitMutation.call(this, 'RecipientInfo', mutation);

將 mutation 與實際值以 key / value 形式組成 mutation object,自己寫一個 commitMutation() helper,將 module name 與 mutation object 傳入。

由於要使用 this.$store.commit() 呼叫 mutation,因此要使用 call() 將代表 Vue Instance 的 this 傳入。

1
2
3
4
5
6
7
export const commitMutation = function (moduleName, mutation) {
Object.entries(mutation)
.forEach(item => {
const mutationName = `set${capitalize(item[0])}`;
this.$store.commit(`${moduleName}/${mutationName}`, item[1]);
});
};

由於 mutation 是 object,但我們希望以 array 的方式來執行 this.$store.commit(),因此使用 Object.entries() 將 object 轉成 array,如此就能使用 forEach() 執行,其中 item[0] 相當於 object 的 key,而 item[1] 相當於 object 的 value。

Conclusion


  • Object.entries() 相當好用,能將 object parameter 轉成 array 後,就能夠使用 Array.prototype 下豐富的 method

Reference


MDN, Object.entries()

2018-11-22