- React.js实战
- 刘江虹 赵荣娇
- 1711字
- 2025-02-20 23:46:27
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】

以前只能以这种变通的方式来帮助函数处理参数默认值,ES6提供了新的语法标准,使得函数参数默认值的处理变得简洁,代码如下:
【示例1-2】

2. 剩余(rest)参数
ES6发布之前,ECMAScript对函数的定义中存在一个arguments对象,该对象可以访问传入的参数列表。例如,要实现一个求和函数,以前ECMAScript的写法是这样的:
【示例1-3】

上面示例是ES6之前实现求和功能的写法。
提示
arguments是一个类数组对象,不是一个真正的数组,所以需要使用Array.prototype.slice.call()方法将其转换成数组对象。
ES6在剩余参数上提供了新的语法标准,就上述求和功能,ES6可以这么写:
【示例1-4】

剩余参数的语法为:

上述示例中,…values为剩余参数,调用该函数时,参数个数可以是不确定的。剩余参数是一个真正的数组,所以不需要转换,而且所有的数组特性剩余参数都具有。
提示
在使用剩余参数语法时,剩余参数后面是不可以再有参数的,否则会报错,比如“Function fn1(…rest, arg){}//”这种写法是错误的。
3. 箭头函数
所谓箭头函数,就是利用箭头(=>)来定义函数,属于匿名函数一类,如果读者了解过CoffeeScript(JavaScript的衍生语言),就不会对箭头函数陌生了。由于箭头函数在实现一些功能上比较简洁方便,所以这一个特性的使用率非常高。
箭头函数的语法也非常简单:

箭头前面是参数,后面是实现语句。例如:

上述功能用ES6的箭头函数可以写为:

如果参数有多个,并且实现语句也有很多,那参数需要用小括号“()”括起来、用逗号隔开,多条实现语句用大括号“{}”括起来。假如要实现一个多数求和功能,可以这么写:

提示
箭头函数中大括号中的内容是被解释为代码块的,如果在大括号中返回一个对象,需要在对象外面再加一个小括号,例如:

1.6.2 对象的扩展
ES6之前的ECMAScript虽然说是面向对象语言,但其并没有像Java语言那样有类的概念,所以之前的ECMAScript编程不是完全面向对象编程,在对象的各种功能方面比较弱化。ES6标准给予了对象一些扩展,极大地提高了ECMAScript对象的可操作性。
1. 属性简化
项目中会经常遇到这种情况,一个函数的返回值有多个,以前的前端工程师可能会利用对象字面量或数组来模拟该功能,代码如下:
【示例1-5】

ES6在表达式的结构上提供了简化功能,上面的例子用ES6的标准可以写为:
【示例1-6】

从上述示例可以看出,ES6是允许在对象中直接写变量的,属性名即为变量,属性值即为变量值,这种表达式的简化功能可以使项目代码变得简洁漂亮。
其实在ES6标准中,除了字面量属性可以简写外,方法也可以简写。代码如下:
【示例1-7】

与ES6的写法作为对比,代码如下:
【示例1-8】

2. 属性名表达式
属性名用表达式代替,这个功能其实在ES6之前是有支持的,例如:

如果对象是用字面量来定义,那么这种属性名的表达式是不允许的。ES6扩展后,这个语法被引入到了对象的字面量中,例如:
【示例1-9】

在ES6中,这种方式的定义也适用于函数名的定义,例如:
【示例1-10】

提示
属性名表达式和属性简化是不可以同时使用的,例如:

1.6.3 class
有一定JavaScript经验的读者应该知道,JavaScript是可以面向对象编程的一门语言。但是ES6之前的JavaScript没有原生的类机制,不像Java、C++语言那样,直接可以用关键字class来定义一个类,并且类可以继承、重载等。那以前JavaScript没有class关键字,类概念是怎么实现的呢?
以前工程师在实现类概念时常常用函数原型来实现类系统,比如要定义一个Person类,可以这么写:
【示例1-11】

ES6标准中类的基本语法为:

上述的示例用ES6的标准可以改写成这样:
【示例1-12】
