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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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
php多文件上传下载示例分享
2014/02/20 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python支付宝支付示例详解
2019/08/22 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
网络营销策划方案
2014/06/04 职场文书
工地宣传标语
2014/06/18 职场文书
初中生物教学反思
2016/02/20 职场文书
如何用python绘制雷达图
2021/04/24 Python
python利用while求100内的整数和方式
2021/11/07 Python