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实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue递归实现树形组件
Jul 15 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
高亮度显示php源代码
2006/10/09 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
django框架auth模块用法实例详解
2019/12/10 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
领导检查欢迎词
2014/01/14 职场文书
关于青春的演讲稿
2014/05/05 职场文书
环保倡议书400字
2014/05/15 职场文书
趣味运动会赞词
2015/07/22 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS