必須掌握的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