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实现图书管理小案例
Dec 03 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
漂亮但不安全的CTB
2006/10/09 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php-msf源码详解
2017/12/25 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
使用opencv将视频帧转成图片输出
2019/12/10 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
J2EE模式面试题
2016/10/11 面试题
工厂采购员岗位职责
2014/04/08 职场文书
文案策划求职信
2014/04/14 职场文书
校园标语大全
2014/06/19 职场文书
5s标语大全
2014/06/23 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
三峡导游词
2015/01/31 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers