Vue中Object.assign清空数据报错的解决方案

 更新时间:2022年03月03日 14:31:16   作者:伤心的咸鱼君  
这篇文章主要介绍了Vue中Object.assign清空数据报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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 admin element noCache设置无效的问题

    解决vue admin element noCache设置无效的问题

    今天小编就为大家分享一篇解决vue admin element noCache设置无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中el-table实现自动吸顶效果(支持fixed)

    vue中el-table实现自动吸顶效果(支持fixed)

    本文主要介绍了vue中el-table实现自动吸顶效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue Element左侧无限级菜单实现

    vue Element左侧无限级菜单实现

    这篇文章主要介绍了vue Element左侧无限级菜单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 优化Vue中date format的性能详解

    优化Vue中date format的性能详解

    这篇文章主要介绍了优化Vue中date format的性能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Vue组件实现触底判断

    Vue组件实现触底判断

    这篇文章主要为大家详细介绍了Vue组件实现触底判断,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Vue动态实现评分效果

    Vue动态实现评分效果

    这篇文章主要为大家详细介绍了Vue动态实现评分效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue3 api自动导入神器推荐

    vue3 api自动导入神器推荐

    在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于vue3 api自动导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Nuxt.js实现一个SSR的前端博客的示例代码

    Nuxt.js实现一个SSR的前端博客的示例代码

    这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue解决跨域问题的方法

    vue解决跨域问题的方法

    本文主要介绍了前后端分离项目中的跨域问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • Vue中EpicEditor和vue-quill-editor的使用详解

    Vue中EpicEditor和vue-quill-editor的使用详解

    EpicEditor和Vue-quill-editor都是基于Quill.js的富文本编辑器,并且都提供了许多强大的功能,下面我们就来介绍一下二者的具体使用,感兴趣的小伙伴可以了解一下
    2023-11-11

最新评论