es6對象字面量加強

相對於ES5,ES6的對象字面量獲得了很大程度的加強。這些改進咱們能夠輸入更少的代碼同時語法更易於理解。那就一塊兒來看看對象加強的功能。對象字面量簡寫(Object Literal Shorthand)、對象方法簡寫(Object Method Shorthand)、計算對象鍵(Object key)、對象解構(Object Destructuring)。

ES6對象字面量簡寫

javascript中的對象使用對象字面量很容易建立，如今來使用ES5來建立一個對象，在music中兩個對象屬性 type和heat，他們的分別也是來之於type和heat。代碼以下：

ES5對象字面量

var type = 'rock';
var heat = '50%';
var music = {
  type: type,
  heat: heat
};
console.log(music);  // Object {type: "rock", heat: "50%"}

ES6對象字面量

然而咱們如今能夠使用ES6的對象從新寫這個例子。在ES6中如何你的對象屬性名和固然做用域中的變量名相同，那麼如今必需要在把這個type或heat書寫兩次。ES6的對象會自動的幫你完成鍵到值的賦值。這樣看起來代碼更優雅也能節省一半的字符輸入量。代碼以下：

var type = 'rock';
var heat = '50%';
var music = {
  type,
  heat
};
console.log(music);  // Object {type: "rock", heat: "50%"}

ES5返回一個對象

假如咱們建立一個函數他作了一些運算而後要返回這個函數中某些完成運算的變量爲一個對象(函數返回多個值)，好比：type或heat。在ES5中咱們是這樣寫的。

function getMusic() {
  var type = 'rock';
  var heat = '50%';
  // 一些運算
  return { type: type, heat: heat };
}
console.log(getMusic().type);   // rock
console.log(getMusic().heat);   // 50%

ES6返回一個對象

如今使用ES6簡潔優雅的重寫這個函數返回一個對象，這裏仍是使用上面的函數，只是在返回對象的時候使用ES6的語法

function getMusic() {
  var type = 'rock';
  var heat = '50%';
  // 一些運算
  return { type, heat };
}
console.log(getMusic().type); // rock
console.log(getMusic().heat); // 50%

ES6對象方法簡寫

對象不單單是用來保存數據，他還能夠用來保存函數。在ES5中咱們也是經過給定一個鍵而後再給定一個匿名函數或命名函數。代碼以下：

ES5對象方法

var type = 'rock';
var heat = '50%';
var music = {
  type: type,
  heat: heat,
  description: function() {
    return '當前音樂風格爲' + this.type + ',' + this.heat + '都喜歡';
  }
}
console.log(music.description()); // 當前音樂風格爲rock,50%都喜歡

ES6對象方法

使用ES6語法重寫上面的music對象，必需要在寫上對象鍵而後還要寫上function關鍵字。只須要方法名和圓括號再跟上花括號便可。代碼以下：

var type = 'rock';
var heat = '50%';
var music = {
  type,
  heat,
  description() {
    return '當前音樂風格爲' + this.type + ',' + this.heat + '都喜歡';
  }
}
console.log(music.description()); // 當前音樂風格爲rock,50%都喜歡

ES6對象方法簡寫和字符串模板

仍是使用上面的對象music，咱們有一個方法description他返回的是一個字符串，可是字符串的拼接過程能夠說是至關吃力的，若是稍微不注意很容易出錯。使用ES6的字符串模將完美解決這個問題。字符串模板使用``將字符串包裹起來裏面的變量使用${}包裹起來。代碼以下：

var type = 'rock';
var heat = '50%';
var music = {
  type,
  heat,
  description() {
    return `當前音樂風格爲${this.type},${this.heat}都喜歡'`;
  }
}
console.log(music.description()); // 當前音樂風格爲rock,50%都喜歡'

ES6計算對象鍵(Keys)

在ES5中對象能夠理解爲一個關聯數組或一個hashmaps。在ES5中建立對象的鍵就三種object.xx、object['xx']、Object.defineProperty能夠用來構建對象的鍵。在ES6中能夠使用更多的方法來建立。

ES6計算對象鍵

在此次的music對象中，咱們要使用一個變量field做爲咱們對象的鍵，heat做爲這個鍵的值。代碼以下：

var heat = '50%';
var field = 'rock';
var music = {
  [field]: heat
}
console.log(music); // Object {rock: "50%"}

在ES5中也能夠使用以下代碼定義，可是~~額。

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {value: value, enumerable: true, configurable: true, writable: true});
  } else {
    obj[key] = value;
  }
  return obj;
}
var heat = '50%';
var field = 'rock';
var music = _defineProperty({}, field, heat);
console.log(music)

ES6對象鍵計算表達式

能夠在對象鍵的變量上調用方法 wow！

var heat = '50%';
var field = 'Rock and Roll';
var music = {
  [field.toLowerCase()]: heat
}
console.log(music); // Object {rock and roll: "50%"}

ES5一樣也是能夠實現，只是~~

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {value: value, enumerable: true, configurable: true, writable: true});
  } else {
    obj[key] = value;
  }
  return obj;
}
var heat = '50%';
var field = 'Rock and Roll';
var music = _defineProperty({}, field.toLowerCase(), heat);
console.log(music); // Object {rock and roll: "50%"}

還能夠使用不一樣的數組方法爲咱們的對象鍵賦值，使用[]將會計算對象的鍵值。代碼以下：

let people = [20, 25, 30];
let music = {
  people,
  [people]: 'They all love rock and roll',
  [people.length]: 'object key is 3',
  [{}]: 'empty object'
}
console.log(music);
console.log(music.people);
console.log(music['people']);
console.log(music[people]);
console.log(music[people.length]);
console.log(music['[object Object]']);
console.log(music[music]);
/*
Object {3: "object key is 3", people: Array[3], 20,25,30: "They all love rock and roll", [object Object]: "empty object"}
[20, 25, 30]
[20, 25, 30]
They all love rock and roll
object key is 3
empty object
empty object
*/

ES6對象解構

把對象或者數組中的數據取出使用是咱們常常要使用的功能，ES6有新的功能讓咱們快捷拆分對象和數組中的值。在=號右邊是要解構的對象或數組，=號左邊是要接收建立的變量。代碼以下：

對象解構1

=號左邊的類型要和右邊對應，好比右邊是一個對象類型則左邊也須要使用對象字面量包裹。右邊是數組則左邊也須要使用數組包裹。

let music = {
  type: 'rock',
  heat: '50%'
};
let { type, heat } = music;
console.log(type, heat);  // rock 50%

數組解構

let people = [20, 25, 30]
let [young, oldYoung] = people;
console.log(young, oldYoung) // 20 25

ES6對象解構重命名

有時候咱們不想使用解構對象中的鍵來新建立變量，須要解構後重命名爲新的變量名。這是能夠使用重命名解構語法

let music = {
  type: 'rock',
  heat: '50%'
}
let { type: newType, heat: newHeat } = music;
console.log(newType, newHeat); // rock 50%

ES6對象解構其餘類型

若是在一個對象中的值包含其餘的數據類型一樣是能夠解構出來的。代碼以下：

let music = {
  type: ['rock', 'pop', 'jazz'],
  heat: '50%',
}
let { type, heat } = music;
console.log(type, heat); // ["rock", "pop", "jazz"] "50%"

ES6解構函數參數

這是一個很是實用的功能，能夠將傳遞進來的函數對象參數直接解構爲變量，在函數中能夠方便調用。這隻須要簡單的對象解構函數便可完成。代碼以下：

function getMusic({ type, heat }) {
  console.log(type, heat);
}
getMusic({ type: 'rock', heat: '80%'}); // rock 80%

ES6對象字面量加強總結：

在ES6中新增了不少功能（方便書寫理解和避免代碼問題）。這裏學習了對象字面量簡寫，不用再書寫兩次代碼。還有對象方法簡寫也是一樣道理。接着是字符串模板，一種更優雅的字符串拼接方式。還有對象鍵運算，他使用了[]能夠爲對象鍵賦值時進行一些運算。最後是ES6的解構語法。利用這些新特性咱們的代碼將會寫的更優雅和易於理解。

參考鏈接

• MDN
• ES6阮一峯