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中使用mockjs代码实例
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue elementUI批量上传文件
Apr 26 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
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript call方法使用说明
2010/01/11 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
移动端界面的适配
2017/01/11 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue-router路由模式详解(小结)
2019/08/26 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python中反射用法实例
2015/03/27 Python
Python正规则表达式学习指南
2016/08/02 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python 6种方法实现单例模式
2020/12/15 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
学雷锋演讲稿汇总
2014/05/10 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis