Vue中Object.assign清空數(shù)據(jù)報錯的解決方案
更新時間：2022年03月03日 14:31:16 作者：傷心的咸魚君
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Object.assign清空數(shù)據(jù)報錯的解決
想清空Vue中的data數(shù)據(jù)報錯也許是沒有改變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()
用于對象合并
普通合并
<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()方法的第一個參數(shù)是目標對象，其余的參數(shù)為原對象，所有的原對象都會合并到目標對象
- 也就是第一個參數(shù)的原內(nèi)容會被改變
- 如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。
后者覆蓋前者
<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()只有一個參數(shù)
如果此參數(shù)為對象，直接返回該參數(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()只有一個參數(shù)
如果該參數(shù)不是對象，則會先轉(zhuǎn)成對象，然后返回。
<script> ? ? let x =Object.assign(123); ? ? console.log(typeof x);//object </script>
Object.assign()只有一個參數(shù)
由于undefined和null無法轉(zhuǎn)成對象，所以如果它們作為參數(shù)，就會報錯。
Object.assign(undefined) // 報錯 Object.assign(null) // 報錯
多個參數(shù)
如果非對象參數(shù)出現(xiàn)在源對象的位置（即非首參數(shù)），那么處理規(guī)則有所不同。首先，這些參數(shù)都會轉(zhuǎn)成對象，如果無法轉(zhuǎn)成對象，就會跳過。這意味著，如果undefined和null不在首參數(shù)，就不會報錯。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true其他類型的值（即數(shù)值、字符串和布爾值）不在首參數(shù)，也不會報錯。但是，除了字符串會以數(shù)組形式，拷貝入目標對象，其他值都不會產(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" }對象合并的時候是淺拷貝
? ? 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]}}}
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
解決vue admin element noCache設置無效的問題
今天小編就為大家分享一篇解決vue admin element noCache設置無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中el-table實現(xiàn)自動吸頂效果(支持fixed)
本文主要介紹了vue中el-table實現(xiàn)自動吸頂效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue Element左側(cè)無限級菜單實現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無限級菜單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家詳細介紹了Vue動態(tài)實現(xiàn)評分效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在做vue3項目中時,每次使用都需要先進行引入,下面這篇文章主要給大家介紹了關于vue3?api自動導入的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實現(xiàn)一個SSR的前端博客的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
本文主要介紹了前后端分離項目中的跨域問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
Vue中EpicEditor和vue-quill-editor的使用詳解
EpicEditor和Vue-quill-editor都是基于Quill.js的富文本編輯器,并且都提供了許多強大的功能,下面我們就來介紹一下二者的具體使用,感興趣的小伙伴可以了解一下2023-11-11