ECMAScript 之如何將 Object 轉成 Array ?
栏目: JavaScript · 发布时间: 6年前
内容简介:由於 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 ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精益思想
(美)詹姆斯 P.沃麦克(James P.Womack)、(英)丹尼尔 T.琼斯(Daniel T.Jones) / 沈希瑾、张文杰、李京生 / 机械工业出版社 / 2011-4 / 48.00元
打算尝试精益的人,该怎么做? 已经实行精益的人,下一步怎么办? 本书包含了最新的精益理论、方法和工具,一一解答上述问题。 这是目前关于流程再造最好的书,也是最好读的。——《高业周刊》 本书中文简体字版由FreePress通过AiWA授权机械工业出版社在中国大陆独家出版发行。未经出版者书面许可,不得以任何方式抄袭、复制或节录本书中的任何部分。 《精益思想》于1996年秋......一起来看看 《精益思想》 这本书的介绍吧!