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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
高中地理教学反思
2014/01/29 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
企业安全生产检查制度
2015/08/06 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书