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+elementui plus创建项目的方法
Dec 01 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
ant design vue的form表单取值方法
Jun 01 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合并数组的2种方法小结
2016/11/24 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
八一演出活动方案
2014/02/03 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
《狼》教学反思
2014/03/02 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
依法行政工作汇报
2014/10/28 职场文书
导游词之无锡唐城
2019/12/12 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
使用javascript解析二维码的三种方式
2021/11/11 Javascript
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python