Object.assign解析和使用场景总结

563 阅读1分钟

一、语法

Object.assign(target, ...sources)

  • arget 目标对象
  • source 源对象

二、使用场景

场景一:复制一个对象

const obj = {a:1}
const copy = Object.assign({},obj)
console.log(copy);// {a:1}

场景二: 浅拷贝

// Object.assign()拷贝的是(可枚举的)对象的属性值,如果属性值是一个对象的引用,它拷贝的就是这个对象的引用值。
// 只要obj1的属性对象c发生变化,obj2拷贝值c也会发生相应的变化
let obj1 = {
  a:1,
  b:2,
  c:{
    d:333
  }
}
let obj2 = Object.assign({},obj1)
console.log(obj1);//{ a: 1, b: 2, c: { d: 333 } }
console.log(obj2);//{ a: 1, b: 2, c: { d: 333 } }
obj1.a = 0
console.log(obj1);//{ a: 0, b: 2, c: { d: 333 } }
console.log(obj2);//{ a: 1, b: 2, c: { d: 333 } }
obj1.c.d = 3
console.log(obj1);//{ a: 0, b: 2, c: { d: 3 } }
console.log(obj2); //{ a: 1, b: 2, c: { d: 3 } }

场景三:合并对象

// Object.assign(target,...source) 注意:(目标对象自身也会发生改变)
const o1 = {a:1}
const o2 = {b:2}
const o3 = {c:3}

const obj3 = Object.assign(o1,o2,o3);
console.log('obj3=',obj3); //{ a: 1, b: 2, c: 3 }
console.log('o1=',o1);//{ a: 1, b: 2, c: 3 }
console.log('o2=',o2);//{ b: 2 }
console.log('o3=',o3);//{ c: 3 }

场景四:合并具有相同属性的对象

const o4 = {a:4,b:4,c:4};
const o5 = {b:5,c:5};
const o6 = {c:6}

const obj4 = Object.assign({},o4,o5,o6)
console.log("obj4=",obj4);//{ a: 4, b: 5, c: 6 }

场景五:可以一次向类添加多个方法

class Point{
  constructor(){
    //..
  }
}
Object.assign(Point.prototype,{
  toString(){},
  toValue(){}
})