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阮一峰