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 17 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
基于Django实现日志记录报错信息
2019/12/17 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python ssh 执行shell命令的示例
2020/09/29 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
吨的认识教学反思
2014/04/27 职场文书
组工干部对照检查材料
2014/08/25 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
导游词范文
2015/02/13 职场文书
2015年统战工作总结
2015/05/19 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA