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);
}