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实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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获取一个变量的名字的方法
2014/09/05 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
javascript动态加载三
2012/08/22 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python socket实现简单聊天室
2018/04/01 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python高斯消除矩阵
2019/01/02 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
几个数据库方面的面试题
2016/07/01 面试题
竞聘书格式及范文
2014/03/31 职场文书
电话客服工作职责
2014/07/27 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python