ECMAScript6標準新增長的內容

首選吶，你得了解一下javascript和ECMAScript的關係：

編程語言JavaScript是ECMAScript的實現和擴展，由ECMA（一個相似W3C的標準組織）參與進行標準化。ECMAScript定義了：

1. 語言語法——語法解析規則、關鍵字、語句、聲明、運算符等。

2. 類型——布爾型、數字、字符串、對象等。

3. 原型和繼承

4. 內建對象和函數的標準庫-json、Math、數組方法、對象自省方法等。

ecmascript不定義html和css的相關功能，也不定義相似DOM的api,這些都在獨立的標準中定義。ecmascript涵蓋了各類環境中js的應用場景，不管是瀏覽器環境仍是相似nodejs的非瀏覽器環境。

總結而言嘛（我的理解）：javascript=ECMAScript+Bom+Dom;

下面給你們介紹一下ECMAScript6新標準裏面新增長的幾項重要的內容：

• Default parameters(默認參數) in es6
  還記得咱們之前不得不經過下面方式來定義默認參數：

  var link = function (height, color, url) {
  var height = height || 50;
  var color = color || 'red';
  var url = url || 'http://azat.co';
  ...
  }

       但在ES6,咱們直接能夠把默認值放在函數聲明裏：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {  ...  }

　　

• Template Literals（模板對象）in es6
  在其餘語言中，使用模板和插入值是在字符串裏面輸出變量的一種方式，所以，在es5能夠這樣組合一個字符串。

  var name = 'Your name is ' + first + ' ' + last + '.';
  var url = 'http://localhost:3000/api/messages/' + id;

       可是在ES6中，咱們可使用使用新的語法$(NAME)：

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

　　

• Multi-line Strings （多行字符串）in ES6
  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.`;

　　

• Destructuring Assignment （解構賦值）in ES6
  解構多是一個比較難以掌握的概念。先從一個簡單的賦值講起，其中house 和 mouse是key，同時house 和mouse也是一個變量，在ES5中是這樣：

  var data = $('body').data(), // data has properties house and mouse
  house = data.house,
  mouse = data.mouse;

  以及在node.js中用ES5是這樣：

  var jsonMiddleware = require('body-parser').jsonMiddleware ;
  var body = req.body, // body has username and password
  username = body.username,
  password = body.password;

       在ES6，咱們可使用這些語句代替上面的ES5代碼：

var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body, // body has username and password
   username = body.username,
   password = body.password;

      這個一樣也適用於數組，很是讚的用法：

var [col1, col2]  = $('.column'),
[line1, line2, line3, , line5] = file.split('n');

　　

• Enhanced Object Literals （加強的對象字面量）in ES6

• Arrow Functions in（箭頭函數） 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();
})

　　下面這是一個另外的例子，咱們經過call傳遞文本給logUpperCase() 函數在ES5中：

var logUpperCase = function() {
  var _this = this;
  
  this.string = this.string.toUpperCase();
  return function () {
    return console.log(_this.string);
  }
}
  
logUpperCase.call({ string: 'ES6 rocks' })();

　　而在ES6，咱們並不須要用_this浪費時間：

var logUpperCase = function() {
  this.string = this.string.toUpperCase();
  return () => console.log(this.string);
}
logUpperCase.call({ string: 'ES6 rocks' })();

　　請注意，只要你願意，在ES6中=>能夠混合和匹配老的函數一塊兒使用。當在一行代碼中用了箭頭函數，它就變成了一個表達式。它將暗地裏返回單個語句的結果。若是你超過了一行，將須要明確使用return。

       這是用ES5代碼建立一個消息數組：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(function (value) {
  return "ID is " + value; // explicit return
});

　　用ES6是這樣：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(value => `ID is ${value}`); // implicit return

　　這裏使用到了咱們上文提到過的字符串模板。

       在箭頭函數中，對於單個參數，括號()是可選的，但當你超過一個參數的時候你就須要他們。

       在ES5代碼有明確的返回功能：

var messages = ids.map(function (value, index, list) {
  return 'ID of ' + index + ' element is ' + value + ' '; // explicit return
});

　　在ES6中有更加嚴謹的版本，參數須要被包含在括號裏而且它是隱式的返回：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return

 Promise in ES6　

       主要是用來解決異步回調黑洞的問題。

       例如在ES5中若是咱們有不少的嵌套邏輯在setTimeout()回調函數中，

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

　　看起來是否是特別的頭疼，可是在ES6中，咱們利用promise範式就能夠很好地解決這個問題：

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

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;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }  
  return amount;
}
console.log(calculateTotalAmount(true));

　　結果將返回1000，這真是一個bug。在ES6中，咱們用let限制塊級做用域。而var是限制函數做用域。

function calculateTotalAmount (vip) {
  var amount = 0; // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1; // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100; // first amount is still 0
    {
      let amount = 1000; // first amount is still 0
    }
  }  
  return amount;
}
  
console.log(calculateTotalAmount(true));

　　這個結果將會是0，由於塊做用域中有了let。若是（amount=1）.那麼這個表達式將返回1。談到const，就更加容易了；它就是一個不變量，也是塊級做用域就像let同樣。下面是一個演示，這裏有一堆常量，它們互不影響，由於它們屬於不一樣的塊級做用域:

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

 Classes （類）in ES6

        類的建立和使用真是一件使人頭疼的事情在過去的ES5中，由於沒有一個關鍵字class （它被保留，可是什麼也不能作）。

        用ES5寫一個類，有不少種方法，這裏就先不說了。如今就來看看如何用ES6寫一個類吧。ES6沒有用函數, 而是使用原型實現類。咱們建立一個類baseModel ，而且在這個類裏定義了一個constructor 和一個 getName()方法：

class baseModel {
  constructor(options, data) { // class constructor，node.js 5.6暫時不支持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}`);
    }
}

　　注意咱們對options 和data使用了默認參數值。此外方法名也不須要加function關鍵字，並且冒號(：)也不須要了。另一個大的區別就是你不須要分配屬性this。如今設置一個屬性的值，只需簡單的在構造函數中分配。

      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/';
    }

 Modules （模塊）in ES6

       衆所周知，在ES6之前JavaScript並不支持本地的模塊。人們想出了AMD，RequireJS，CommonJS以及其它解決方法。如今ES6中能夠用模塊import 和export 操做了。

       在ES5中，你能夠在<script>中直接寫能夠運行的代碼（簡稱IIFE），或者一些庫像AMD。然而在ES6中，你能夠用export導入你的類。下面舉個例子，在ES5中,module.js有port變量和getAccounts 方法:

module.exports = {  port: 3000,  getAccounts: function() {    ...  }}

　　在ES5中，main.js須要依賴require(‘module’) 導入module.js：

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

　　但在ES6中，咱們將用export and import。例如，這是咱們用ES6 寫的module.js文件庫：

export var port = 3000;export function getAccounts(url) {  ...}

　　若是用ES6來導入到文件main.js中，咱們需用import {name} from ‘my-module’語法，例如：

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

　　或者咱們能夠在main.js中把整個模塊導入, 並命名爲 service：

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