必须掌握的ES6新特性

ES6（ECMAScript2015）的出现，让前端开发者收到一份惊喜，它简洁的新语法、强大的新特性，带给我们更便捷和顺畅的编码体验，赞！

以下是ES6排名前十的最佳特性列表（排名不分先后）：

1、Default Parameters（默认参数） in ES6
2、Template Literals （模板文本）in ES6
3、Multi-line Strings （多行字符串）in ES6
4、Destructuring Assignment （解构赋值）in ES6
5、Enhanced Object Literals （增强的对象文本）in ES6
6、Arrow Functions （箭头函数）in ES6
7、Promises in ES6
8、Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
9、Classes（类） in ES6
10、Modules（模块） in ES6

接下来，我们就来学习这十个最经典和实用的ES6新特性。

1.Default Parameters（默认参数） in ES6

//ES5我们这样定义默认参数
var link = function (height, color, url) {
    var height = height || 50;
    var color = color || 'red';
    var url = url || 'http://azat.co';
    ...
}

这样做是有一点小问题的，当默认参数为0时就暴露问题了，因为在JavaScript中，0表示false。

// ES6可以默认值写在函数声明里
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

2.Template Literals（模板对象） in ES6

// ES5的字符串拼接
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

ES6的字符串远不用如此麻烦，我们可以在反引号（~符的unshift键）中使用新语法 ${变量名称} 表示。

// ES6
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

3.Multi-line Strings （多行字符串）in ES6

// ES5 多行字符串需要 + 号连接
var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
var fourAgreements = 'You have the right to be you.n
    You can only be you when you do your best.';

然而在ES6中，仅仅用反引号就可以解决了：

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`;

4.Destructuring Assignment （解构赋值）in ES6

这是一个比较难掌握的知识点，我们先用比较简单的例子切入。

下面这些情况都是很常见的：

//ES5中获取data对象中的属性
var data = response.data,    // data has properties info and imageLink
    info = data.info,
    imageLink = data.imageLink 

//ES5获取一个模块中的方法
var stringHandle = require('toolModule').stringHandle ;

ES6中，我们可以使用解构处理以上两种情况：

var {info, imageLink} = response.data;
var {stringHandle} = require('toolModule')

右侧的response.data和require('toolModule')都是对象，与左侧的 { } 格式相同，首先要保证这一点。个人理解{info, imageLink} = response.data像是{info, imageLink} = {response.data.info, response.data.imageLink}这样一个对应关系，然后我们就可以直接使用info和imageLink这两个变量了。

解构还有很多高级用法和用途，深入学习请戳 http://es6.ruanyifeng.com/#docs/destructuring

5.Enhanced Object Literals （增强的对象字面量）in ES6

下面是一个典型ES5对象文本，里面有一些方法和属性：

var serviceBase = {port: 3000, url: 'azat.co'},
    getAccounts = function(){return [1,2,3]};
var accountServiceES5 = {
  port: serviceBase.port,
  url: serviceBase.url,
  getAccounts: getAccounts,
   toString: function() {
      return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ':' + this.port},
  valueOf_1_2_3: getAccounts()
}

如果我们想让它更有意思，我们可以用Object.create从serviceBase继承原型的方法：

var accountServiceES5ObjectCreate = Object.create(serviceBase)
var accountServiceES5ObjectCreate = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ':' + this.port},
  valueOf_1_2_3: getAccounts()
}

6.Arrow Functions in（箭头函数） ES6

这是我迫不及待想讲的一个特征，CoffeeScript 就是因为它丰富的箭头函数让很多开发者喜爱。在ES6中，也有了丰富的箭头函数。这些丰富的箭头是令人惊讶的因为它们将使许多操作变成现实，比如，

以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

有了箭头函数在ES6中， 我们就不必用that = this或 self =  this  或 _this = this  或.bind(this)。例如，下面的代码用ES5就不是很优雅：

var _this = this;
$('.btn').click(function(event){
  _this.sendData();
})

在ES6中就不需要用 _this = this：

$('.btn').click((event) =>{
  this.sendData();
})

关于箭头函数，我们这里简单说明即可，因为之前的一篇文章详细说过这个新特性，想深入学习的请戳 http://www.cnblogs.com/Double-Zhang/p/5441703.html

7. Promises in ES6

Promises 是一个有争议的话题。因此有许多略微不同的promise 实现语法。Q，bluebird，deferred.js，vow, avow, jquery 一些可以列出名字的。也有人说我们不需要promises，仅仅使用异步，生成器，回调等就够了。但令人高兴的是，在ES6中有标准的Promise实现。

下面是一个简单的用setTimeout()实现的异步延迟加载函数:

setTimeout(function(){
  console.log('Yay!');
}, 1000);

在ES6中，我们可以用promise重写:

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000);
}).then(function() {
  console.log('Yay!');
});

或者用ES6的箭头函数：

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000);
}).then(()=> {
  console.log('Yay!');
});

8.Block-Scoped Constructs Let and Const（块作用域和构造let和const）

在ES6代码中，你可能已经看到那熟悉的身影let。在ES6里let并不是一个花俏的特性，它是更复杂的。Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。

在ES5中，大括号的块级作用域起不了任何作用：

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    var amount = 1;
  }
  {
    var amount = 100;
    {
      var amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));　　　　// 1000，最后定义的生效，块级作用域无作用

块级作用域中let定义的变量，只在此块级作用域中生效，外层无法访问。

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    let amount = 1;
  }
  {
    let amount = 100;
    {
      let amount = 1000;
    }
  }
  return amount;
}

console.log(calculateTotalAmount(true));　　// 0，用let定义的变量都不可被最外层访问

这里简单提一下，假如if句改为 if( vip ){ amount = 1 } ，那么结果是1，因为这样相当于定义了一个全局变量。

我们知道，const用于声明常量，同一常量只可声明一次，声明后不可修改，而下面的代码中对于同一常量声明了多次，却没有报错，原因就是每个常量都只属于它所在的块级作用域，互不影响。

function calculateTotalAmount (vip) {
  const amount = 0;
  if (vip) {
    const amount = 1;
  }
  {
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));　　// 0

9. Classes （类）in ES6

现在就来看看如何用ES6写一个类吧。ES6没有用函数, 而是使用原型实现类。我们创建一个类baseModel ，并且在这个类里定义了一个constructor 和一个 getName()方法：

class baseModel {
  constructor(options, data) {
    this.name = 'Base';
    this.url = 'http://azat.co/api';
    this.data = data;
    this.options = options;
   }

    getName() { // class method
        console.log(`Class name: ${this.name}`);
    }
}

AccountModel 从类baseModel 中继承而来:

class AccountModel extends baseModel {
    constructor(options, data) {
　　　　//为了调用父级构造函数，可用super()参数传递：
　　　　super({private: true}, ['32113123123', '524214691']); //call the parent method with super
       this.name = 'Account Model';
       this.url +='/accounts/';
    }
// 可以把 accountData 设置成一个属性：
　　get accountsData() { //calculated attribute getter
     return this.data;
   }
}

----------------------

let accounts = new AccountModel(5);
accounts.getName();    //Class name: Account Model
console.log('Data is %s', accounts.accountsData);    //Data is  32113123123,524214691

10. Modules （模块）in ES6

众所周知，在ES6以前JavaScript并不支持本地的模块。人们想出了AMD，RequireJS，CommonJS以及其它解决方法。现在ES6中可以用模块import 和export 操作了。

在ES5中，你可以在 <script>中直接写可以运行的代码（简称IIFE），或者一些库像AMD。然而在ES6中，你可以用export导入你的类。下面举个例子，在ES5中,module.js有port变量和getAccounts 方法:

// dev.js文件
module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

在ES5中，需要依赖require(‘module’) 导入dev.js：

var service = require('dev.js');
console.log(service.port); //

但在ES6中，我们将用export and import。例如，这是我们用ES6 写的dev.js文件库：

// dev.js文件
export var port = 3000;
export function getAccounts(url) {
  ...
}

如果用ES6来导入到文件中，我们需用import {name} from ‘my-module’语法，例如：

import {port, getAccounts} from 'dev';
console.log(port); //

或者我们可以在文件中把整个模块导入, 并命名为 service：

import * as service from 'dev';
console.log(service.port); //