ES6語法之對(duì)象的擴(kuò)展

SillyMonkey 發(fā)布于2019-08-21 18:32 / 2488人閱讀

摘要：方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。這個(gè)對(duì)象的任何變化，都會(huì)反映到目標(biāo)對(duì)象上面。方法將和合并成一個(gè)新對(duì)象，如果兩者有同名屬性，則的屬性值會(huì)覆蓋的屬性值。否則，對(duì)象的該屬性很可能不起作用。

對(duì)象字面量簡寫法

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

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

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

console.log(gemstone);

看到重復(fù)的地方了嗎？type: type、color: color 和 carat:carat 不顯得很冗長嗎？

好消息是，如果屬性名稱和所分配的變量名稱一樣，那么就可以從對(duì)象屬性中刪掉這些重復(fù)的變量名稱。

我們來看看！

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

const gemstone = {
  type,
  color,
  carat
};

還有一種向?qū)ο笾刑砑臃椒ǖ暮唽懛绞健?/p>

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

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

在 ES6 中甚至連function 關(guān)鍵字也不需要.

對(duì)象Key值構(gòu)建

有時(shí)候我們會(huì)在后臺(tái)取出key值，而不是我們前臺(tái)定義好的，這時(shí)候我們?nèi)绾螛?gòu)建我們的key值呢。比如我們在后臺(tái)取了一個(gè)key值，然后可以用[ ] 的形式，進(jìn)行對(duì)象的構(gòu)建。

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

Object.is( ) 對(duì)象比較

ES5 比較兩個(gè)值是否相等，只有兩個(gè)運(yùn)算符：相等運(yùn)算符==和嚴(yán)格相等運(yùn)算符===。它們都有缺點(diǎn)，前者會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型，后者的NaN不等于自身，以及+0等于-0;

ES6 提出“Same-value equality”（同值相等）算法，用來解決這個(gè)問題。Object.is就是部署這個(gè)算法的新方法。它用來比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符===的行為基本一致。

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方法用于對(duì)象的合并，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（target）。

Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。

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}

注意事項(xiàng) 同名屬性

如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

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方法實(shí)行的是淺拷貝，而不是深拷貝。也就是說，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用。

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

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

上面代碼中，源對(duì)象obj1的a屬性的值是一個(gè)對(duì)象，Object.assign拷貝得到的是這個(gè)對(duì)象的引用。這個(gè)對(duì)象的任何變化，都會(huì)反映到目標(biāo)對(duì)象上面。

為屬性指定默認(rèn)值

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

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

面代碼中，DEFAULTS對(duì)象是默認(rèn)值，options對(duì)象是用戶提供的參數(shù)。Object.assign方法將DEFAULTS和options合并成一個(gè)新對(duì)象，如果兩者有同名屬性，則option的屬性值會(huì)覆蓋DEFAULTS的屬性值。

注意，由于存在淺拷貝的問題，DEFAULTS對(duì)象和options對(duì)象的所有屬性的值，最好都是簡單類型，不要指向另一個(gè)對(duì)象。否則，DEFAULTS對(duì)象的該屬性很可能不起作用。