必须掌握的ES6新特性

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

 

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

一、Default Parameters（默认参数） in ES6
二、Template Literals （模板文本）in ES6
三、Multi-line Strings （多行字符串）in ES6
四、Destructuring Assignment （解构赋值）in ES6
五、Enhanced Object Literals （加强的对象文本）in ES6
六、Arrow Functions （箭头函数）in ES6
七、Promises in ES6
八、Block-Scoped Constructs Let and Const（块做用域构造Let and Const）
九、Classes（类） in ES6
十、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); // 3000

 

但在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); // 3000

 

或者咱们能够在文件中把整个模块导入, 并命名为 service：

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