ES6+ 對(duì)象的擴(kuò)展

1. 前言

JavaScript 中對(duì)象是非常重要的數(shù)據(jù)結(jié)構(gòu)，ES6 對(duì)對(duì)象進(jìn)行了極大的擴(kuò)展，使用上也更加簡(jiǎn)潔。前面我們學(xué)習(xí)了 擴(kuò)展語法 和 剩余參數(shù) 是對(duì)象擴(kuò)展的其中的一部分，本節(jié)和后面幾節(jié)會(huì)對(duì) Object 的擴(kuò)展進(jìn)行系統(tǒng)的介紹。后面我們還會(huì)學(xué)到新的數(shù)據(jù)結(jié)構(gòu) Set 和 Map 也是對(duì)對(duì)象的擴(kuò)展，另外，還有 Proxy 和 Reflect 也是對(duì)象的重大升級(jí)。本節(jié)主要學(xué)習(xí)以下幾點(diǎn)

• 簡(jiǎn)潔的屬性表達(dá)
• 屬性名表達(dá)式
• 方法的 name 屬性
• 可選鏈操作符

2. 簡(jiǎn)潔的屬性表達(dá)

ES6 允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法

2.1 屬性值簡(jiǎn)寫

在 ES5 中我們知道，在定義對(duì)象時(shí)屬性的值是必須要寫的，在 ES6 中規(guī)定，如果屬性名和定義的變量名是一樣的，就可以在對(duì)象中直接寫這個(gè)變量名作為對(duì)象中的一項(xiàng)。如下：

var name = 'imooc';

// ES5
var obj1 = {
  name: name,
}
// ES6
var obj2 = {
  name,
}

上面代碼中的 obj1 和 obj2 是一樣的意思。變量 name 可以直接寫在大括號(hào)中。這時(shí)，屬性名就是變量名，屬性值就是變量值。

下面我們來看一個(gè)在函數(shù)中返回一個(gè)對(duì)象的實(shí)例：

// ES5
function getObj(x, y) {
  return {x: x, y: y};
}
// 等同于 ES6
function getObj(x, y) {
  return {x, y};
}

getObj(1, 2) // {x: 1, y: 2}

上面中的代碼可以看出，在我們平常開發(fā)中，組裝數(shù)據(jù)時(shí)是非常方便、有用的。

2.2 對(duì)象中方法的簡(jiǎn)寫

除了屬性可以簡(jiǎn)寫，對(duì)象中的方法也是可以簡(jiǎn)寫的，而且更加簡(jiǎn)潔明了。我們來看下面的例子：

const name = '張三'
// ES5
var person = {
  name: name,
  getName: function() {
    console.log('imooc')
  }
};

// ES6
var person = {
  name,
  getName() {
    console.log(this.name)
  }
};
console.log(person)	// {name: "imooc", getName: ?}

上面的代碼中，ES5 中定義一個(gè)對(duì)象上的方法時(shí)需要使用 function 關(guān)鍵字來定義，而 ES6 則直接省略了 冒號(hào)和 function 關(guān)鍵字。可以看出使用 ES6 這種簡(jiǎn)潔的方式更具表達(dá)力。

在 Node 中進(jìn)行模塊導(dǎo)出時(shí)，這種方式更加方便。我們看下面的例子：

var person = {};

function getName () {
  return person.name
}

function setName () {
  person.name = '李四'
}

function clear () {
  person = {};
}

// ES5 寫法
module.exports = {
  getName: getName
  setName: setName,
  clear: clear
};
// ES6寫法
module.exports = { getName, setName, clear };

上面的代碼中，我們定義了一個(gè) person 對(duì)象，并向外暴露了若干方法用來操作 person 對(duì)象，在導(dǎo)出的時(shí)候可以看出，ES6 不需要重復(fù)地去寫變量名，從而更簡(jiǎn)潔地表達(dá)了模塊所提供的方法。

3. 簡(jiǎn)潔的屬性表達(dá)

在 JavaScript 中定義對(duì)象的屬性，一般有兩種方法。如下：

// 方法一
obj.name = 'imooc';

// 方法二
obj['a' + 'ge'] = 7;

上面的代碼中，方法一直接使用標(biāo)識(shí)符進(jìn)行賦值操作，這是我們比較常用的賦值操作，但是如果屬性是一個(gè)表達(dá)式時(shí)，則可以使用方法二，把表達(dá)式寫在中括號(hào)中。

但是在 ES5 定義字面量對(duì)象時(shí)不能使用表達(dá)式作為字面量對(duì)象的屬性，只能通過第一種方式（標(biāo)識(shí)符）來定義屬性。

var obj = {
  name: 'imooc',
  age: 7
}

ES6 對(duì)對(duì)象的屬性進(jìn)行了擴(kuò)展，可以覆蓋更多的場(chǎng)景，屬性可以使用變量的形式來定義，如下：

var key = 'name';
var obj = {
  [key]: 'imooc',
  ['a' + 'ge']: 7
}

上面的代碼中字面量對(duì)象中的屬性是可以放在中括號(hào)中，中括號(hào)中的可以是變量，也可以是表達(dá)式。這無疑是擴(kuò)展了屬性的功能，使編程更加靈活。

另外，屬性也可以是一個(gè)帶空格的字符串，在取值時(shí)在中括號(hào)中可以直接使用字符串，也可以使用變量。如下：

var str = 'first name';
var obj = {
  ['I love imooc']: 'ES6 Wiki',
  [str]: 'Jack'
}
console.log(obj['I love imooc'])	// ES6 Wiki
console.log(obj[str])	// Jack
console.log(obj['first name'])	// Jack

表達(dá)式還可以用于定義對(duì)象上的方法名。

var person = {
  name: 'Jack',
  ['get' + 'Name']() {
    console.log(this.name)
  }
};
console.log(person.getName())	// Jack

注意 1： 屬性名表達(dá)式與屬性簡(jiǎn)潔表示，不能同時(shí)使用，會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
var name = 'Jack';
var age = 18;
var person = { [name] };
// Uncaught SyntaxError: Unexpected token '}'

上面的代碼會(huì)有語法錯(cuò)誤，正確的方式應(yīng)該是：

var name = 'Jack';
var person = { [name]: 18 };	// {Jack: 18}

注意 2： 屬性名必須是字符串類型的，如果屬性表達(dá)式是一個(gè)對(duì)象，則會(huì)先調(diào) toString() 先將對(duì)象轉(zhuǎn)為字符串，然后才進(jìn)行使用。

var key1 = {name: 'imooc'};
var key2 = {age: 7};
var obj = {
  [key1]: 'value content 1',
  [key2]: 'value content 2',
}
console.log(obj)	// {[object Object]: "value content 2"}

上面代碼中定義了兩個(gè)變量都是對(duì)象類型的，在調(diào)用 toString() 時(shí)會(huì)變?yōu)?[object Object] 屬性相同。所以，后面的屬性把前面的覆蓋了。

注意 3： 如果屬性的表達(dá)式是數(shù)組時(shí)，則和對(duì)象不一樣。數(shù)組在 toString() 后會(huì)變成一個(gè)字符串，所以對(duì)象屬性的表達(dá)式就是一個(gè)字符串。

var keys = ['imooc', '7'];
var obj = {
  [keys]: 'value content',
}
console.log(key.toString())	// "imooc,7"
console.log(obj)		// {imooc,7: "value content"}
console.log(obj[keys])	// "value content"

上面的代碼中可以看出來，數(shù)組 keys 在 toString() 得到了 imooc,7 作為 obj 的屬性。另外，我們也可以直接使用 keys 獲取 obj 對(duì)象上的值。

4. 方法的 name 屬性

你有沒有想過怎么獲取對(duì)象上方法的名字？ES6 增加了函數(shù)的 name 屬性，函數(shù)直接調(diào)用 name 會(huì)返回函數(shù)名。字面量對(duì)象上的方法也是函數(shù)，因此也有 name 屬性。如下實(shí)例：

var person = {
  name: "Jack",
  getName() {
    console.log(this.name);
  },
};

person.getName.name // "getName"

上面代碼中，getName() 方法的 name 屬性返回函數(shù)名（即方法名）
有兩種特殊情況：

• Function 構(gòu)造函數(shù)創(chuàng)造的函數(shù)，name 屬性返回 “anonymous”；
• bind 方法創(chuàng)造的函數(shù)，name 屬性返回 “bound” 加上原函數(shù)的名字。

(new Function()).name // "anonymous"

var doSomething = function() {
  // todo
};
doSomething.bind().name // "bound doSomething"

如果對(duì)象的方法是一個(gè) Symbol 值，那么 name 屬性返回的是帶中括號(hào)的 Symbol 的描述內(nèi)容。

const key1 = Symbol('description content');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description content]"
obj[key2].name // ""

5. 小結(jié)

本節(jié)介紹了 ES6 的對(duì)象擴(kuò)展內(nèi)容，學(xué)習(xí)了對(duì)象中屬性和方法的簡(jiǎn)寫、屬性的表達(dá)式以及注意的內(nèi)容。最后學(xué)習(xí)了函數(shù)的 name 屬性，可以返回函數(shù)名。