Object.assign()合并对象

2022-03-22  本文已影响0人  5cc9c8608284

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高级程序设计 第四版,在这里写这些笔记只是为了方便自己回过头来复习

上一篇 下一篇

猜你喜欢

热点阅读