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 = `

${ titleValue }

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内部抛出的异常，不会反应到外部。