![React工程师修炼指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/475/37323475/b_37323475.jpg)
1.5 函数
1.5.1 函数形参的默认值
很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中一般会这样来做:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_01.jpg?sign=1739310982-pA4XJENV6JKdrBz8M7ND0zX1MJBLbRHL-0-7cc6f6f1be34591f0e96cb346ebd1481)
通过上面的代码可以解决多数情况下的需求,但是如果遇到“age”参数是0的情况,会发现“age”的值会变成默认值20,不符合预期,所以可以通过typeof来对代码做改进:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_02.jpg?sign=1739310982-NHOiQzduQ7efRJjD6oyqMMEFFx19M5ki-0-c82b877fbd4b5cb9ed01bc618b308c9e)
上述写法可以解决参数默认值的问题,但是写法上比较烦琐。针对这种情况,ES6标准中提供参数默认值来简化上述过程,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_03.jpg?sign=1739310982-EjFh1CJ4FxIYzBRLwJzIBSHiZyomTHMI-0-756c40072b3707b02552bd22a1967c5d)
上述代码中,如果有参数传入,形参的值是传入的参数,如果没有参数传入,形参的值会是默认参数。在使用过程中有时候会出现第一个参数需要默认参数,第二个及后面的参数需要传入的情况。第一个参数可以传入undefined。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_04.jpg?sign=1739310982-iFJ3Q7425V3wc3Pe913qP3L4KxeULEJB-0-9a3c48c57cf8478a0a343ed41b5a0337)
1.5.2 函数形参不定参数
在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments里。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_01.jpg?sign=1739310982-kjaIBDWE53f3S5rvqkNnY07WvUqnM0ha-0-04d1b9200dab5db9e4f750160cf1b1a9)
上述写法在ES6中提供rest剩余参数来处理不定参问题,可以通过“...”来表示:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_02.jpg?sign=1739310982-PcxiFvWsjZc7EujqaRRZiTnDRu5qLHEK-0-56f39da86bcc4f3e79a7f6cc2c74e18c)
在使用剩余参数的时候需要注意,每个函数只能声明一个剩余参数,且剩余参数必须在参数的末尾。那么在使用剩余参数的时候会对arguments隐藏参数产生影响吗?代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_03.jpg?sign=1739310982-dWha6O43olIPdV9fGSrpSNszY8sbk4co-0-4392394125a4c3340ebc84d4b2e84510)
通过上述执行结果可以看出剩余参数对arguments是没有影响的。
1.5.3 箭头函数
在ES5标准中定义返还函数可以通过下列方式来实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_04.jpg?sign=1739310982-T5D7KyPRVNMtAqZNmUKvhSBWsqyCJTD8-0-6b7871f3ae4ff3cacef4a1f34f30b777)
在ES6标准中将上述写法通过箭头语法变得更加简单,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_05.jpg?sign=1739310982-qqq8lEIUTpdX3jI4xJlqTvBNvEQibTR8-0-6dd64330eedcc496c01766b3eb16756e)
箭头语法最大的特点是有箭头“=>”符号,当然箭头语法有很多变式写法。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_06.jpg?sign=1739310982-gnVmZNigtdrWzl4DWzf3sKFinDoRKuAx-0-e7511021998d3dffb3dab9178a1bb119)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_01.jpg?sign=1739310982-b6iN0Ak7kPtxTlzWKNIYOSsYvu8A6D1W-0-2d59e0e91edd164f3ce86cbc8ee5c227)
同样也可以手动返还数据,例如:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_02.jpg?sign=1739310982-hI50Mx5JvTUTI8m8SPDh5QNdVebrgqn5-0-7e617818fc50cb92f2a393b4f6cee496)
利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_03.jpg?sign=1739310982-E61lEtjCoVbuTBEzTzlInhUdAKkaYfFm-0-a375b740bb174dbb270f08bebce182f7)
上面代码初步感觉是返还了一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错。所以需要改成如下写法:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_04.jpg?sign=1739310982-E2DwMyvWfadBlZrge04rNN3GbA1M7XvX-0-b4ddf79605b370ab4326ea8683dde502)
箭头函数中还有个位置需要特别注意,就是箭头函数里没有this绑定,如下代码,this指向对象本身:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_05.jpg?sign=1739310982-oGLORHw4PycWjSNfKACfK9VOlPeEl63B-0-7b6f0a9c39f48576f5a0935ccd368d6f)
上面代码可以打印出id为2,this指向了obj,所以this.id可以取到obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_06.jpg?sign=1739310982-BovqdBccKp1Q6hQM5pbSVMzq0vHnKWEU-0-2b935e0fa35d85728ec43f30301f2aa0)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_01.jpg?sign=1739310982-HNINuuKjoxfupMYDcFmSu3V9vBN5dQxP-0-345bc30e875c9309c3b096ed7a67f8fb)
这里会发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是Window,所以最终取不到this.id。同样在使用箭头语法的时候需要注意没有隐藏参数arguments的绑定,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_02.jpg?sign=1739310982-nZQW52MDCRlxRJ1xfgUf5YWajGeOksTd-0-0afc2c7969b66896d6ce7da38664515e)