ES6語法之對象的擴展

對象字面量簡寫法

你可能寫過這樣的代碼：使用和所分配的變量名稱相同的名稱初始化對象。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type: type,
  color: color,
  carat: carat
};

console.log(gemstone);

看到重複的地方了嗎？type: type、color: color 和 carat:carat 不顯得很冗長嗎？

好消息是，若是屬性名稱和所分配的變量名稱同樣，那麼就能夠從對象屬性中刪掉這些重複的變量名稱。

咱們來看看！

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat
};

還有一種向對象中添加方法的簡寫方式。

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

let gemstone = {
  type,
  color,
  carat,
  calculateWorth() { ... }
};

在 ES6 中甚至連function 關鍵字也不須要.

對象Key值構建

有時候咱們會在後臺取出key值，而不是咱們前臺定義好的，這時候咱們如何構建咱們的key值呢。好比咱們在後臺取了一個key值，而後能夠用[ ] 的形式，進行對象的構建。

let key='skill';
let obj={
    [key]:'web'
}
console.log(obj.skill);

Object.is( ) 對象比較

ES5 比較兩個值是否相等，只有兩個運算符：相等運算符==和嚴格相等運算符===。它們都有缺點，前者會自動轉換數據類型，後者的NaN不等於自身，以及+0等於-0;

ES6 提出「Same-value equality」（同值相等）算法，用來解決這個問題。Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算符===的行爲基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

基本使用

Object.assign方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。

Object.assign方法的第一個參數是目標對象，後面的參數都是源對象。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target)  // {a:1, b:2, c:3}

注意事項

同名屬性

若是目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target)  // {a:1, b:2, c:3}

淺拷貝

Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代碼中，源對象obj1的a屬性的值是一個對象，Object.assign拷貝獲得的是這個對象的引用。這個對象的任何變化，都會反映到目標對象上面。

爲屬性指定默認值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

面代碼中，DEFAULTS對象是默認值，options對象是用戶提供的參數。Object.assign方法將DEFAULTS和options合併成一個新對象，若是二者有同名屬性，則option的屬性值會覆蓋DEFAULTS的屬性值。

注意，因爲存在淺拷貝的問題，DEFAULTS對象和options對象的全部屬性的值，最好都是簡單類型，不要指向另外一個對象。不然，DEFAULTS對象的該屬性極可能不起做用。