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+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
星际中的相关伤害
2020/03/04 星际争霸
dedecms中常见问题修改方法总结
2007/03/21 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP创建XML接口示例
2019/07/04 PHP
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
python 判断一个进程是否存在
2009/04/09 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
wxPython的安装与使用教程
2018/08/31 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python 公共方法汇总解析
2019/09/16 Python
Django app配置多个数据库代码实例
2019/12/17 Python
企业军训感言
2014/02/08 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
先进基层党组织材料
2014/12/25 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
MySQL的join buffer原理
2021/04/29 MySQL