ECMAScript 6（以下简称ES6）是JavaScript言语的下一代范例。因为当前版本的ES6是在2015年宣布的，所以又称ECMAScript 2015。

最经常运用的ES6特征

var,let,const区分

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最经常运用的几个语法，基本上学会它们，我们就能够走遍世界都不怕啦！我会用最通俗易懂的言语和例子来解说它们，保证一看就懂，一学就会。

let, const

这两个的用处与var相似，都是用来声明变量的，但在现实应用中他俩都有各自的特别用处。
起首来看下面这个例子：

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

运用var两次输出都是obama，这是因为ES5只需全局作用域和函数作用域，没有块级作用域，这带来许多不合理的场景。第一种场景就是你如今看到的内层变量掩盖外层变量。而let则现实上为JavaScript新增了块级作用域。用它所声明的变量，只在let敕令地点的代码块内有用。

let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach

别的一个var带来的不合理场景就是用来计数的轮回变量泄漏为全局变量，看下面的例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有用。所以每一次轮回，新的i值都邑掩盖旧值，致使末了输出的是末了一轮的i的值。而运用let则不会涌现这个题目。

ES6进修笔记–let和const敕令

class, extends, super

export、import

export 敕令
模块功用主要由两个敕令组成：export和import。export敕令用于划定模块的对外接口，import敕令用于输入其他模块供应的功用。

一个模块就是一个自力的文件。该文件内部的一切变量，外部没法猎取。假如你愿望外部能够读取模块内部的某个变量，就必需运用export关键字输出该变量。下面是一个 JS 文件，内里运用export敕令输出变量。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

上面代码是profile.js文件，保留了用户信息。ES6 将其视为一个模块，内里用export敕令对外部输出了三个变量。

export的写法，除了像上面如许，另有别的一种。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

上面代码在export敕令背面，运用大括号指定所要输出的一组变量。它与前一种写法（直接安排在var语句前）是等价的，然则应当优先斟酌运用这类写法。因为如许就能够在剧本尾部，一眼看清楚输出了哪些变量。

export敕令除了输出变量，还能够输出函数或类（class）。

export function multiply(x, y) {
  return x * y;
};

上面代码对外输出一个函数multiply。

通常情况下，export输出的变量就是原本的名字，然则能够运用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码运用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2能够用差别的名字输出两次。

须要特别注重的是，export敕令划定的是对外的接口，必需与模块内部的变量竖立一一对应关联。

// 报错
export 1;

// 报错
var m = 1;
export m;

上面两种写法都邑报错，因为没有供应对外的接口。第一种写法直接输出1，第二种写法经由过程变量m，照样直接输出1。1只是一个值，不是接口。准确的写法是下面如许。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

上面三种写法都是准确的，划定了对外的接口m。其他剧本能够经由过程这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，竖立了一一对应的关联。

一样的，function和class的输出，也必需恪守如许的写法。

// 报错
function f() {}
export f;

// 准确
export function f() {};

// 准确
function f() {}
export {f};

别的，export语句输出的接口，与其对应的值是动态绑定关联，即经由过程该接口，能够取到模块内部及时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500毫秒今后变成baz。

这一点与 CommonJS 范例完整差别。CommonJS 模块输出的是值的缓存，不存在动态更新，详见下文《ES6模块加载的实质》一节。

末了，export敕令能够出如今模块的任何位置，只需处于模块顶层就能够。假如处于块级作用域内，就会报错，下一节的import敕令也是云云。这是因为处于前提代码块当中，就没法做静态优化了，违犯了ES6模块的设想初志。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代码中，export语句放在函数当中，结果报错。

import 敕令

运用export敕令定义了模块的对外接口今后，其他 JS 文件就能够经由过程import敕令加载这个模块。

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import敕令，用于加载profile.js文件，并从中输入变量。import敕令接收一对大括号，内里指定要从其他模块导入的变量名。大括号内里的变量名，必需与被导入模块（profile.js）对外接口的称号雷同。

假如想为输入的变量从新取一个名字，import敕令要运用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile';

import背面的from指定模块文件的位置，能够是相对途径，也能够是绝对途径，.js途径能够省略。假如只是模块名，不带有途径，那末必需有设置文件，通知 JavaScript 引擎该模块的位置。

import {myMethod} from 'util';

上面代码中，util是模块文件名，因为不带有途径，必需经由过程设置，通知引擎怎样取到这个模块。

注重，import敕令具有提拔结果，会提拔到全部模块的头部，起首实行。

foo();

import { foo } from 'my_module';

上面的代码不会报错，因为import的实行早于foo的挪用。这类行动的实质是，import敕令是编译阶段实行的，在代码运转之前。

因为import是静态实行，所以不能运用表达式和变量，这些只需在运转时才获得结果的语法组织。

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

上面三种写法都邑报错，因为它们用到了表达式、变量和if组织。在静态分析阶段，这些语法都是没法获得值的。

末了，import语句会实行所加载的模块，因而能够有下面的写法。

import 'lodash';

上面代码仅仅实行lodash模块，然则不输入任何值。

假如屡次反复实行统一句import语句，那末只会实行一次，而不会实行屡次。

import 'lodash';
import 'lodash';

上面代码加载了两次lodash，然则只会实行一次。

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';

上面代码中，虽然foo和bar在两个语句中加载，然则它们对应的是统一个my_module实例。也就是说，import语句是 Singleton 形式。

进修ES6，这里引见两个比较好的进修材料：
阮一峰先生写的入门书 ECMAScript 6 入门
Zachary_Wang简书分享的内容：30分钟控制ES6/ES2015核心内容
前端基本进阶（九）：详解面向对象、组织函数、原型与原型链