前端是时候学习ES6了

摘要：众所周知，前端开发通常指的是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript。随着前端在网页开发中越来越受到重视，对于前端语法代码的标准化也有的更深一层次的要求，ES6便是JavaScript语言的最新一代标准。本文从什么是ES6和ES6所具有的新特性以及前端人员为什么要学习ES6这三个方面进行阐述。

关键词：ES6、JavaScript、前端

1、ES6和它的新特性

在细说ES6之前先简要述说下什么是ES以及ES的产生原因。

1.1、ES的产生原因：

JavaScript是一门开源的语言，因为开源所以衍生出了各种JavaScript的框架如VUE、angular.JS、node.JS等。然而随着前端的不断发展，使用场景不断变得多样且复杂，语法规则的不同以及诸多特殊的例外，导致奇怪的语法问题层出不穷，因此催生了ES的诞生。

1.2、什么是ES：

ES即ECMAScript，根据百科上所描述的是一种由ECMA国际通过ECMA-262标准化的脚本程序设计语言。简单来说，ECMAScript是JavaScript语言的一个国际标准，它为JavaScript定义了语言语法、变量类型、继承、标准函数库等内容，进一步规范化了JavaScript语言。而JavaScript则是对ECMAScript的实现和扩展，用一个等式来说明他们之间的关系：ES+ BOM + DOM = JS。从中可以很明显的看出来ES不对各种BOM和DOM节点进行定义，它只去规范化语法、以及各种变量类型等。

1.3、什么是ES6：

通过对ES的叙述可以大概猜到ES6是其最新的一个版本，它于2015年6月发布（故有些地方也称作ECMAScript2015），语言规范在ES5的基础上进一步扩容，同时ES6增加了许多必要的特性。ES6的最终目标是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级的开发语言。

1.4、ES6所具有的新特性：

1.4.1、块级作用域

什么是块级作用域呢？即一对花括号{}中的所有语句都属于一个块，在这之中定义的变量在块之外都是不可见的（undefined），这个就是块级作用域。它不同于函数作用域（函数作用域类似的，变量和参数在函数之外都输不可见的），在ES6之前JS是不支持块级作用域的（如图1-4-1）。因此花括号内的变量与外面的是等同的，因此结果是1，而在ES6中，由于新增了块级作用域，因此花括号内的变量只能为该块内部使用，因此结果是0。ES6支持块级作用域后，解决了例如因变量提升导致的内层变量覆盖外层变量的问题、循环变量变成全局变量的问题等等。

1-4-1块级作用域

1.4.2、默认参数

默认参数即指函数调用时省略了实参时所使用的值，它大大方便了使用者对函数的调用，增强了使用函数的灵活性。然而在JS中要设置默认参数往往使用的逻辑表达式（例如：var height = hh 20 ），在参数较少的情况下问题不是很突出，但是当参数较多时重复类似的代码就会增多并且每次调用函数时都会去一一执行逻辑表达式，无形上损耗了函数的性能。因此为了解决这个问题以及使得代码更加简洁ES6推荐这种方式来使用默认参数（如图1-4-2）。

1-4-2 ES6定义默认参数

1.4.3、箭头函数

箭头函数是ES6新增加的一种语法，其语法结构可以概括为：标识符=>表达式。它与我们一般常使用的函数有一个微妙的区别，箭头函数没有它自己的this值，它的this值是继承自外面的。而在一般函数内部如果直接打印this值，通常都是undefined，因此往往需要额外在外部写一个变量来将this值导入到内部函数中（例如：var _sel = this）。在ES6的箭头函数中则不存在这种问题，因此使得代码得到了进一步的简化和规范。

1.4.4、Promise

个人认为ES6的新特性中最重要的就是这个promise了。所谓的promise，就是一个用来传递异步操作消息的对象，在执行一些异步操作时（通常是ajax请求），需要获得上一步操作的结果才能执行下一步，然而去判定上一步的操作是否完成是很困难的，因此我们通常会将下一步的操作嵌套在上一步中，当数量多时就会产生层层的嵌套，不仅降低了性能还使得代码的易读性变差。虽然有时候会使用setTimeOut设置一个定时器来解决层层嵌套的问题，但是这只是治标不治本，当网络延时较大的时候往往起不到作用，为此ES6引入了promise。

Promise对象有以下两个特点：（1）状态不受外界的影响。它有三种状态分别是pending（进行中）、resolved（已完成）、rejected（失败）。当我们初始化promise时，它的状态是pending，如果操作成功了则状态变成resolved同理失败则变成了rejected，我们可以使用promise对象去判定上一步操作的完成情况，当XXX时去执行一些我们想要的操作，即使用链式操作代替了层层嵌套。（2）状态的改变只存在两种情况：由pending变成resolved（使用的是resolve方法）或者由pending变成rejected（使用的是reject方法）。

虽然说promise的优点很明显，但是正所谓人无完人金无足赤，它也始终存在着一些问题。第一、promise是无法取消的，只要建立了promise就不能取消了。第二、如果不设置回调，promise内部抛出的错误，外部是接收不到的。第三、pending状态包含了从刚刚开始到快完成的片刻，我们不能详细确定具体是哪一个时间段。因此promise还有待完善的地方，或许在日后的ES中这些问题将得到解决。

1-4-4 promise的使用示例

1.4.5、模块的导入与导出

模块在大型应用中随处可见，使用一个个模块代码不仅能提升效率还能实现最基本的代码复用重用。但是由于一些缺陷，JS的模块导入导出相比较其他语言来说相当复杂，甚至还需要一些第三方工具。然而在ES6中可以直接使用import和export来实现模块的导入导出，从而实现代码的模块化，使得JS能够逐步向企业级应用靠齐。

2、前端人员为什么要学习ES6？

关于为什么要学习ES6？肯定每个人的想法有所不同，有的人会认为就算不学习ES6对于前端的工作来说并不会有太大的影响，不过是代码多些复杂些罢了。但是随着ES6的不断推陈出新，加之主流浏览器对ES6的大力支持，ES6还是在众多项目中生根发芽，假使同样的两个项目一个因为ES6而性能更高自然在这场PK中取胜。

同时，ES6推出的最终目标是能够成长为企业级应用的开发语言，因此使用ES6可以开发更多更复杂的应用，扩宽了JavaScript的市场渠道。

而且不断有新的前端框架采用ES6的语法进行编写（例如Vue.JS），如果前端人员没有对ES6有一个大致的学习是很难理解和使用这些框架的，因此不管是对自身还是对项目应用来说，前端人员急需要学习ES6才能不被淘汰。

3、小结

综上所述，ES6的发展是大势所趋，不管是从浏览器厂家对其的支持程度上还是其对ES5的扩展来看，ES6的前景广阔，同时给前端人员带来了诸多便利之处，因此前端人员是时候学习ES6了。