1. 程式人生 > >Object 物件方法學習之(1)—— 使用 Object.assign 複製物件、合併物件

Object 物件方法學習之(1)—— 使用 Object.assign 複製物件、合併物件

作用

Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。

語法

Object.assign(target, ...sources)

引數

target: 目標物件
sources: 源物件

返回值

目標物件

描述

Object.assign 方法只複製源物件中可列舉的屬性和物件自身的屬性。它在源物件上使用 [[Get]], 在目標物件上使用 [[Set]], 會呼叫 getter 和 setter。它不適合用於把一個包含 getter 的物件屬性合併到一個原型中。如果要把屬性定義連同可列舉性複製到一個原型中,應該使用 Object.getOwnPropertyDescriptor()

 和 Object.defineProperty() 方法。

String 和 Symbol 型別的屬性都會被複制。

當發生錯誤時,例如有一個屬性是不可寫的,將會丟擲一個 TypeError 錯誤,目標物件保持不變。

注意 Object.assign() 源物件為 null 或 undefined 時不會報錯。

示例

克隆物件

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

合併物件

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}, 目標物件被改變了

原型鏈上的屬性和不可列舉的屬性無法複製

var obj = Object.create({foo: 1}, { // foo 在 obj 的原型鏈上
  bar: {
            value: 2  // bar 是一個不可列舉的屬性.
      },
  baz: {
             value: 3,
             enumerable: true  // baz 是 obj 自身的一個可列舉屬性
} }); var copy = Object.assign({}, obj); console.log(copy); // { baz: 3 },原型鏈上的屬性和不可列舉的屬性沒有複製到

傳遞原始型別

var v1 = 'abc';
var v2 = true;
var v3 = 10;
var v4 = Symbol('foo');

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
//注意只有字串型別的值有可列舉屬性
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

異常會中斷正在執行的複製任務

var target = Object.defineProperty({}, 'foo', {
  value: 1,
  writable: false
}); // target.foo 是一個只讀屬性

Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
// TypeError: "foo" is read-only
// 在分配 target.foo 時該異常被丟擲

console.log(target.bar);  // 2, 第一個源物件複製成功
console.log(target.foo2); // 3, 第二個源物件的第一個屬性複製成功
console.log(target.foo);  // 1, 異常在這裡丟擲
console.log(target.foo3); // undefined, 任務已經結束, foo3 不會被複制 assign
console.log(target.baz);  // undefined, 第三個源物件也不會被複制

有訪問器的情況

var obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

var copy = Object.assign({}, obj); 
console.log(copy); 
// { foo: 1, bar: 2 }, copy.bar 的值是 bar 的 getter 的返回值

ES5版本實現方法

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}