1.2 ES 6常用语法简介

ECMAScript是JavaScript语言标准，ECMAScript又有多个版本，目前我们使用最多的版本是ECMAScript 6，简称ES 6，使用最新语法能够带给我们更顺畅、更高效的开发体验。正因如此，在学习Taro或者React之前，都应该好好学习一下ES 6甚至更新的语法规范，所以本节先整体介绍项目开发中使用最多的一些ES 6语法。

1.2.1 变量定义新方式——let、const

曾经，我们只知道var可以声明一个变量，并且在项目中大量使用。不知道你是否遇到过类似以下的问题。

1.声明一个变量后，在下面的代码中又声明了一次，程序依然能够运行

以上代码在正常情况下的表现差强人意，但如果我们现在在做圆周长的计算，定义了一个变量表示圆周率π，不幸的是同事也使用了这个变量名。

在理想情况下，我们这样定义变量：

如果同事在开发过程中，也定义了相同的变量名，则会出错。例如：

在这个需求里，任何时候都不希望PI的值发生改变，这样的值在程序中被称为常量，在ES6中使用const声明即可。如果在后面的代码中，const声明的变量值被修改，则会抛出错误，从而提示开发者。

2.定义变量前使用这个变量，不会报错，而是会告诉你它是undefined

这个问题在面试中也会经常被问及，原因是var声明的变量会被提升至作用域顶端，我们把这个特性叫作变量提升。这个特性会在开发过程中引入很多问题，因此不建议使用，我们可以使用let或const声明变量来规避这个问题。

3.作用域问题

关于作用域问题，有一个很经典的例子。我们通常使用setTimeout定时器来定义一个期望在未来执行的操作，代码如下：

执行以上代码，我们期望在1s后，打印从0到4这5个数字，但最终输出的结果却是5个5，为什么呢？其实问题出在作用域上，我们可以使用let声明变量，从而生成一个暂时性死区，来解决这个问题。代码示例如下：

1.2.2 告别字符串拼接——模板字符串

模板字符串是对字符串的增强，使用模板字符串替代普通字符串拼接能提高代码可读性。模板字符串使用反引号（`）标识，除了实现字符串拼接，还能在字符串中使用表达式或者已定义的变量，进一步增强字符串能力。例如：

1.2.3 优雅获取数组或对象中的值——解构赋值

ES 6获取已定义数组或对象中的属性更便捷，以前在编写代码时，获取数组或对象中的值的方式如下：

使用解构赋值，可以提升代码的可读性。例如：

深层结构的数组或对象一样可用。例如：

rest元素或属性解构赋值。例如：

1.2.4 二次元函数——箭头函数

箭头函数可以更方便快捷地创建一个函数，并且箭头函数中的this指向函数定义时所在的上下文环境，规避this指向偏移发生的问题。值得一提的是，不能使用箭头函数定义构造器。例如：

如果函数体包含多条语句，就需要使用大括号将代码括起来，并使用return返回函数值。例如：

1.2.5 异步处理——Promise

前端开发时常伴随异步处理，在过去很长一段时间里，都是使用回调函数处理异步操作。假设我们现在停顿一秒计算1+2得到结果3，而后停顿一秒计算3+4，如果使用回调函数，可能需要这样编写：

回调函数嵌套问题如此可见一斑，这个问题叫作回调地狱。为了解决上述问题，ES6引入了可读性更高的特性支持异步处理，那就是Promise。Promise允许使用链式调用方式处理异步队列。使用Promise重写上述操作，示例如下：

这样，嵌套的问题是不是解决了，代码的可读性是不是更高了？如果再使用async，就更易读了，示例如下：

有了这些语法特性，更方便处理异步操作，使用Taro开发项目时也会经常用到这些语法。

1.2.6 面向对象编程——class

以前的JavaScript面向对象编程不纯粹，ES 6引入了类的概念，是原型继承的另一种书写形式。代码示例如下：

有了类的概念，就可以轻松实现继承，例如现在有一个类表示人，我们需要在这个类中派生出一个代表女性的类，使用extends关键字即可轻松实现，代码示例如下：

1.2.7 模块化——import、export

ES 6实现了模块化标准，可以使用export导出模块，import导入模块。例如：

以上介绍的相关内容是我们在使用Taro开发小程序过程中经常会使用的ES 6语法，如果你想了解更多关于ES 6的语法知识，可自行查阅相关资料学习。