![React进阶之路](https://wfqqreader-1252317822.image.myqcloud.com/cover/752/26793752/b_26793752.jpg)
1.2 ES 6语法简介
ES 6是JavaScript语言的新一代标准,加入了很多新的功能和语法。React的项目一般都是用ES 6语法来写的,这也是Facebook官方推荐的方式。为保证本书知识体系的完整性,本节我们会对开发React应用经常用到的ES 6语法做简要介绍。
1.let、const
let和const是ES 6中新增的两个关键字,用来声明变量,let和const都是块级作用域。let声明的变量只在let命令所在的代码块内有效。const声明一个只读的常量,一旦声明,常量的值就不能改变。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T16_2546.jpg?sign=1738985521-O3xuVWjiNEi5GogqCJ7nXmIAMhOnrDE9-0-3a5f6cc148bc8464206679cabd5edda7)
2.箭头函数
ES 6允许使用“箭头”(=>)定义函数。这种方式创建的函数不需要function关键字,并且还可以省略return关键字。同时,箭头函数内的this指向函数定义时所在的上下文对象,而不是函数执行时的上下文对象。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T17_2549.jpg?sign=1738985521-0RvsKBRtDhQDwmTIuhRIHx9ylxgyxOA1-0-5cabce7a225dfb512c26ad23d4c9978f)
如果箭头函数的参数多于1个或者不需要参数,就需要使用一个圆括号代表参数部分。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T17_2551.jpg?sign=1738985521-UQf6WoemiklRe3q2gSkXDK78evdtQHer-0-7beda0f83351d3d7778cbfb15b197721)
如果函数体内包含的语句多于一条,就需要使用大括号将函数体括起来,使用return语句返回。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T17_2553.jpg?sign=1738985521-TjvyeSVgob67J2gXwGToThgxUfBNa0Ru-0-79e808a82e4cb221f64c1d7f3dd2366b)
3.模板字符串
模板字符串是增强版的字符串,用反引号(`)标识字符串。除了可以当作普通字符串使用外,它还可以用来定义多行字符串,以及在字符串中嵌入变量,功能很强大。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T17_2554.jpg?sign=1738985521-iGHnq43tEecM18whddQhgClUjxhqscFS-0-cb1dcd87daf1885bbe7719066ed980f3)
4.解构赋值
ES 6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T18_2557.jpg?sign=1738985521-SC3mJHyqQ8XUWLVclfVyw4PD5iPBTpzp-0-b4bc287c2b1e88aaccdde3df481fdcc6)
函数的参数也可以使用解构赋值。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T18_2557a.jpg?sign=1738985521-TGt9U0sEBIUPaWa3e1fireiMwohZSJqj-0-aba9c5ff05223b11217975e5183a5af2)
解构同样适用于嵌套结构的数组或对象。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T18_2557b.jpg?sign=1738985521-h01wzhJAXuC4XJ2UQspqjxyz8aeDgkFL-0-227f9e5ac1a4bcfcbd7df2025e639076)
5.rest参数
ES 6引入rest参数(形式为...变量名)用于获取函数的多余参数,以代替arguments对象的使用。rest参数是一个数组,数组中的元素是多余的参数。注意,rest参数之后不能再有其他参数。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T19_2561.jpg?sign=1738985521-jF4Wp9kihvjbXjM4he8Q35jcOmtwE18u-0-9e8117aa1a0ba78b3ca5ea64c67a9979)
6.扩展运算符
扩展运算符是三个点(...),它将一个数组转为用逗号分隔的参数序列,类似于rest参数的逆运算。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T19_2565.jpg?sign=1738985521-kT91FTzQXspUrpLR7VDL2ZZl9U3TraqV-0-a4526f51c65c8dba8a72ac3e5aa09595)
扩展运算符还常用于合并数组以及与解构赋值结合使用。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/1.jpg?sign=1738985521-lLpaVxHvh3z6nDxFiMmuBQmyh7Osq2ez-0-1e74f41844ce3875fea5dda9ac6b3dd5)
扩展运算符还可以用于取出参数对象的所有可遍历属性,复制到当前对象之中。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T19_2566.jpg?sign=1738985521-2mavKh0ToZv3GKBzavaenYE1v9daKUQM-0-2658981e5ab6e0064bd5291142874b03)
7.class
ES 6引入了class(类)这个概念,新的class写法让对象原型的写法更加清晰,也更像传统的面向对象编程语言的写法。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T20_2567.jpg?sign=1738985521-4uj1uSLoskz17pSatSoK5hl128Vmc7lq-0-d43739f0550caa45b31a170f3129d98b)
class之间可以通过extends关键字实现继承,例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/2.jpg?sign=1738985521-JOqnGT3GISpRVLYhg3DgTqnqRMFNz1KH-0-a81e4a1670d109a81f469227eb6624cc)
8.import、export
ES 6实现了自己的模块化标准,ES 6模块功能主要由两个关键字构成:export和import。export用于规定模块对外暴露的接口,import用于引入其他模块提供的接口。例如:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T20_379.jpg?sign=1738985521-qEuWKygLZc0ttP3B6W9H39Jkr4ofCWrR-0-7146686edf3d6aba609c240b5ac9ca33)
本节介绍的ES 6语法是后面我们介绍React时经常用到的语法,且只介绍了最基本的用法,如果读者想了解ES 6完整的语法知识,请自行查阅相关文档学习。