ES8已经与17年6月底发布，而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6，并将ES6的语法应用到实战项目中。
阅读全文大约需要15分钟。
文中以 ES 表示 ECMAScript。
今年六月底，TC39发布新一版的ES 8（ES 2017），自从ES6在15年发布之后，每一年TC39都会发布新一版的ES语言标准。
我了解的前端开发者中，还有很多人没有用上ES6，有的人是觉得ES5用的挺好的，懒得去学ES6，有的人是有想学ES6的决心，但是苦于没有合适的机会（项目）去实战练习。
如果你用过React，Vue或Nodejs等，那你多多少少都会使用到一些ES6语法的。
ES8中的新特性，浏览器厂商和语法转换器还需要一段来实现，不如我们还是先聊聊怎么在你的项目中用上ES6吧。
什么是ES6？它和ES5有什么区别？
我们常说的JavaScript是指ES3和ES5，ES6是ECMAScript 6 的缩写。
对于经常写原生JavaScript的前端开发者来说，对ES5中的语法肯定比较熟悉，比如数组中的一些方法forEach，map，filter，some，every，indexOf，lastIndexOf，reduce，reduceRight ……，以及对象（Object）和函数（Function）都拓展了很多方法，这里不多赘叙。
ES6给前端开发者带来了很多的新的特性，可以更简单的实现更复杂的操作，很大的提高开发效率，提高代码的整洁性。
ES6中的新特性有很多，列一些比较常用的特性：
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Default Parameters（默认参数）
Template Literals （模板字符串）
Multi-line Strings （多行字符串）
Arrow Functions （箭头函数）
Enhanced Object Literals （增强的对象文本）
Promises
Classes（类）
Modules（模块）
Destructuring Assignment （解构赋值）
下面介绍下这些常用的ES6特性。
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
ES6提供了两个新的声明变量的关键字：let和const。而let和const要和块级作用域结合才能发挥其优势。
什么是块级作用域？
块级作用域的表示一对大括号{}包围的区域是一个独立的作用域，在这个作用域内用let声明的变量a，只能在这个作用域内被访问到，在这对大括号外面是访问不到a的。
当然，在块级作用域中还可以声明函数，该函数也是只能作用域内部才能被访问到。所以，在if、else、for甚至是一对单独的{}，都是一个块级作用域。
在ES6之前，是没有块级作用域的概念的，只有全局作用域和函数作用域两种，并且，用var声明的变量和用function声明的函数会被提前到作用域的顶部，这也就是我们常说的声明提前。
用let声明的变量是存在于距离声明语句最近的一个作用域（全局作用域、函数作用域或块级作用域）内的，在声明的时候，可选的将其初始化成一个值。
语法如下：
let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;
这一点与var的声明不同，用var声明的变量是属于离他最近的一个全局作用域或函数作用域中，且声明会被提前。在块级作用域中，var的声明与在全局作用域和函数作用域中是一样的。
块级作用域和let声明变量，解决了使用var一些痛点，相当于用let声明的变量不会被提前到作用域顶部。
有一点需要注意，let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前，在声明之前引用会报错该变量未被声明，且let不允许重复声明相同名称的变量，否则会报错。我们看下例子：
{
var hello = 'Hello';
let world = 'World';
}
console.log(hello);
console.log(world);
在Chrome浏览器的控制台（最新版本的Chrome已支持一部分ES6语法）执行一下，会发现有报错，见下图。constconst声明与let基本相同，它也是存在于块级作用域内。
有一点区别就是const声明的是常量，即不可被重新赋值改变原值。需要注意，const在声明常量的时候，必须同时给常量初始化赋值。如果只声明，不初始化值的话，会报错。见下面代码。
const MAX;
// Uncaught SyntaxError: Missing initializer in const declaration
声明变量的方法
在ES5中，可以通过var和function这两种方法来声明变量。
而在ES6中，除了增加了let和const两种声明方式，还有接下来要介绍的import和class的声明方式。
Default Parameters（默认参数）
默认参数是ES6中对函数拓展的一个特性，可以直接为函数的参数设置默认值，当某一参数设置了默认值时，如果调用函数的时候没有传该参数，则该参数的值为默认值，如果传了该参数，则该参数的值为传递的参数值。
在ES6之前，我们可以通过手动的方式，为函数的参数设置默认值，代码如下：
function sign (x) {
if (typeof x === 'undefined') {
x = 'default'
}
console.log(x)
}
sign('new sign') // new sign
sign() // default
将上述代码换成ES6模式，可以这样写：
function sign (x = 'default') {
console.log(x)
}
sign('new sign') // new sign
sign() // default
Template Literals （模板字符串）
ES6提供了模板字符串的特性，模板字符串是使用反引号（`）和${}实现字符串的拼接，字符串中可以嵌入变量。
在ES6之前，我们一般这样输出模板：
var name = 'Henry';
var welcome = 'Hello, ' + name + '!';
console.log(welcome); // Hello, Henry!
在ES6中，模板字符串可以这样拼接字符串：
let name = 'Henry';
let welcome = `Hello, ${ name }!`;
console.log(welcome); // Hello, Henry
模板字符串的计算规则是在两个反引号之间将字符串拼接到一起，如果反引号之间含有${}，则会计算这对大括号内的值，大括号里面可以是任意的JavaScript表达式，可以进行运算和引用对象属性。
let a = 3;
let number = `$ {a + 2 }`;
console.log(`${ number }`); // 5
let b = { c: 2, d: 4 };
console.log(`${ b.c * b.d }`) ; // 8
Multi-line Strings （多行字符串）
多行字符串是模板字符串的拓展，它跟模板字符串是同样的解析方式，不同的是，它可以拼接多行的字符串，且拼接的字符串中会保留所有的空格和缩进。
如果需要用字符串来拼接DOM树结构时，可以这样写：
let titleValue = 'This is a title'；
let htmlStr = `
This is a paragraph.
`;
上述代码中，能看到JavaScript代码和伪html代码的结合，完全可以将模板字符串的多行字符串封装成一个页面模板工具，绝对是轻量高效的。
还有，这种书写方式是不是很眼熟，跟React的JSX是不是很像双胞胎啊。
Arrow Functions （箭头函数）
在ES6中，可以使用箭头（=>）来声明一个函数，称作箭头函数。
ES5中声明一个函数，可以这样写：
var func = function (a) {
return a + 2;
}
将这个函数换成 箭头函数：
let func = a => a + 2;
如果函数有多个参数，需要用括号包含所有参数，只有一个参数的时候，可以省略括号，如果没有设置参数，也必须有括号。示例如下：
let func1 = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
let func2 = arg => {
console.log(arg)
}
let func3 = () => {
console.log(`This is an arrow function.`)
}
需要注意的是，箭头函数没有自己的this，如果在箭头函数内部使用this，那样这个this是箭头函数外部的this，也是因为箭头函数没有this，所以，箭头函数不能用作构造函数。如果用箭头函数来写回调函数时，就不用再将外部this保存起来了。
// ES5
function foo() {
var _this = this;
setTimeout(function() {
console.log('id:', _this.id);
}, 200)
}
// ES6
function foo() {
setTimeout(() => {
console.log(`id:${ this.id }`)
}, 200)
}
Enhanced Object Literals （增强的对象文本）
在ES6，对象字面值扩展支持在创建时设置原型，简写foo：foo分配，定义方法，加工父函数（super calls），计算属性名(动态)。总之，这些也带来了对象字面值和类声明紧密联系起来，让基于对象的设计得益于一些同样的便利。
var obj = {
// __proto__ 原型
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’ 简写
handler,
// Methods
toString() {
// Super calls 继承
return "d " + super.toString();
},
// Computed (dynamic) property names 计算属性名
['prop_' + (() => 42)()]: 'name'
};
Promises
Promise是异步编程的一种解决方案，它是一个对象，且只要开始就会一直进行下去，直到成功或者失败。就像它的字面意思诺言一样，一个诺言，只要被许下，就只有两种解决：成功或失败。
Promise的结果是由异步操作的结果决定的，且一旦结果形成，便不可再被改变，任何时候都得到同样的结果。
需要注意的是：Promise被新建后，便无法被取消，会执行下去，直到出现结果；如果不设置回调，Promise内部抛出的异常，不会反应到外部。