開(kāi)篇

JS作為一門動(dòng)態(tài)語(yǔ)言十分靈活，但是伴隨而來(lái)的弱類型隱式轉(zhuǎn)化的問(wèn)題讓我們十分頭疼。

隱式作為一個(gè)大課題，很難用一個(gè)很簡(jiǎn)短的篇幅把JS的隱式轉(zhuǎn)換講解的十分清楚。所以我選擇用多次少量的策略進(jìn)行梳理，爭(zhēng)取讓你每看完一篇都會(huì)有加深對(duì)于JS隱式轉(zhuǎn)換的理解。

一元操作符

說(shuō)到隱式轉(zhuǎn)換，就不得不提操作符了，絕大多數(shù)的隱式轉(zhuǎn)換都與操作符有關(guān)。我們就從最簡(jiǎn)單的一元操作符開(kāi)始我們的隱式轉(zhuǎn)換探索之旅吧！ gogogo!

先來(lái)一串+ 操作符的基礎(chǔ)實(shí)踐：

let n = 1 let s1 = '2' let s2 = 'z' let o = {valueOf: function() {return -1} }n = +n // 值不變 s1 = +s1 // 值變?yōu)?2 s2 = +s2 // 值變?yōu)?NaN o = +o // 值變?yōu)?-1

由上面的代碼可以看到，使用+操作符后，使用效果會(huì)像Number()轉(zhuǎn)型函數(shù)一元進(jìn)行解析。

而Number()的轉(zhuǎn)化規(guī)則就是一元操作符隱式轉(zhuǎn)化的精髓所在。

(開(kāi)始劃重點(diǎn)！

Number()的轉(zhuǎn)化規(guī)則如下：

• 數(shù)字不變
• true和false分別轉(zhuǎn)化為0和1
• null返回0
• undefined返回NaN
• string比較復(fù)雜
  • 如果為空，則返回0
  • 如果是數(shù)字(包括整型，浮點(diǎn)數(shù)，十六進(jìn)制)，則忽略前導(dǎo)0轉(zhuǎn)化為對(duì)應(yīng)十進(jìn)制數(shù)字
  • 如果非上述格式，則返回NaN
• 如果是對(duì)象，則首先調(diào)用valueOf方法，然后按照前面的規(guī)則轉(zhuǎn)換，如轉(zhuǎn)換結(jié)果還是對(duì)象（非原始值），則再調(diào)用對(duì)象的toString方法。

雖然紅寶書中描述為“如果是對(duì)象，則首先調(diào)用valueOf方法轉(zhuǎn)換返回的值，如果為NaN，則再進(jìn)行toString方法”但是據(jù)我實(shí)踐發(fā)現(xiàn)貌似此處的描述并不準(zhǔn)確，或者誰(shuí)來(lái)跟我講講

既然我們知道了+的轉(zhuǎn)換規(guī)則，那么可以拓展來(lái)驗(yàn)證一下上面的規(guī)則，我們這里主要對(duì)于對(duì)象進(jìn)行探究

PS: 沒(méi)有記住規(guī)則不要緊，可以按照上面的規(guī)則走，多來(lái)幾次就明白了~let o1 = {valueOf: function() {console.log('執(zhí)行valueOf')return 'a'},toString: function() {console.log('執(zhí)行toString')return -1} }o1 = +o1 // 執(zhí)行valueof NaNlet o2 = {valueOf: function() {console.log('執(zhí)行valueOf')return {}},toString: function() {console.log('執(zhí)行toString')return -1} }o2 = +o2 // 執(zhí)行valueof 執(zhí)行toString -1let o3 = {valueOf: function() {console.log('執(zhí)行valueOf')return []},toString: function() {console.log('執(zhí)行toString')return -1} }o3 = +o3 // 執(zhí)行valueof 執(zhí)行toString -1let o4 = {valueOf: function() {console.log('執(zhí)行valueOf')return function () {}},toString: function() {console.log('執(zhí)行toString')return -1} }o4 = +o4 // 執(zhí)行valueof 執(zhí)行toString -1let o5 = [] o5 = +o5 // 0let o6 = function() {} o6 = +o6 // NaN

關(guān)于最后的o5，o6的結(jié)果我們要解釋一下。不要忘記Array和Function也是對(duì)象哦，所以他們的執(zhí)行順序應(yīng)該是下面這樣的。

+o5 Array的執(zhí)行順序:

o5.valueOf()返回[]，此時(shí)[]還是個(gè)Array對(duì)象，于是接下來(lái)執(zhí)行[].valueOf().toString()

[].valueOf().toString()返回""

Number("")返回0

+o6 Function的執(zhí)行順序:

o6.valueOf()返回function() {}，此時(shí)還是個(gè)Function對(duì)象，于是繼續(xù)執(zhí)行toString()

o6.valueOf().toString()返回"function() {}"

Number("function() {}")返回NaN

同樣的，-作為一個(gè)二元操作符也是與上面的執(zhí)行類似，不過(guò)要注意-是會(huì)取負(fù)的哦~

總結(jié)

今天我們學(xué)習(xí)到了一元運(yùn)算符帶來(lái)的隱式轉(zhuǎn)換，主要要記得

• Number()的轉(zhuǎn)換規(guī)則（尤其是對(duì)象）

今日習(xí)題：

{}+[]在Chrome控制臺(tái)打出的結(jié)果是？

小提示：Chrome控制臺(tái)中前面的{}會(huì)被當(dāng)成空代碼塊哦

作者想說(shuō)的

• 希望大家看了可以提一些建議~ 嘿嘿嘿
• MacbookPro任務(wù)進(jìn)度（2/2）
• 配圖是女朋友拍的
• 轉(zhuǎn)載請(qǐng)注明出處，告訴我一下我會(huì)很開(kāi)心~

今天總算是開(kāi)了一個(gè)隱式轉(zhuǎn)換類型的頭哈哈哈 ，當(dāng)然寫這方面也是因?yàn)樽约合胍由钊氲牧私釰avaScript。可能很多人會(huì)覺(jué)得這種情況我要知道干嘛，業(yè)務(wù)里面又用不到。

之前的我也這么想過(guò)。

但是，我逐漸發(fā)現(xiàn)，深入了解語(yǔ)言的特性，可以讓自己對(duì)于代碼的掌控能力越強(qiáng)，出現(xiàn)的BUG也越少，就算出現(xiàn)BUG了定位的效率也越來(lái)越高。其中滋味只能自己體會(huì)啦~（當(dāng)然，寫之前一定一定要自己梳理清楚整體邏輯和細(xì)節(jié)，尤其是復(fù)雜且緊急的需求，否則你就會(huì)留下深深的大坑。

高能預(yù)警

下篇不出意外的話應(yīng)該還是隱式轉(zhuǎn)換（畢竟是個(gè)大課題啊哈哈哈） 透露幾個(gè)下期的關(guān)鍵詞

關(guān)鍵字：原始值、valueOf、toPrimitive、==

下期更精彩哦~

總結(jié)

以上是生活随笔為你收集整理的js return的值取不到_【JS基础】隐式转换（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。