ECMAScript 之如何將 Object 轉成 Array ?

栏目: JavaScript · 发布时间: 7年前

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

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

Version

ECMAScript 2017

Object.entries

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。

ECMAScript 之如何將 Object 轉成 Array ?

Practice

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

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

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。

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 傳入。

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()

以上所述就是小编给大家介绍的《ECMAScript 之如何將 Object 轉成 Array ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Web Designer's Idea Book, Vol. 2

Patrick McNeil / How / 2010-9-19 / USD 30.00

Web Design Inspiration at a Glance Volume 2 of The Web Designer's Idea Book includes more than 650 new websites arranged thematically, so you can easily find inspiration for your work. Auth......一起来看看《The Web Designer's Idea Book, Vol. 2》这本书的介绍吧!

码农工具