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 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue实现简易音乐播放器
Aug 14 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 db类库进行数据库操作
2009/03/19 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
AngularJS实现表单验证功能详解
2017/10/12 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python操作xml文件示例
2014/04/07 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
幼儿师范毕业生自荐信
2013/11/09 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
小学生综合素质评语
2014/04/23 职场文书
高中生操行评语
2014/04/25 职场文书
财务整改报告范文
2014/11/05 职场文书