ES6

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

1、为什么要使用Es6 ，是一次重大的版本升级，它秉承着最大化兼容已有代码的设计理念。过去编写的JS代码还能正常运行。。可以更加方便的实现很多复杂的操作，提高开发人员的效率

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

• Default Parametes （默认参数）
• Template Literals （模板文本）
• Multi-line Strings（多行字符串）
• Destructuring Assignment （解构赋值）
• Enhanced Object Literals （增强的对象文本）
• Arrow Functions （箭头函数）
• Promises in ES 6
• Block-Scoped Constructs Let and Const （块作用域构造）
• Classes（类）
• Modules（模块）

2.简单用法：

1、可以把默认值放在函数声明里
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多行字符串表达
var roadPoem = '李悝，'
+ '关关雎鸠。'
+ '春来江水绿如蓝。'
+ '能不忆江南？

var roadPoem = `李悝，
关关雎鸠。
春来江水绿如蓝。
能不忆江南？
`

4、解构赋值
解构可能是一个比较难以掌握的概念，先从简单的赋值讲起，其中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;

这个也同样适用于数组：

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

5、增强的对象文本
下面是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()
}

如果开发者想让它更有意思，可以用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();
}

其实对于以上两种并不是完全一致的。Object.Create()方法创建一个新对象，其是使用现有的对象来继承创建一个新的对象，而accountService ES 5 并且继承现有对象。
所以在Es6 的对象文本中，既可以直接分配getAccounts:getAccounts,也可以只需用一个getAccounts。此外，可以通过_ proto_并不是通过（proto）设置属性：

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

     //另外，可以调用super防范，以及使用动态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、箭头函数
在ES6中，有丰富的箭头函数。比如，以前我们使用闭包，this总是预期之外的改变，而箭头函数的好处在于，现在this可以按照你的预期使用了，深处箭头函数里，this还是原来的this。
有了箭头函数，我们就不必用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的传递方式也是一个很好的方案，所以它们仍然保留了以前的功能。
下面是另一个例子，通过call传递文本给logUpperCase()函数，在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浪费时间：

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

注意！！在ES6中，=>可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后，它就变成了一个表达式，其将暗中返回单个语句的结果。如果结果超过一行，将需要明确使用return

在箭头函数中，对于单个参数，括号是可省略的，但当参数超过一个时就需要括号了。在ES5代码中有明确的返回功能：

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

在ES6中有更加严谨的版本，参数需要被包含在括号里并且是隐式地返回：

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

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

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

在ES6中，可以用Promise重写，虽然在此实例中并不能减少大量的代码。甚至多些了数行，但是逻辑却清晰了不少：

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

8、块作用域let
在ES6中，let并不是一个“花哨”的特性，是更复杂的。let是一种新的变量声明方式，允许我们把变量作用域控制在块级里面，用大括号定义代码块，在ES5中，块级作用域起步了任何作用：

 function calculateTotalAmount (vip) {
    //只能使用var方式定义变量
    var amount = 0;
        if(vip) {
            //在此定义会覆盖
             var amount = 1；
        }
        {
            //在此定义会覆盖
            var amount = 1000;
            {
                   //在此定义会覆盖
                      var amount = 10000;
            }
        }
      return amount;
}
//打印输出内容
console.log(calculateTotalAmount(true));
以上代码结果将返回1000，这真是一个bug。在ES6中，用let限制块级作用域，而var限制函数作用域。

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));
程序结果将会是0.因为块作用域中有了let,如果（amount=1）,那么这个表达式将返回1。

9、类
在之前的javascript版本中，对于类的创建和使用时令人非常头疼的一件事。不同于直接使用class命名一个类的语言（在javascript中class关键字被保留，但是没有任何作用），因为没有官方的类功能，加上大量继承模型的出现，造成了jaascript类使用的困难和不规范。
用ES6写一个类，ES6没有用函数，而是使用原型实现类，我们创建一个类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使用了默认参数值，方法名也不需要加function关键字，而且冒号“：”也不需要了；另一个大的区别就是不需要分配属性this。现在设置一个属性的值，只需简单的在构造函数中分配即可。
10、模块
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);

但在ES6中，将用export and import进行一个模块的引入和抛出。例如，以下是用ES6写的module.js文件库：

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

如果用ES6将上述的module.js导入到文件main.js中，就变得非常简单了，只需要用import { port,getAccounts} from 'module';
console.log(port); //3000
或者可以在main.js中导入整个模块，并命名为service:
import * as service from 'module';
console.log(service.port); //3000