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+iview实现文件上传
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vuex的使用步骤
Jan 06 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
学习ExtJS Column布局
2009/10/08 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
详解python中asyncio模块
2018/03/03 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python中partial()基础用法说明
2018/12/30 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python matplotlib实时画图案例
2020/04/23 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
招商业务员岗位职责
2013/12/16 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
会计岗位描述
2014/02/22 职场文书
小学生期末评语大全
2014/04/21 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
综合实践活动报告
2015/02/05 职场文书
搞笑结婚保证书
2015/05/08 职场文书
团拜会主持词
2015/07/04 职场文书