ES6历险记（二）：我们的项目中常用的ES6语法（上篇

还没开始学ECMAScript 6？还没在项目中使用过babel？我的天！前端原始人说的就是你吧！赶快加入到前端现代化的行列吧！

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为是在2015年发布的，所以又称ECMAScript 2015。 给个栾一峰老师ES6讲解的链接http://es6.ruanyifeng.com/

废话不多说，进入正题。

1.从let和const两兄弟开始

在ES6之前我们都是使用 var 来声明一个变量。在函数中声明，那它的作用域就是函数级的并且声明的变量会提前到函数的顶部，这就是传说中的函数变量提升。在函数外声明变量，那它的作用域就是全局的。举个变量提升的栗子：

以上的代码会被翻译成

所以无论如何word变量都会被创建，这就是声明提升。

接下来我们来看看let和const有啥本事

我们通常用let和const来声明变量，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

在函数内部

在代码块内部（就是大括号里面呗）

来看看下面的代码把

let的作用域是在它所在当前代码块，不会被提升到当前函数的最顶部。如果enable为false，那么else中的额代码就会报错，因为word未声明。

再来看看const

不过如果const定义的变量是引用类型，对象本身的属性还是可以变的，举个栗子：

下面这种是不行的，因为引用的不是一个地址了

2.超好用的字符串模板

我们往往会遇到需要把变量和字符串拼接起来的场景

是不是感觉很蛋疼，一不小心就会拼错，用字符串模板来解救你

没错就是这么叼，需要注意的是字符串模板使用的是反引号，需要替换的变量使用 ${}来包裹。它还能实现多行文本换行的输出

运行结果为

3.函数的魅力

函数默认参数

以前我们是怎么给函数定义默认值的？

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

箭头函数

箭头函数的特点有以下几个

不需要function关键字来创建函数

省略return关键字

继承当前上下文的 this 关键字

举个栗子

传统的表示法

当你的函数有且仅有一个参数的时候，是可以省略掉参数括号的。当你函数返回有且仅有一个表达式的时候可以省略{}， 举个反例，有多个参数和多行代码的情况下必须这样写：

那什么是继承当前上下文的this呢？举一个栗子你就懂

4.解构-数据访问便利

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构

以前我们想从一个对象获取信息

使用解构会方便很多

5.拓展对象的偷懒能力

以前对象都是以键值对的形式书写

ES6中怎么写

只要键值名字一样就能简写啦。还有对象中方法的简写，举个栗子对比下

ES5写法

ES6写法

看出来差别了吧，妈妈再也不用担心我写错function啦！