es6學習之路(8):物件的擴充套件
阿新 • • 發佈:2019-02-04
1.屬性的簡潔表示法
vvar target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
ES6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}
// 等同於
var baz = {foo: foo};
2.Object.is()
3.Object.assign()
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
相當於jquery 的extend方法
注意點
Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
上面程式碼中,源物件obj1的a屬性的值是一個物件,Object.assign拷貝得到的是這個物件的引用。 這個物件的任何變化,都會反映到目標物件上面。
對於這種巢狀的物件,一旦遇到同名屬性,Object.assign的處理方法是替換,而不是新增。
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }
上面程式碼中,target物件的a屬性被source物件的a屬性整個替換掉了,而不會得到{ a: { b: 'hello', d: 'e' } }的結果。這通常不是開發者想要
的,需要特別小心。