ES6 Essentials

随着javascript这门前端语言攻城掠地，觉得有必要深入了解一下这个语言了，为了大家更好的使用这门不是很好的语言，前端的大师们不断造轮子，随着es6的发布，es7的酝酿，这门语言越来越完备了。es6在es5的基础上，加入了大量的语法糖，现在总结一下自己在实际项目中es6的应用

对象字面量定义的变化

• 字面量定义对象
• 属性值的简写
• 属性名为变量
• 方法简写

箭头函数

• 箭头函数格式
• this作用域
• 箭头函数的优点及使用场景

对象字面量定义

不管在es5还是es6中，javascript 的书写规范中也建议大家使用字面量对象来定义初始化javascript 对象。这个没有什么不同

var person = {
   name : 'zhangsan',
   age : 20
}

属性值的简写

在es5中定义一个对象，它的属性值是变量，我们会按以下代码

var name='bird man'
var age=20
var country=function(){
   return 'i am English'
}

var person={
  name : name,
  age : age,
  country : country
}

在es6中如果属性名与属性值的变量名相同，我们可以省略值的书写，它隐含在es6中，一旦习惯了语法，你会发现代码的可读性和开发效率会得到提升，上面的代码我们可以写成下面的形式

var name='bird man'
var age=20
var country=function(){
   return 'i am English'
}

var person={
  name,
  age,
  country
}

属性名是一个变量

有时我们定义一个对象时，基于变量或其他JavaScript表达式的名称的属性，而不是您预先知道的值。如下面的代码片段在ES5中。

var expertise = 'journalism'
var person = {
   name : 'zhangsan',
   age : 23
}
person[expertise] = {
  years: 5,
  interests: ['international', 'politics', 'internet']
}

ES6中的对象字面量不限于使用静态名称的声明。也可以使用动态属性名称，可以将任何表达式包装在方括号中，并将其用作属性名称。当达到声明时，将计算得到的表达式并将其用作属性名称。以下示例展示了我们刚才看到的代码片段如何在一个步骤中声明person对象，而不必求助于第二个语句，

var expertise = 'journalism'
var person = {
   name : 'zhangsan',
   age : 23,
  [expertise] = {
      years: 5,
     interests: ['international', 'politics', 'internet']
   }
}

与其同时我们上面讲过当属性值与变量名相同时，可以将属性值省略掉，上面的代码可以简写为

var expertise = 'journalism'
var journalism = {
    years: 5,
     interests: ['international', 'politics', 'internet']
}
var person = {
   name : 'zhangsan',
   age : 23,
  [expertise]
}

还有其他情况当我们的属性名是一个对象的属性，我们可以直接用吗，是的，我们没必要通过第三个语句来添加属性 grocery 到对象 groceries，如示例

var grocery = {
  id: 'bananas',
  name: 'Bananas',
  units: 6,
  price: 10,
  currency: 'USD'
}
var groceries = {
  [grocery.id]: grocery
}

我们写代码可能常常遇到这样的情况，可能是每当一个函数接收到一个参数，然后它应该使用它来构建一个对象。在ES5代码中，您需要分配一个声明对象字面量的变量，然后添加动态属性，然后返回对象。

function getEnvelope (type, description) {
  var envelope = {
    data: {}
  }
  envelope[type] = description
  return envelope
}

在es6代码中我们可以直接这样写，简单明了

function getEnvelope (type, description) {
  return {
    data: {},
    [type]: description
  }
}

方法定义

通常，您可以通过向对象添加属性来声明对象上的方法，如下一个代码段所示

var emitter ={
     var emit : function(){eventName}
 }

而在es5中就加入了对象的get ，set 方法，它们的写法与其他的定义普通方法有区别，如下代码

var reserves = 4
var spaceship = {
  get fuel () {
    return reserves
  },
  set fuel (value) {
    reserves = value
  }
}

从ES6开始，可以使用类似的语法在对象字面量上声明常规方法。唯一的区别是，你需要省略一个前缀，如get和set。同时提供了一种替代传统方法声明的简洁方法，您不需要使用function关键字。以下示例显示了使用ES6语法定义spaceship 。

var reserves = 4
var spaceship = {
  get fuel () {
    return reserves
  },
  set fuel (value) {
    reserves = value
  },
  deplete () {
    reserves = 0
  }
}
spaceship.fuel = 10
spaceship.deplete()