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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
js CSS操作方法集合
2008/10/31 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jquery 学习笔记一
2010/04/07 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
详解vue.js的devtools安装
2017/05/26 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
Python中的zip函数使用示例
2015/01/29 Python
python中sleep函数用法实例分析
2015/04/29 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python实现贪吃蛇小游戏
2020/03/21 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
流动人口婚育证明
2014/10/19 职场文书
初二学生评语大全
2014/12/26 职场文书
申报材料格式
2014/12/30 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
个人自荐书怎么写
2015/03/26 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android