美文网首页
Object.assign()合并对象

Object.assign()合并对象

作者: 5cc9c8608284 | 来源:发表于2022-03-22 09:50 被阅读0次

    Object.assign()是es6中新增的合并对象的方法,该方法接受一个目标对象和一个或者多个源对象作为参数,然后将每个源对象中可枚举(Objetc.propertyIsEnumerable()返回true)和自有(Object.hasOwnproperty()返回true)属性复制到目标对象。
    案例1:简单复制

    let dest,src,result;
    dest={};
    src={id:'src'}
    result=Object.assign(dest,src);
    console.log(dest===result);//true
    console.log(dest!==src);//true
    console.log(result);//{id:src}
    console.log(dest);//{id:src}
    

    案例2:多个源对象

    //多个源对象
    let dest, src, result;
    dest = {}
    result = Object.assign(dest, {
        a: 'foo'
    }, {
        b: 'bar'
    })
    console.log(result); //{ a: 'foo', b: 'bar' }
    

    案例3.获取函数与设置函数

    let dest, src, result;
    // 获取函数与设置函数
    dest = {
        set a(val) {
            console.log(`我被设置为了${val}`);
        }
    }
    src = {
        get a() {
            console.log('我是用来获取a的值的');
            return 'foo'
        }
    }
    Object.assign(dest, src)
    // console.log(dest.a); //我是用来获取a的值的
    dest.a = 123
    console.log(dest.a); //我被设置为了123
    // 注意:因为这里的设置函数不执行赋值操作,所以实际上并没有把值转移过来
    

    Object.assign()实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个复制的值,但是要注意:不能在两个对象之间转移获取函数和设置函数。
    案例4: Object.assign会覆盖重复的属性

    let dest, src, result;
    // 覆盖属性
    dest = {
        id: '111'
    }
    result = Object.assign(dest, {
        id: '222',
        age: 18
    }, {
        id: '333',
        name: '你好啊'
    })
    console.log(result); //{ id: '333', age: 18, name: '你好啊' }
    

    案例5:对象引用
    浅复制意味着只会复制对象的引用

    let dest, src, result;
    dest = {}
    src = {
        target: {}
    }
    result = Object.assign(dest, src)
    console.log(result.target === src.target);//true
    result.target.name = '你好啊';
    console.log(src.target.name);//你好啊
    

    案例6:错误处理

    let dest, src, result;
    // 如果复制期间出错,则操作会终止并退出,同时抛出错误,Object.assign没有回滚之前赋值的概念,因此它是一个尽力而为,可能只会完成部分复制的方法
    dest = {}
    src = {
        a: '1',
        get b() {
            throw new Error()
        },
        c: '2'
    }
    try {
        Object.assign(dest, src)
    } catch (e) {}
    console.log(dest); //{ a: '1' }Object.assign没办法回滚已经完成的修改,因此在抛出错误之前,目标对象上已经完成的复制会继续存在
    

    原文参考:
    javascript高级程序设计 第四版,在这里写这些笔记只是为了方便自己回过头来复习

    相关文章

      网友评论

          本文标题:Object.assign()合并对象

          本文链接:https://www.haomeiwen.com/subject/kqfadrtx.html