![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=1739157768-KAB7LYngWbows8lwJPiB58Qgjpl6YYZ8-0-e429817d8f84194609cf06ae616db3ff)
通过上面的代码可以解决多数情况下的需求,但是如果遇到“age”参数是0的情况,会发现“age”的值会变成默认值20,不符合预期,所以可以通过typeof来对代码做改进:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_02.jpg?sign=1739157768-mW442rWlgRO2dVSeWLNJ6NwHE6XWB515-0-3ca35da61e092e3c8ecc7ce1f8cb4e2c)
上述写法可以解决参数默认值的问题,但是写法上比较烦琐。针对这种情况,ES6标准中提供参数默认值来简化上述过程,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_03.jpg?sign=1739157768-lIxBTkW6L5ctBP63zqWPo3cWGJopQovX-0-dacea72ff9ea7619ddc1c7437fb06d0f)
上述代码中,如果有参数传入,形参的值是传入的参数,如果没有参数传入,形参的值会是默认参数。在使用过程中有时候会出现第一个参数需要默认参数,第二个及后面的参数需要传入的情况。第一个参数可以传入undefined。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/28_04.jpg?sign=1739157768-BWyceiq6qIvHWDRvLsBvN39aOG7romQw-0-adbc08f7d2a81df5c901517edbc8d656)
1.5.2 函数形参不定参数
在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments里。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_01.jpg?sign=1739157768-rBUU6dlfCvJlWWAh9Kj6SVfq3S8CkBhD-0-a945a18fddffa13c6abb768c6358dde8)
上述写法在ES6中提供rest剩余参数来处理不定参问题,可以通过“...”来表示:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_02.jpg?sign=1739157768-oZ57IhwWLog1Rr8R0cNORIyYALS52c8a-0-9cae33db238bf767263f97f86cd53236)
在使用剩余参数的时候需要注意,每个函数只能声明一个剩余参数,且剩余参数必须在参数的末尾。那么在使用剩余参数的时候会对arguments隐藏参数产生影响吗?代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_03.jpg?sign=1739157768-KbYnKbrjmRaOAf7CMZKV178yuAgKIW0P-0-b3a0d0df8fb3076393a6717f8eecd8a9)
通过上述执行结果可以看出剩余参数对arguments是没有影响的。
1.5.3 箭头函数
在ES5标准中定义返还函数可以通过下列方式来实现:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_04.jpg?sign=1739157768-QvQkbdOGugNU9MusAcrTIqgMmx3B0h4Z-0-dd9d2d306d2c7cf2a1879726f29bd2c3)
在ES6标准中将上述写法通过箭头语法变得更加简单,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_05.jpg?sign=1739157768-KW3GoyNRhhOenQxbZRuJD4DwB44xhC3w-0-692de0aea5d61952a8666fd4d63fea15)
箭头语法最大的特点是有箭头“=>”符号,当然箭头语法有很多变式写法。代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/29_06.jpg?sign=1739157768-Out46kOATH6goyZmGIMyU501JbxYR80W-0-c857325c8de866ae04dab28ce23d6363)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_01.jpg?sign=1739157768-jp2CM3kCDbEYhPT7LSyKFkEDqjtleyjS-0-98deff9063a0841154df4ee5e9587114)
同样也可以手动返还数据,例如:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_02.jpg?sign=1739157768-lthZG02zQ7uS9F0cz3qotCGxhdHk17CT-0-38007307a493e406213c9e28ccc80d09)
利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_03.jpg?sign=1739157768-DGex3BEFvCADTa16obG6jiPM4TtDT9MZ-0-ba5cf76fad515473fd749bf31ab4f0b5)
上面代码初步感觉是返还了一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错。所以需要改成如下写法:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_04.jpg?sign=1739157768-7Z1n6OipHMIehpOm1dzxAsRb7IHuM7hi-0-62d75d4616a38b0b6b21fdde9435c95f)
箭头函数中还有个位置需要特别注意,就是箭头函数里没有this绑定,如下代码,this指向对象本身:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_05.jpg?sign=1739157768-jERmAYxNsPkOzuiB3sQsTUyecyXcuqyJ-0-bc14c4e27d4beb2c30e3cc0de5b54ebf)
上面代码可以打印出id为2,this指向了obj,所以this.id可以取到obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/30_06.jpg?sign=1739157768-hTksVCLeKg9D9XUC2HDBrsWUWuEVEpDT-0-17e936ff82808316c85d867c2b26749c)
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_01.jpg?sign=1739157768-yNQhzCO0J77pXD6yQwxxP907KnvaGkNU-0-ecea4d5855dad0993c57cd2982179674)
这里会发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是Window,所以最终取不到this.id。同样在使用箭头语法的时候需要注意没有隐藏参数arguments的绑定,代码如下:
![](https://epubservercos.yuewen.com/D960D7/19773741008833706/epubprivate/OEBPS/Images/31_02.jpg?sign=1739157768-YxBfSb6yZDRshDSmsZwnfzhvt8hGFP1t-0-1a33b26848b17abd77ef2a50da830ae3)