前言
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
也就是说，ES6就是ES2015。
目前并不是所有浏览器都能兼容ES6全部特性，我们可以使用Babel工具来转换成es5
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码
最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
一、let 、const命令
1、let用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
2、不存在变量提升，let不像var那样会发生“变量提升”现象。所以，变量一定要在声明后使用，否则报错。
console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError
var foo =2;let bar =2;
3、在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。
const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。
4、ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。也就是“暂时性死区”。
二、es6模块（module）
JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
这有可能导致两个问题：
- 一方面js代码变得很臃肿，难以维护
- 另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug
- 在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。
在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？
首先定义：
//content.js
define('content.js', function(){
return'A cat';
})
然后require：
//index.js
require(['./content.js'], function(animal){
console.log(animal); //A cat
})
CommonJS写法
//index.js
var animal = require('./content.js')
//content.js
module.exports = 'A cat'
ES6的写法
//index.js
import animal from'./content'//content.js
export default'A cat'
// ES6模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”，即ES6可以在编译时就完成模块加载，效率要比CommonJS模块的加载方式高。当然，这也导致了没法引用ES6模块本身，因为它不是对象。
浏览器使用ES6模块的语法如下。
<script type="module" src="foo.js"></script>
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个ES6模块。
Node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块。
ES6的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
1、export命令
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。例如，
// profile.js
export var firstName ='Michael';
export var lastName ='Jackson';
export var year =1958;
也可以是下面这种写法（优先考虑使用），
// profile.js
var firstName ='Michael';var lastName ='Jackson';var year =1958;
export {firstName, lastName, year};
export命令除了输出变量，还可以输出函数或类（class）。
export function multiply(x, y){return x * y;};
可以使用as关键字重命名
function v1(){...}
function v2(){...}
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
注意：export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此，这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。下面代码中，export语句放在函数之中，结果报错。
function foo(){
export default 'bar' // SyntaxError
}
foo()
2、import命令
使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。
import {firstName, lastName, year} from './profile';
上面代码的import命令，就用于加载profile.js文件，并从中输入变量。import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名
使用as关键字将输入的变量重新命名
import { lastName as surname } from './profile';
import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module';
上面的代码不会报错，因为import的执行早于foo的调用。
import语句会执行所加载的模块，但是不输入任何值。
import 'lodash';
import 也可以引用文件夹/目录
如import router from './router'
这里router是个目录 里面有个index.js文件
3、模块整体加载
circle模块有2个方法
// circle.js
export function area(radius){return Math.PI * radius * radius;}
export function circumference(radius){return2* Math.PI * radius;}
通过使用*号加载整个模块
import * as circle from './circle';
console.log('圆面积：'+ circle.area(4));
console.log('圆周长：'+ circle.circumference(14));
三、class类
1、class的基本用法
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类
//定义类
class Point{
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return'('+this.x +', '+this.y +')';
}
}
constructor这就是构造方法，而this关键字则代表实例对象
定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。
使用时直接对类使用new命令
class Bar{
doStuff(){
console.log('stuff');
}
}
var b =new Bar();
b.doStuff() // "stuff"
2、constructor构造方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor(){}
3、class表达式
与函数一样，类也可以使用表达式的形式定义。
const MyClass = class Me{
getClassName(){
return Me.name;
}
};
这个类的名字是MyClass而不是Me，Me只在Class的内部代码可用，指代当前类。
如果类的内部没用到的话，可以省略Me
const MyClass = class {/* ... */};
采用Class表达式，可以写出立即执行的Class。
let person =newclass{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"
4、class类继承
通过extends关键字实现继承
class ColorPoint extends Point{}
四、arrow function箭头函数
function(i){
return i + 1;
} //ES5
(i) => i + 1//ES6
如果方程比较复杂，则需要用{}把代码包起来：
function(x, y){
x++;
y--;
return x + y;
}
(x, y) => {
x++; y--;
return x+y
}
在对象方法中使用this
传统的写法需要将this传给self,再用self来指代this
says(say){
var self = this;
setTimeout(function(){
console.log(self.type + ' says ' + say)
}, 1000)
使用es6的写法
classAnimal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //animal says hi
当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
五、template string
当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库，比如mustache等等
$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
用反引号（）来标识起始，用${}`来引用变量，而且所有的空格和缩进都会被保留在输出之中
六、default, rest
default很简单，意思就是默认值，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat' 来指定默认值
function animal(type){
type = type || 'cat'
console.log(type)
}
animal()
用ES6我们而已直接这么写：
function animal(type = 'cat'){
console.log(type)
}
animal()
rest语法也很简单，看例子：
function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]
参考阅读
https://segmentfault.com/a/1190000004365693#articleHeader7
http://es6.ruanyifeng.com/