Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案
Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決
想清空Vue中的data數(shù)據(jù)報(bào)錯(cuò)也許是沒有改變this指向的原因可以試著用call等方便改變this指向,
例如:
Object.assign(this.$data, this.$options.data.call(this))
如果只是想清楚其中某條數(shù)據(jù)可以使用
this.xxx=this.$options.data.call(this).xxxx
Object中的assign方法
Object.assign()
用于對(duì)象合并
普通合并
<script> ? ? const target = { ? ? ? ? a:1 ? ? } ? ? const source1 = { ? ? ? ? b:2 ? ? } ? ? const source2 = { ? ? ? ? c:3 ? ? } ? ? Object.assign(target,source1,source2); ? ? console.log(target); ? ? //{a: 1, b: 2, c: 3} </script>
注意
- Object.assign()方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象,其余的參數(shù)為原對(duì)象,所有的原對(duì)象都會(huì)合并到目標(biāo)對(duì)象
- 也就是第一個(gè)參數(shù)的原內(nèi)容會(huì)被改變
- 如果目標(biāo)對(duì)象與源對(duì)象有同名屬性,或多個(gè)源對(duì)象有同名屬性,則后面的屬性會(huì)覆蓋前面的屬性。
后者覆蓋前者
<script> ? ? const target = { ? ? ? ? a:1, ? ? ? ? b:1, ? ? ? ? c:1 ? ? } ? ? const source1 = { ? ? ? ? a:2, ? ? ? ? b:2, ? ? ? ? c:2 ? ? } ? ? const source2 = { ? ? ? ? a:3, ? ? ? ? b:3, ? ? ? ? c:3 ? ? } ? ? Object.assign(target,source1,source2); ? ? console.log(target); //{a: 3, b: 3, c: 3} </script>
Object.assign()只有一個(gè)參數(shù)
如果此參數(shù)為對(duì)象,直接返回該參數(shù)。
<script> ? ? const target = { ? ? ? ? a:1, ? ? ? ? b:1, ? ? ? ? c:1 ? ? } ? ? console.log(Object.assign(target)==target);//true ? ? console.log(Object.assign(target)===target);//true </script>
Object.assign()只有一個(gè)參數(shù)
如果該參數(shù)不是對(duì)象,則會(huì)先轉(zhuǎn)成對(duì)象,然后返回。
<script> ? ? let x =Object.assign(123); ? ? console.log(typeof x);//object </script>
Object.assign()只有一個(gè)參數(shù)
由于undefined和null無法轉(zhuǎn)成對(duì)象,所以如果它們作為參數(shù),就會(huì)報(bào)錯(cuò)。
Object.assign(undefined) // 報(bào)錯(cuò) Object.assign(null) // 報(bào)錯(cuò)
多個(gè)參數(shù)
如果非對(duì)象參數(shù)出現(xiàn)在源對(duì)象的位置(即非首參數(shù)),那么處理規(guī)則有所不同。首先,這些參數(shù)都會(huì)轉(zhuǎn)成對(duì)象,如果無法轉(zhuǎn)成對(duì)象,就會(huì)跳過。這意味著,如果undefined和null不在首參數(shù),就不會(huì)報(bào)錯(cuò)。
let obj = {a: 1}; Object.assign(obj, undefined) === obj // true Object.assign(obj, null) === obj // true
其他類型的值(即數(shù)值、字符串和布爾值)不在首參數(shù),也不會(huì)報(bào)錯(cuò)。但是,除了字符串會(huì)以數(shù)組形式,拷貝入目標(biāo)對(duì)象,其他值都不會(huì)產(chǎn)生效果。
const v1 = 'abc'; const v2 = true; const v3 = 10; const obj = Object.assign({}, v1, v2, v3); console.log(obj); // { "0": "a", "1": "b", "2": "c" }
對(duì)象合并的時(shí)候是淺拷貝
? ? var x={"101":{"Score":50,"Standards":{}}} ? ? var b = {"101":{"Standards":{"11111":[0.25]}}} ? ? console.log(Object.assign({},x,b))
猜猜結(jié)果是什么
{"101":{"Standards":{"111":[0.2]}}}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 路由 過渡動(dòng)效 數(shù)據(jù)獲取方法
這篇文章主要介紹了Vue 路由 過渡動(dòng)效 數(shù)據(jù)獲取方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項(xiàng)目引入四種圖標(biāo)方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例
今天小編就為大家分享一篇vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能,本文通過案例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求
這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09詳解Vue.js在頁面加載時(shí)執(zhí)行某個(gè)方法
這篇文章主要介紹了詳解Vue.js在頁面加載時(shí)執(zhí)行某個(gè)方法的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11