ECMAScript 之如何將 Object 轉成 Array ?
栏目: JavaScript · 发布时间: 5年前
内容简介：由於 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。
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
以上所述就是小编给大家介绍的《ECMAScript 之如何將 Object 轉成 Array ?》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
编程之美：微软技术面试心得
《编程之美》小组 / 电子工业出版社 / 2018-9 / 79
《编程之美：微软技术面试心得》收集了约60道算法和程序设计的题目，这些题目大部分在微软的笔试、面试中出现过，有的曾被微软员工热烈地讨论过。作者试图从书中各种有趣的问题出发，引导读者发现问题、分析问题、解决问题，寻找更优的解法。《编程之美：微软技术面试心得》内容分为以下几个部分。 游戏之乐：从游戏和其他有趣问题出发，化繁为简，分析总结。 数字之魅：编程的过程实际上就是和数字及字符打交道的......一起来看看 《编程之美：微软技术面试心得》 这本书的介绍吧!
