前言

在使用Vue或者React后，大家会发现ES6的语法已经成为了一种通用的规则。所以如果你还没有掌握ES6语法的话，在使用这些框架的时候，会觉得很吃力。

其实ES6有很多新特性，但是在使用上却不多，今天这篇文章我们就来看看ES6中使用比较频繁的新特性，我们先掌握这些部分就可以快速的上手项目了。

ES6

const和let

在ES5及之前的版本中，我们都是通过var来定义一个常量或者变量。但是由于在Javascript中存在变量提升的概念，函数中任何位置声明的变量都是被提到函数的顶部，我们看看下面的例子。

变量提升

上面的代码中，由于存在变量提升，同时由于Javascript是函数级作用域，变量v的定义会被提升到function的顶部，因此实际alert出的值为undefined。

ES6中新增的const和let关键字，在定义常量和变量时不会存在变量提升的情况，而且通过let或者const定义的值必须在声明后使用。

而且很重要的一点就是，const和let关键字定义的值是在块级作用域内部。有一道很经典的题目是，通过循环内部创建函数输出索引值。在ES5中一般通过闭包来做，而使用ES6直接通过let声明变量即可。

let

模板字符串

在ES5写法中，如果一段字符串中包含变量值的话，一般通过+号来拼接字符串。而在ES6中通过模板字符串可以很轻松实现这个功能。

模板字符串

模板字符串的第二个功能就是通过反引号(``)实现多行字符串输出。

多行字符串输出

函数默认参数

在ES6中给函数的参数提供了默认值，直接通过等号(=)赋值即为默认值。

函数参数默认值

箭头函数

ES6中的箭头函数应该是ES6新特性中使用最频繁的一种了，箭头函数表现为以下三个特点。

1. 定义的函数不再需要function关键字

2. 继承当前上下文的this

3. 省略return关键字

箭头函数有几个常用写法，当函数中的参数只有一个时，可以省略掉括号；当函数返回只有一个表达式的时候可以省略大括号{}。

箭头函数

对象初始化

在ES5中定义一个对象时是通过键值对的方式，而且键名与值名都要书写，而在ES6中如果键值名相同的话，可以直接简写。

对象初始化

在ES5中，如果需要为一个对象添加方法需要通过function关键字，而在ES6中可以直接省略掉冒号与function关键字。如下图所示。

对象添加方法

解构

在ES6中新增了数组，对象，函数参数解构，非常方便用于信息的提取。

解构

展开运算符

展开运算符并不是ES6所特有的，在其他语言类似于Java中也存在，表示变长参数。

展开运算符频繁用于数组或者对象中，但是有一点需要主要的是，展开运算符必须用在最后一个元素上。

展开运算符

导入import和导出export

在目前流行的框架中，都是通过import和export关键字实现模块的导入和导出。其基本使用方法如下。

import和export

Promise

Promise是一种异步编程的解决方案，目前在一些主流的前端框架比如AngularJS，Vue，React中都使用了Promise，最常见的是HTTP请求后的响应是通过Promise实现的。

Promise

结束语

今天这篇文章主要总结了下ES6中比较常用的新特性，这些是我们必须掌握的，你学会了吗？