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的语法知识,可自行查阅相关资料学习。