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 18 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue封装数字翻牌器
Apr 20 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面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php实现学生管理系统
2020/03/21 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
副厂长岗位职责
2014/02/02 职场文书
2015年党员自评材料
2014/12/17 职场文书
大学生团日活动总结
2015/05/06 职场文书
《开国大典》教学反思
2016/02/16 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技