Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案
Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決
想清空Vue中的data數(shù)據(jù)報(bào)錯(cuò)也許是沒(méi)有改變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無(wú)法轉(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ì)象，如果無(wú)法轉(zhuǎn)成對(duì)象，就會(huì)跳過(guò)。這意味著，如果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 admin element noCache設(shè)置無(wú)效的問(wèn)題
今天小編就為大家分享一篇解決vue admin element noCache設(shè)置無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果(支持fixed)
本文主要介紹了vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)觸底判斷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue動(dòng)態(tài)實(shí)現(xiàn)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)實(shí)現(xiàn)評(píng)分效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
在做vue3項(xiàng)目中時(shí),每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于vue3?api自動(dòng)導(dǎo)入的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本文主要介紹了前后端分離項(xiàng)目中的跨域問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
Vue中EpicEditor和vue-quill-editor的使用詳解
EpicEditor和Vue-quill-editor都是基于Quill.js的富文本編輯器,并且都提供了許多強(qiáng)大的功能,下面我們就來(lái)介紹一下二者的具體使用,感興趣的小伙伴可以了解一下2023-11-11