目前不使用Es7的主要原因是大量瀏覽器僅支持ES 6或者ES5版本。

1悼嫉、為什么要使用Es6 艇潭，是一次重大的版本升級，它秉承著最大化兼容已有代碼的設(shè)計理念戏蔑。過去編寫的JS代碼還能正常運(yùn)行蹋凝。∽芸茫可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作鳍寂，提高開發(fā)人員的效率

ES6排名前十位的最佳特性列表

• Default Parametes （默認(rèn)參數(shù)）
• Template Literals （模板文本）
• Multi-line Strings（多行字符串）
• Destructuring Assignment （解構(gòu)賦值）
• Enhanced Object Literals （增強(qiáng)的對象文本）
• Arrow Functions （箭頭函數(shù)）
• Promises in ES 6
• Block-Scoped Constructs Let and Const （塊作用域構(gòu)造）
• Classes（類）
• Modules（模塊）

2.簡單用法：

1、可以把默認(rèn)值放在函數(shù)聲明里
var link = function(height = 50, color = 'red', url='http://baidu.com'){
.....
}
2情龄、

    ES6之前方式只能使用組合字符串方法
     var name = 'Your name is' + first + ' '+ last + ' . ';
     ES6中迄汛，可以使用新的語法 ${name} ,并將其放在反引號里；
    var name = `Your name is ${first} ${last}`;

3刃唤、用反引號解決多行字符串

Es5多行字符串表達(dá)
var roadPoem = '李悝隔心，'
+ '關(guān)關(guān)雎鳩白群。'
+ '春來江水綠如藍(lán)尚胞。'
+ '能不憶江南？

var roadPoem = `李悝帜慢，
關(guān)關(guān)雎鳩笼裳。
春來江水綠如藍(lán)。
能不憶江南粱玲？
`

4躬柬、解構(gòu)賦值
解構(gòu)可能是一個比較難以掌握的概念，先從簡單的賦值講起抽减，其中house和mouse 是key允青，同時house和mouse也是一個變量，在Es5中是這樣的：

var data = $('body').data();  //data擁有兩個屬性house和mouse
house = data.house;
mouse = data.mouse;

在Node.js中用ES5是這樣的：

var jsonMiddleware = require('body-parser').jsonMiddleware;
var body = req.body;  //body兩個屬性username和password
username = body.username;
password = body.password;

在ES6中卵沉，可以使用以下語句來代替上面ES5代碼

var {house,mouse} = $('body').data();
var {jsonmiddleware} = require('body-parser');
var {username, password} = req.body;

這個也同樣適用于數(shù)組：

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

5颠锉、增強(qiáng)的對象文本
下面是ES5對象文本：

//文本對象
var serviceBase = {port: 3000, url: 'baidu.com'},
getAccounts = function() {
  return [1,2,3]
}
var accountServiceES 5 = {
   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()
}

如果開發(fā)者想讓它更有意思，可以用Object.create 從ServiceBase繼承原型的方法：

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

其實(shí)對于以上兩種并不是完全一致的史汗。Object.Create()方法創(chuàng)建一個新對象琼掠，其是使用現(xiàn)有的對象來繼承創(chuàng)建一個新的對象，而accountService ES 5 并且繼承現(xiàn)有對象停撞。
所以在Es6 的對象文本中瓷蛙，既可以直接分配getAccounts:getAccounts,也可以只需用一個getAccounts悼瓮。此外，可以通過_ proto_并不是通過（proto）設(shè)置屬性：

var serviceBase = {port: 3000, url: 'baidu.com'},
getAccounts = function() {return [1,2,3]};
var accountService = {
      _proto_:serviceBase,
      getAccounts,

     //另外艰猬，可以調(diào)用super防范横堡，以及使用動態(tài)key值（valueOf_1_2_3）;
    toString() {
        return JSON.stringify((super.valueOf()));
    },
    getUrl() {
        return "http://" + this.url + ':' +this.port
    },
    [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};
console.log(accountService)

6、箭頭函數(shù)
在ES6中冠桃，有豐富的箭頭函數(shù)翅萤。比如，以前我們使用閉包腊满，this總是預(yù)期之外的改變套么，而箭頭函數(shù)的好處在于，現(xiàn)在this可以按照你的預(yù)期使用了碳蛋，深處箭頭函數(shù)里胚泌，this還是原來的this。
有了箭頭函數(shù)肃弟，我們就不必用that=this或self=this玷室、_this=this那么麻煩了。
下面是ES5

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

在ES6中則不需要用_this = this;

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

但不是完全否定之前的方案笤受，ES6委員會決定穷缤，以前的function的傳遞方式也是一個很好的方案，所以它們?nèi)匀槐Ａ袅艘郧暗墓δ堋?br> 下面是另一個例子箩兽，通過call傳遞文本給logUpperCase()函數(shù)津肛，在ES5中：

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

而在ES6中并不需要用_this浪費(fèi)時間：

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

注意！汗贫！在ES6中身坐，=>可以混合和匹配老的函數(shù)一起使用。當(dāng)在一行代碼中用了箭頭函數(shù)后落包，它就變成了一個表達(dá)式部蛇，其將暗中返回單個語句的結(jié)果。如果結(jié)果超過一行咐蝇，將需要明確使用return

在箭頭函數(shù)中涯鲁，對于單個參數(shù)，括號是可省略的有序，但當(dāng)參數(shù)超過一個時就需要括號了抹腿。在ES5代碼中有明確的返回功能：

var ids = ['5687868csdfsfisoduf', 'jsdlksjdk234234lk42jk34'];
var messages = ids.map(function (value, index, list){
    return 'ID of' + index + 'elment is' + value+ ' ';
})

在ES6中有更加嚴(yán)謹(jǐn)?shù)陌姹荆瑓?shù)需要被包含在括號里并且是隱式地返回：

var ids =['5687868csdfsfisoduf', 'jsdlksjdk234234lk42jk34'];
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value}`);   //隱式返回

7笔呀、Promise實(shí)現(xiàn)
下面是一個簡單的用setTimeout()函數(shù)實(shí)現(xiàn)的異步延遲加載函數(shù)：

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

在ES6中幢踏，可以用Promise重寫，雖然在此實(shí)例中并不能減少大量的代碼许师。甚至多些了數(shù)行房蝉，但是邏輯卻清晰了不少：

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

8僚匆、塊作用域let
在ES6中，let并不是一個“花哨”的特性搭幻，是更復(fù)雜的咧擂。let是一種新的變量聲明方式，允許我們把變量作用域控制在塊級里面檀蹋，用大括號定義代碼塊松申，在ES5中，塊級作用域起步了任何作用：

 function calculateTotalAmount (vip) {
    //只能使用var方式定義變量
    var amount = 0;
        if(vip) {
            //在此定義會覆蓋
             var amount = 1俯逾；
        }
        {
            //在此定義會覆蓋
            var amount = 1000;
            {
                   //在此定義會覆蓋
                      var amount = 10000;
            }
        }
      return amount;
}
//打印輸出內(nèi)容
console.log(calculateTotalAmount(true));
以上代碼結(jié)果將返回1000贸桶，這真是一個bug。在ES6中桌肴，用let限制塊級作用域皇筛，而var限制函數(shù)作用域。

function calculateTotalAmount (vip) {
      //使用var方式定義變量
      var amount = 0;
      if (vip) {
          //使用let定義的局部變量
          let amount = 1;  //第1個let
       }
       {
            let amount = 100坠七； //第2個let
            {
                let amount = 1000水醋； //第3個let
             }
        }
    return amount;
}
console.log(calculateTotalAmount(true));
程序結(jié)果將會是0.因為塊作用域中有了let,如果（amount=1）,那么這個表達(dá)式將返回1。

9彪置、類
在之前的javascript版本中拄踪，對于類的創(chuàng)建和使用時令人非常頭疼的一件事。不同于直接使用class命名一個類的語言（在javascript中class關(guān)鍵字被保留拳魁，但是沒有任何作用）惶桐，因為沒有官方的類功能，加上大量繼承模型的出現(xiàn)的猛，造成了jaascript類使用的困難和不規(guī)范耀盗。
用ES6寫一個類想虎，ES6沒有用函數(shù)卦尊，而是使用原型實(shí)現(xiàn)類，我們創(chuàng)建一個類baseModel舌厨，并且在這個類里定義一個constructor()和一個getName()方法：

class baseModel {
    constructor(options, data ){  //class constructor,Node.js 5.6暫時不支持options = { }, data = [ ]這樣傳參
        this.name = 'Base';
        this.url = 'http://baidu.com/api';
        this.data = data;
        this.options = options;
    }
    getName() {
        console.log(`Class name: ${this.name}`)
    }
}

!!!這里對options和data使用了默認(rèn)參數(shù)值岂却，方法名也不需要加function關(guān)鍵字，而且冒號“：”也不需要了裙椭；另一個大的區(qū)別就是不需要分配屬性this□锪ǎ現(xiàn)在設(shè)置一個屬性的值，只需簡單的在構(gòu)造函數(shù)中分配即可揉燃。
10扫尺、模塊
ES6中可以用模塊import和export操作了。
在ES5中炊汤，可以在<script>中直接寫可以運(yùn)行的代碼（簡稱IIFE）正驻，或一些庫弊攘，如AMD。然而在ES6中姑曙，可以用export導(dǎo)入類襟交。下面舉個例子，在ES5中伤靠，module.js有port變量和getAccounts()方法：

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

在ES5中捣域，main.js需要依賴require('module')導(dǎo)入module.js:

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

但在ES6中，將用export and import進(jìn)行一個模塊的引入和拋出宴合。例如焕梅，以下是用ES6寫的module.js文件庫：

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

如果用ES6將上述的module.js導(dǎo)入到文件main.js中，就變得非常簡單了卦洽，只需要用import { port,getAccounts} from 'module';
console.log(port); //3000
或者可以在main.js中導(dǎo)入整個模塊丘侠，并命名為service:
import * as service from 'module';
console.log(service.port); //3000