1. 程式人生 > >Object.assign()物件拷貝

Object.assign()物件拷貝

該Object.assign()方法用於將所有可列舉自身屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

Object.assign(target,… sources)

target sources 返回值
目標物件 源物件 目標物件

描述:

如果目標物件中的屬性具有相同的鍵,則它們將被源中的屬性覆蓋。後來的資源屬性同樣會覆蓋之前的屬性。

Object.assign()方法僅將可列舉和自己的屬性從源物件複製到目標物件。它[[Get]]在源和[[Set]]目標上使用,因此它將呼叫gettersetter。因此,它分配屬性而不僅僅是複製或定義新屬性。如果合併源包含getter,這可能使它不適合將新屬性合併到原型中。用於將屬性定義(包括其可列舉性)複製到原型中,Object.getOwnPropertyDescriptor()

Object.defineProperty()應該使用它們。

兩者StringSymbol屬性都被複制。

如果出現錯誤,例如,如果屬性不可寫,TypeError則會引發a,target如果在引發錯誤之前添加了任何屬性,則可以更改物件。

請注意,Object.assign()不會丟擲nullundefined源值。


示例:

在原型鏈和不可列舉的效能屬性不能被複制

var obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain.
  bar: {
    value: 2  // bar is a non-enumerable property.
}, baz: { value: 3, enumerable: true // baz is an own enumerable property. } }); var copy = Object.assign({}, obj); console.log(copy); // { baz: 3 }

克隆一個物件

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

深度克隆部分
對於深度克隆,我們需要使用其他替代方法,因為Object.assign()複製屬性值。如果源值是物件的引用,則它僅複製該引用值。

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

合併物件部分

    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

具有相同屬性的合併物件節

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