1. 程式人生 > >ES6 Object.assign()的用法

ES6 Object.assign()的用法

1.Object.assign()基本用法:

Object.assign方法用來將源物件(source)的所有可列舉屬性,複製到目標物件(target)。它至少需要兩個物件作為引數,第一個引數是目標物件,後面的引數都是源物件。

let targetObj1 = { a: 1 };
        let sourceObj1 = { b: 1 };
        let sourceObj11 = { c: 3 };
        Object.assign(targetObj1, sourceObj1, sourceObj11);
        console.log(targetObj1);

注:如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。

let targetObj1 = { a: 1, b: 2 };
        let sourceObj1 = { b: 1 };
        let sourceObj11 = { c: 3 };
        Object.assign(targetObj1, sourceObj1, sourceObj11);
        console.log(targetObj1);

如果只有一個引數,Object.assign會直接返回該引數。

let targetObj1 = { a: 4 }
        Object.assign(targetObj1);
        console.log(targetObj1)

 如果該引數不是物件,則會先轉成物件,然後返回。

console.log(typeof (Object.assign(2)));

由於undefined和null無法轉成物件,所以如果它們作為引數,就會報錯。

console.log(typeof(Object.assign(null)));

 console.log(typeof(Object.assign(underfind)));

 注意:如果非物件引數出現在源物件的位置(即非首引數),那麼處理規則有所不同。首先,這些引數都會轉成物件,如果無法轉成物件,就會跳過。這意味著, 如果undefined和null不在首引數,就不會報錯。其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。

Object.assign只拷貝自身屬性,不可列舉的屬性(enumerable為false)和繼承的屬性不會被拷貝。

let obj1 = Object.assign({ dwb: 'zjl' },

Object.defineProperty({}, 'zmf', {

enumerable: false,

value: 'zmf'

})

)

console.log(obj1);

let obj2 = Object.assign({ dwb: 'zjl' },

Object.defineProperty({}, 'zmf', {

enumerable: true,

value: 'zmf'

})

)

console.log(obj2);

對於巢狀的物件,Object.assign的處理方法是替換,而不是新增。

var target = { a: { b: 'c', d: 'e' } }

var source = { a: { b: 'hello' } }

Object.assign(target, source);

 上面程式碼中,target物件的a屬性被source物件的a屬性整個替換掉了,而不會得到{ a: { b: 'hello', d: 'e' } }的結果。這通常不是開發者想要的,需要特別小心。有一些函式庫提供Object.assign的定製版本(比如Lodash的_.defaultsDeep方法),可以解決深拷貝的問題。

 注意,Object.assign可以用來處理陣列,但是會把陣列視為物件。

console.log(Object.assign([1, 2, 3], [4, 5]));

其中,4覆蓋1,5覆蓋2,因為它們在陣列的同一位置,所以就對應位置覆蓋了。

Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。

var object1 = { a: { b: 1 } };

var object2 = Object.assign({}, object1);

object1.a.b = 2;

console.log(object2.a.b);

 2.用途

 2.1為物件新增屬性

 2.2為物件新增方法

2.3克隆物件

function copyFnc(origin) {

return Object.assign({}, origin)

}

var sur = { a: 1, b: 2 };

console.log(copyFnc(sur));

上面程式碼將原始物件拷貝到一個空物件,就得到了原始物件的克隆。

不過,採用這種方法克隆,只能克隆原始物件自身的值,不能克隆它繼承的值。如果想要保持繼承鏈,可以採用下面的程式碼。

function clone(origin) {

let originProto = Object.getPrototypeOf(origin);

return Object.assign(Object.create(originProto), origin);

}

 在JS裡子類利用Object.getPrototypeOf去呼叫父類方法,用來獲取物件的原型。

2.4 合併多個物件

//多個物件合併到某個物件

const merge = (target, ...sources) => Object.assign(target, ...sources);

//多個物件合併到新物件

const merge = (...sources) => Object.assign({}, ...sources);

2.5為屬性指定預設值

const DEFAULTS = {

logLevel: 0,

outputFormat: 'html'

};

function processContent(options) {

let options = Object.assign({}, DEFAULTS, options);

}