Object.assign方法用來將源對象(source)的所有可枚舉屬性俗批,復制到目標對象(target)孟抗。它至少需要兩個對象作為參數(shù)泳挥,第一個參數(shù)是目標對象,后面的參數(shù)都是源對象煮岁。
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);
如果只有一個參數(shù)冶伞,Object.assign會直接返回該參數(shù)。
let targetObj1 = { a: 4 }
? ? ? ? Object.assign(targetObj1);
? ? ? ? console.log(targetObj1)
如果該參數(shù)不是對象色罚,則會先轉(zhuǎn)成對象碰缔,然后返回。
console.log(typeof (Object.assign(2)));
由于undefined和null無法轉(zhuǎn)成對象戳护,所以如果它們作為參數(shù)金抡,就會報錯。
console.log(typeof(Object.assign(null)));
console.log(typeof(Object.assign(underfind)));
注意:如果非對象參數(shù)出現(xiàn)在源對象的位置(即非首參數(shù))腌且,那么處理規(guī)則有所不同梗肝。首先,這些參數(shù)都會轉(zhuǎn)成對象铺董,如果無法轉(zhuǎn)成對象巫击,就會跳過。這意味著精续, 如果undefined和null不在首參數(shù)坝锰,就不會報錯。其他類型的值(即數(shù)值重付、字符串和布爾值)不在首參數(shù)顷级,也不會報錯。但是确垫,除了字符串會以數(shù)組形式弓颈,拷貝入目標對象,其他值都不會產(chǎn)生效果删掀。
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' } }的結(jié)果。這通常不是開發(fā)者想要的徽职,需要特別小心象颖。有一些函數(shù)庫提供Object.assign的定制版本(比如Lodash的_.defaultsDeep方法),可以解決深拷貝的問題姆钉。
注意说订,Object.assign可以用來處理數(shù)組抄瓦,但是會把數(shù)組視為對象。
console.log(Object.assign([1, 2, 3], [4, 5]));
其中陶冷,4覆蓋1钙姊,5覆蓋2,因為它們在數(shù)組的同一位置埂伦,所以就對應位置覆蓋了煞额。
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去調(diào)用父類方法,用來獲取對象的原型掺逼。
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);
}