Vue中Object.assign清空数据报错的解决方案


Posted in Vue.js onMarch 03, 2022

Object.assign清空数据报错的解决

想清空Vue中的data数据报错也许是没有改变this指向的原因可以试着用call等方便改变this指向,

例如:

Object.assign(this.$data, this.$options.data.call(this))

如果只是想清楚其中某条数据可以使用

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()方法的第一个参数是目标对象,其余的参数为原对象,所有的原对象都会合并到目标对象
  • 也就是第一个参数的原内容会被改变
  • 如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

后者覆盖前者

<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()只有一个参数

如果此参数为对象,直接返回该参数。

<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()只有一个参数

如果该参数不是对象,则会先转成对象,然后返回。

<script>
    let x =Object.assign(123);
    console.log(typeof x);//object
</script>

Object.assign()只有一个参数

由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

多个参数

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

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))

猜猜结果是什么

{"101":{"Standards":{"111":[0.2]}}}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
You might like
php 三大特点:封装,继承,多态
2017/02/19 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
php实现微信发红包功能
2018/07/13 PHP
Prototype Number对象 学习
2009/07/19 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
vue组件创建的三种方式小结
2020/02/03 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python字符串详细介绍
2015/05/09 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
利用Python如何生成随机密码
2016/04/20 Python
Python处理文本换行符实例代码
2018/02/03 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
仓管员岗位责任制
2014/02/19 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
HTML基础详解(下)
2021/10/16 HTML / CSS
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python
python创建字典及相关管理操作
2022/04/13 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python