ES6 Object.assign()的用法及其使用

阿新 • • 發佈：2020-01-18

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,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' },{
 
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);
 
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。