JavaScript刪除對(duì)象的不必要的屬性
Thinking系列,旨在利用10分鐘的時(shí)間傳達(dá)一種可落地的編程思想。
業(yè)務(wù)開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到:基于后端返回接口數(shù)據(jù),前端保存到對(duì)象 Object 中,前端開(kāi)發(fā)過(guò)程中為了一些場(chǎng)景的便利性,需要在該對(duì)象中增加相應(yīng)的屬性,但這些屬性對(duì)于后端沒(méi)有意義,保存提交時(shí)希望刪除掉。
真實(shí)業(yè)務(wù)代碼:保存前需要?jiǎng)h除對(duì)應(yīng)的 *Value
字段
async saveData (type, data) { // 提交時(shí)刪除多余字段 delete data.isCommonValue delete data.isRemoteValue await this.$request({ ...API.EDIT_SERVICE, method: type === 'add' ? 'post' : 'put', data }) }
上述是大家普遍的寫(xiě)法,但部分場(chǎng)景下上述寫(xiě)法并不是最優(yōu)寫(xiě)法,且可能會(huì)帶來(lái)一些副作用。下面通過(guò) 示例 的方式闡述一下:
示例
為了更好的展示上述情況,我們重新編寫(xiě)示例(僅為說(shuō)明實(shí)現(xiàn))。
let person = { id: '001', name: 'ligang', email: 'xxx@x.com' }
訴求:在提交給后端時(shí),需要?jiǎng)h除 email 字段。
方式一:delete 刪除
同上述給到的業(yè)務(wù)代碼處理方式一樣
delete person.email console.log(person) // {id: '001', name: 'ligang'}
原數(shù)據(jù)中的相關(guān)屬性也會(huì)刪除掉。
Reflect.deleteProperty()
允許用于刪除屬性,同上述 delete 行為一致。
Reflect.deleteProperty(person, 'email')
方式二:解構(gòu)
形成新的對(duì)象,避免在引用原始對(duì)象的地方產(chǎn)生副作用。
let {id, name} = person let newPerson = {id, name} console.log(newPerson) // {id: '001', name: 'ligang'}
會(huì)和原數(shù)據(jù)切斷引用。對(duì)于保留屬性個(gè)數(shù)少,該方式處理簡(jiǎn)單且易懂;保留屬性過(guò)多的場(chǎng)景會(huì)比較復(fù)雜。
let {email, ...newPerson} = person console.log(newPerson) // {id: '001', name: 'ligang'}
會(huì)和原數(shù)據(jù)切斷引用。對(duì)于保留屬性個(gè)數(shù)多,該方式處理簡(jiǎn)單且易懂;保留屬性過(guò)少的場(chǎng)景會(huì)比較復(fù)雜。
補(bǔ)充
對(duì)于已經(jīng)創(chuàng)建的實(shí)例,Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。下述方式都無(wú)效!
this.$set(this, 'email', '') this.$set(this.$data, 'email', '')
總結(jié)
實(shí)際使用中,強(qiáng)烈建議方式二來(lái)操作,不要影響原數(shù)據(jù)。特別是在mvvm框架中,原數(shù)據(jù)往往是響應(yīng)式的,delete/deleteProperty
意味著切斷“響應(yīng)關(guān)系”,delete 操作之后的數(shù)據(jù)響應(yīng)就會(huì)有問(wèn)題。
data () { return { person: { name: 'ligang', email: 'x@x.com' } } }, methods: { deleteProp () { delete this.person.email // this.$delete(this.person, 'email') }, addProp () { this.person.email = 'xxx' this.$set(this.person, 'address', 'xxx') } }
1.執(zhí)行 delete
操作,js 對(duì)象屬性剔除掉了,但頁(yè)面沒(méi)有及時(shí)響應(yīng),可以使用 vue 中的 this.$delete() 確保刪除能觸發(fā)更新視圖
2.執(zhí)行 add
操作,重新添加 email 及 address 屬性
1.this.person.email = 'xxx'
并不具備響應(yīng)式
2.this.$set(this.person, 'address', 'xxx')
具備響應(yīng)式
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
layui實(shí)現(xiàn)form表單同時(shí)提交數(shù)據(jù)和文件的代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)form表單同時(shí)提交數(shù)據(jù)和文件的代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例
今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js屬性對(duì)象的hasOwnProperty方法的使用
這篇文章主要介紹了js屬性對(duì)象的hasOwnProperty方法的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性的說(shuō)明,需要的朋友可以參考下。2011-08-08微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件,滾動(dòng)選項(xiàng)卡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板
這篇文章主要介紹了?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板,利用openHarmony內(nèi)置的API?cnavas組件實(shí)現(xiàn),具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-07-07