1. 程式人生 > >es6學習之路(8):物件的擴充套件

es6學習之路(8):物件的擴充套件

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' } }的結果。這通常不是開發者想要 的,需要特別小心。