![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=1738845278-jrR2H41zK90gbVDjfBvITaovU1fasofW-0-6f8d9d0f1e467083bb927d2575774a09)
通过上面的代码可以解决多数情况下的需求,但是如果遇到“age”参数是0的情况,会发现“age”的值会变成默认值20,不符合预期,所以可以通过typeof来对代码做改进:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_02.jpg?sign=1738845278-C0VrUFDqVLmfx4NtkdsvZCcyBOmXAYjH-0-1f8edf4f6ece39e6d472f1502777ff5c)
上述写法可以解决参数默认值的问题,但是写法上比较烦琐。针对这种情况,ES6标准中提供参数默认值来简化上述过程,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_03.jpg?sign=1738845278-eOlFruLnHBlfwaGJd7FEBhX7uKTkQt9s-0-682b1a9bcf92050d8df6865bcd664f4b)
上述代码中,如果有参数传入,形参的值是传入的参数,如果没有参数传入,形参的值会是默认参数。在使用过程中有时候会出现第一个参数需要默认参数,第二个及后面的参数需要传入的情况。第一个参数可以传入undefined。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_04.jpg?sign=1738845278-awBkZCrwAdriBdqWc2XcA9TMfsVKtgx2-0-e93a8bf5d46002a2a720428c1a505b3b)
1.5.2 函数形参不定参数
在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments里。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_01.jpg?sign=1738845278-0YGEwHtMKubcGlpeeV2kZFb1sWRdOtmn-0-739549d75e1625cf09530dd7eab573c4)
上述写法在ES6中提供rest剩余参数来处理不定参问题,可以通过“...”来表示:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_02.jpg?sign=1738845278-bGh5xtsPXax4JJJncQlZoI0yTyU46KYp-0-2f8382d9f7bbc83641cd00034e6058a0)
在使用剩余参数的时候需要注意,每个函数只能声明一个剩余参数,且剩余参数必须在参数的末尾。那么在使用剩余参数的时候会对arguments隐藏参数产生影响吗?代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_03.jpg?sign=1738845278-PGcQm55QVDECFwDru59gpisH5Pw5RNY6-0-b80bc65eed1e5571a292413edeb58c5c)
通过上述执行结果可以看出剩余参数对arguments是没有影响的。
1.5.3 箭头函数
在ES5标准中定义返还函数可以通过下列方式来实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_04.jpg?sign=1738845278-6ZWMS7NNfQgansu0BjBR3BQXKJtcupse-0-31355f8a2985772e0d0da28d17d2aa77)
在ES6标准中将上述写法通过箭头语法变得更加简单,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_05.jpg?sign=1738845278-KIytAU1irHmtH6eKYIyviJGPjnaT18Bf-0-d6e399dae6bf514cbedb523d1302a536)
箭头语法最大的特点是有箭头“=>”符号,当然箭头语法有很多变式写法。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_06.jpg?sign=1738845278-nEwceqnPGHjCzZq0SXpP3J9vG99mH3Lb-0-0041ef9beef85482d3e41671cfa66bd6)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_01.jpg?sign=1738845278-2Lp5JgN9c1JDZt9yDsZUI7pcWrDbbHaZ-0-db3be3c4d9380ad86ac270ebbf92046a)
同样也可以手动返还数据,例如:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_02.jpg?sign=1738845278-wzOTXJxt9mQJXwYh6UbI0PkL4UdymQYV-0-674e838535d03702d506225c7501cb89)
利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_03.jpg?sign=1738845278-JHw388BqxvyntQqDsRfBYqWhJQsuEgcI-0-2bea620280f978275446a4725f335029)
上面代码初步感觉是返还了一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错。所以需要改成如下写法:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_04.jpg?sign=1738845278-n3GMYjSfRNueb6jT81aX29ExiCLEOsPS-0-d05da763d1ec2d845e1977c06a650890)
箭头函数中还有个位置需要特别注意,就是箭头函数里没有this绑定,如下代码,this指向对象本身:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_05.jpg?sign=1738845278-lrVi755bS6htXBsoWFYicCAW9moAGnPd-0-cb3e9dc72413b6fac1b673075faeace4)
上面代码可以打印出id为2,this指向了obj,所以this.id可以取到obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_06.jpg?sign=1738845278-P0dzD09EDLQhNlq4BzkGX2o1h7KB0L4k-0-4a7053d36c647d2cb7a4c7df299005ed)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_01.jpg?sign=1738845278-QzYhDVrtLg9mhWWSWViNFMsyqnNicP7m-0-6a7a2918f8d35995d727ddaf277f37c8)
这里会发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是Window,所以最终取不到this.id。同样在使用箭头语法的时候需要注意没有隐藏参数arguments的绑定,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_02.jpg?sign=1738845278-JMuq5iS6j63UsQgo9UxMlSz5sRaMXF86-0-238fca234eb57e9a0d71d4a8e22e337e)