![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=1739217345-iXCgCyjRq3DShhjRTWzoKta5PUceUMaB-0-a8327825e6f88d00688dedeef9ff3155)
通过上面的代码可以解决多数情况下的需求,但是如果遇到“age”参数是0的情况,会发现“age”的值会变成默认值20,不符合预期,所以可以通过typeof来对代码做改进:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_02.jpg?sign=1739217345-u9BTHumjk1cKkWSKXEF8wknpYRxRNdQI-0-03d62deff78a03e7e90474a470874a0d)
上述写法可以解决参数默认值的问题,但是写法上比较烦琐。针对这种情况,ES6标准中提供参数默认值来简化上述过程,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_03.jpg?sign=1739217345-R3x6zfastMujxu2dPHWTAESGVbGeAhz9-0-5b73eb9f1749009b4c519d0058fc0b60)
上述代码中,如果有参数传入,形参的值是传入的参数,如果没有参数传入,形参的值会是默认参数。在使用过程中有时候会出现第一个参数需要默认参数,第二个及后面的参数需要传入的情况。第一个参数可以传入undefined。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_04.jpg?sign=1739217345-srs1Ti7IZie8wI18ratG62baKsPjhNHX-0-d8133580e9d2ca8025671c6207e554c5)
1.5.2 函数形参不定参数
在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments里。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_01.jpg?sign=1739217345-xFnDGAZMu81inBvSQTm7BJfbgd9PAvm8-0-03f621e6449a3def301596879e171052)
上述写法在ES6中提供rest剩余参数来处理不定参问题,可以通过“...”来表示:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_02.jpg?sign=1739217345-r2KxklCgsiyFPsqBshvtSJ3PaWt9YwND-0-a46123c6e3118e070a7e39748a5fb24c)
在使用剩余参数的时候需要注意,每个函数只能声明一个剩余参数,且剩余参数必须在参数的末尾。那么在使用剩余参数的时候会对arguments隐藏参数产生影响吗?代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_03.jpg?sign=1739217345-wxUqLZzV5xyt5DEbPJ3qdNUB3CYMUrgn-0-68c4c4525676754b9abca8a34cfbc727)
通过上述执行结果可以看出剩余参数对arguments是没有影响的。
1.5.3 箭头函数
在ES5标准中定义返还函数可以通过下列方式来实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_04.jpg?sign=1739217345-mY7tEyhQGdFrSbIUj5PLTQYiivmSuTcI-0-32a46b56110cca69bb2db571c869cc4a)
在ES6标准中将上述写法通过箭头语法变得更加简单,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_05.jpg?sign=1739217345-kfZ37KhpCnZiWL2zqabXiITKVVAuC3CZ-0-51aef037bf59407b60d6634dabcfc520)
箭头语法最大的特点是有箭头“=>”符号,当然箭头语法有很多变式写法。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_06.jpg?sign=1739217345-K9fs7ZG25txWn0puy3JG5Ngzb21CmkjA-0-60db0300ca7bcb2a801cb3543e4ca947)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_01.jpg?sign=1739217345-ykBan6pW3zgBrbO1poPH8YVzvjSFdAIW-0-74e69a0e2ab1566af12333fcf31f36db)
同样也可以手动返还数据,例如:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_02.jpg?sign=1739217345-mQxtPTKYzSFgVagMjKG8L24EtX4Thcaq-0-44519eaf6402758aa58b30adf8f3bb91)
利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_03.jpg?sign=1739217345-8gbUn1ZfmRFjQQGDiEnkOXb3i2pF2LJE-0-4119961ac40e7736e04467d23c0a0e1b)
上面代码初步感觉是返还了一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错。所以需要改成如下写法:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_04.jpg?sign=1739217345-7fdHWZp5z4aTAfnbdx6tvbBxaugS0uwn-0-91aa330286d7e84ba563e283c76ae674)
箭头函数中还有个位置需要特别注意,就是箭头函数里没有this绑定,如下代码,this指向对象本身:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_05.jpg?sign=1739217345-V8vcxnaoaEIgT6igK0fswYQPZ2HgRgtx-0-5aef18b303eb72cba859c6d68c1650f5)
上面代码可以打印出id为2,this指向了obj,所以this.id可以取到obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_06.jpg?sign=1739217345-5Tv0tzRE0pXhXxrEMHUdaJPU0JWfbjFA-0-98cfb976c3d34bc491b80a4286365e02)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_01.jpg?sign=1739217345-vCw0nVanOmEZQWNt3fFAq89VX2jpQSgn-0-a65ca3b281992bde66d3b3e98b164e7e)
这里会发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是Window,所以最终取不到this.id。同样在使用箭头语法的时候需要注意没有隐藏参数arguments的绑定,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_02.jpg?sign=1739217345-3vv7XFgQga6dcvBxdCwMFtgXu2j0v0MC-0-26a792e6823394ffe5cccb5fa577d194)