![React.js实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/858/26542858/b_26542858.jpg)
1.6 ES6
ECMAScript6(简称ES6)历时将近7年时间,在2015年6月份正式发布,由于这个新标准是在2015年指定,所以ES6也称为ES2015。ES6带来很多新语法、新特性,比如箭头函数(=>)、class(类)、模板字符串等。
相对ES5(2009年指定的ECMAScript标准)来说,ES6旨在以新语法和新特性来提高ECMAScript的开发效率,ES6的别名被定义为Harmony(和谐),读者应该也能体会到,ES6注定要带来一次优雅的编程变革,本节主要介绍ES6的一些新特性。
1.6.1 函数的扩展
ES6函数扩展的新特性给编程人员和阅读代码人员带来了很多便利之处,以前ECMAScript的函数形式看起来有点丑陋,并且在一些使用方面限制也较多。本小节主要讲述ES6在函数上都做了哪些扩展。
1. 函数参数默认值
在前端开发中,有时候需要写一些组件供其他开发者调用,这时需要提供对外接口。对外接口参数的传入由调用者决定,如果在调用对外接口时,没有传参,该怎么处理?ES6之前的函数参数默认值是这样实现的,代码如下:
【示例1-1】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P22_1.jpg?sign=1739277648-VknhanN9t5xwmiDfFP2unpci9JDVUBgB-0-153fa79269d26bd113f5e29e3dd1e767)
以前只能以这种变通的方式来帮助函数处理参数默认值,ES6提供了新的语法标准,使得函数参数默认值的处理变得简洁,代码如下:
【示例1-2】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P22_2.jpg?sign=1739277648-rAboClCzwyGoarV7sMEQz6fS5KuCsk1d-0-98c939f575b970fce0a4c82689c53afe)
2. 剩余(rest)参数
ES6发布之前,ECMAScript对函数的定义中存在一个arguments对象,该对象可以访问传入的参数列表。例如,要实现一个求和函数,以前ECMAScript的写法是这样的:
【示例1-3】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P22_3.jpg?sign=1739277648-ylgKRf98K8pscdOQ2WnwKgCiW9stJJov-0-6d88b02cfeeaf84a35ee6d23a71cb168)
上面示例是ES6之前实现求和功能的写法。
提示
arguments是一个类数组对象,不是一个真正的数组,所以需要使用Array.prototype.slice.call()方法将其转换成数组对象。
ES6在剩余参数上提供了新的语法标准,就上述求和功能,ES6可以这么写:
【示例1-4】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_1.jpg?sign=1739277648-HLUjT6knu8kiSmjUAWyfV5EKUCndExnR-0-1039215c423cec33c56fc952b66cdb30)
剩余参数的语法为:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_2.jpg?sign=1739277648-SF1rWSq1rC7HKtpG7ThUeYbXTroAjSF2-0-acd2a2096ec2c8ae114e585937260c66)
上述示例中,…values为剩余参数,调用该函数时,参数个数可以是不确定的。剩余参数是一个真正的数组,所以不需要转换,而且所有的数组特性剩余参数都具有。
提示
在使用剩余参数语法时,剩余参数后面是不可以再有参数的,否则会报错,比如“Function fn1(…rest, arg){}//”这种写法是错误的。
3. 箭头函数
所谓箭头函数,就是利用箭头(=>)来定义函数,属于匿名函数一类,如果读者了解过CoffeeScript(JavaScript的衍生语言),就不会对箭头函数陌生了。由于箭头函数在实现一些功能上比较简洁方便,所以这一个特性的使用率非常高。
箭头函数的语法也非常简单:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_3.jpg?sign=1739277648-xFHxUtfWo6s3boDsyVUgcbrGGIturjS4-0-33aa23ad53ccccf1ae94f9dbe2547e4a)
箭头前面是参数,后面是实现语句。例如:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_4.jpg?sign=1739277648-e05CoYRhLSxt1V1iKTzLi6Vl13uzmCvw-0-17edf47366ad5edd0c5f6bd68b39487c)
上述功能用ES6的箭头函数可以写为:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_5.jpg?sign=1739277648-QJT4Wxcl6V0F0USUgSwrjvPm8tyzyvcN-0-1f78bbd47deb125c6aa6e5235af638f6)
如果参数有多个,并且实现语句也有很多,那参数需要用小括号“()”括起来、用逗号隔开,多条实现语句用大括号“{}”括起来。假如要实现一个多数求和功能,可以这么写:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P23_6.jpg?sign=1739277648-cGFHNox9OOaBAgR3vGRtH8zXYRngdKvl-0-1b2e802f722d5d2a19e8a28b1d0afb37)
提示
箭头函数中大括号中的内容是被解释为代码块的,如果在大括号中返回一个对象,需要在对象外面再加一个小括号,例如:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P24_1.jpg?sign=1739277648-s7zLcOj323XrMW4TbfU016X2l1bhDzaZ-0-016d11448c7022132c2014fd099e6561)
1.6.2 对象的扩展
ES6之前的ECMAScript虽然说是面向对象语言,但其并没有像Java语言那样有类的概念,所以之前的ECMAScript编程不是完全面向对象编程,在对象的各种功能方面比较弱化。ES6标准给予了对象一些扩展,极大地提高了ECMAScript对象的可操作性。
1. 属性简化
项目中会经常遇到这种情况,一个函数的返回值有多个,以前的前端工程师可能会利用对象字面量或数组来模拟该功能,代码如下:
【示例1-5】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P24_2.jpg?sign=1739277648-gSB8Dvv8LM9TUZ2QBY5yRpQsleMy95td-0-cf63f78bfbc404f1c40257d14241a013)
ES6在表达式的结构上提供了简化功能,上面的例子用ES6的标准可以写为:
【示例1-6】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P24_3.jpg?sign=1739277648-I5qJzYesaewImXi7AhvaHF0fVXt52rPe-0-706ec326fe07d54d747915101eb94c09)
从上述示例可以看出,ES6是允许在对象中直接写变量的,属性名即为变量,属性值即为变量值,这种表达式的简化功能可以使项目代码变得简洁漂亮。
其实在ES6标准中,除了字面量属性可以简写外,方法也可以简写。代码如下:
【示例1-7】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P24_4.jpg?sign=1739277648-88H6Trgz3oz3svk77EI42AYpGqrr5VNx-0-6e3469482e93ee925c9d6ce93a900899)
与ES6的写法作为对比,代码如下:
【示例1-8】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P25_2.jpg?sign=1739277648-7HwmFaWuiJ4AtmZ7LDSEj3tiKEfyHgcy-0-5c044ed9347fdceb05b96bead72e75b3)
2. 属性名表达式
属性名用表达式代替,这个功能其实在ES6之前是有支持的,例如:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P25_3.jpg?sign=1739277648-ItDjIAsggjbkRZSbtKSKVRT2e2ZZnv59-0-e7f8d81b8bb1b22b6d36dfb607e6a449)
如果对象是用字面量来定义,那么这种属性名的表达式是不允许的。ES6扩展后,这个语法被引入到了对象的字面量中,例如:
【示例1-9】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P25_4.jpg?sign=1739277648-RnPTl4ZL1vUcxd3YHokmUSOHBDQqCFuZ-0-0d5a0027ec6794e903bf6fce405659bc)
在ES6中,这种方式的定义也适用于函数名的定义,例如:
【示例1-10】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P25_5.jpg?sign=1739277648-eAvAgm7dgbNJDXDZxhsCSvlWpLueeOvW-0-e5ccc790023ae822765cf6b8edee90a0)
提示
属性名表达式和属性简化是不可以同时使用的,例如:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P26_1.jpg?sign=1739277648-Bbjl2H5dUYlO6NHklh2PT154p7xseytZ-0-b165cc02a817083b088c64aa90895d8f)
1.6.3 class
有一定JavaScript经验的读者应该知道,JavaScript是可以面向对象编程的一门语言。但是ES6之前的JavaScript没有原生的类机制,不像Java、C++语言那样,直接可以用关键字class来定义一个类,并且类可以继承、重载等。那以前JavaScript没有class关键字,类概念是怎么实现的呢?
以前工程师在实现类概念时常常用函数原型来实现类系统,比如要定义一个Person类,可以这么写:
【示例1-11】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P26_2.jpg?sign=1739277648-3WlaM2WwhF8XXlq1MxU7MwRfFQXoalPV-0-89b55fd2b966027f961b8917310fd906)
ES6标准中类的基本语法为:
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P26_3.jpg?sign=1739277648-7eSd4C5w1gqtbYpPfKtiVkkAXlv3QI5L-0-8ffc2abaa23916fee6f288591e7f299b)
上述的示例用ES6的标准可以改写成这样:
【示例1-12】
![](https://epubservercos.yuewen.com/074AAD/15056704604178706/epubprivate/OEBPS/Images/Figure-P26_4.jpg?sign=1739277648-UUrQM6FBFUWeGD7PF13lc9BzaLr9PQz5-0-cc689a35e37a87d4be5ded1bb9f6b125)