1. 程式人生 > >看過這張圖你還記不牢JavaScript的語法和特性,算我輸!

看過這張圖你還記不牢JavaScript的語法和特性,算我輸!

交流 還需要 解釋 默認 emc lock ole orien 代碼

技術分享圖片

逛知乎的時候發現@DDDD轉了一張圖,這張圖對js魔法的吐槽可謂非常到位。下面,我們就從這張圖出發來詳細講講js。

數字類型與精度問題

雖然js是弱類型語言,聲明變量時也不需要顯式指定類型。但是,數據本身依舊還是有類型的,比如數字和字符串就是以不同形式存在的數據。在js中,所有數字的類型都為number。其中,一個特殊的數字就是NaN(Not a number),雖然名字叫“不是數”,但為了計算的一致性(IEEE745亦規定),NaN依舊是數字類型的。任何NaN參與的數字計算的結果都還是NaN。(NaN-NaN!=0)還需要註意的是,js中被0除非但不會報錯,而且結果也不是NaN(只有0/0是NaN),而是Infinity(被除數為正)或-Infinity(被除數為負)。

由於將整數和浮點數統一處理,所以js並不存在整數和浮點數的區別——所有數字都以64位有符號浮點數(IEEE745格式)的形式存儲。因此,舍入誤差是js數字類型的一個大坑。最經典的當然就是0.1+0.2!=0.3了。其實這不是js的鍋,大部分編程語言都有這個問題。簡單的解釋可以查看http://0.30000000000000004.com。很多人對浮點數都有誤解,認為0.1是

技術分享圖片

,所以可以正確的表示0.1,然而浮點數並不是這樣。在2為基數的情況下,0.1=1/10是一個無限循環小數,所以在運算時會產生舍入誤差。想要進一步了解可以查閱有關數值計算的材料。

Max、Min與函數參數

在js中,函數參數也是一種魔法。一般編程語言中,形參具有類似“約束”的作用,即實參的數量要與形參相符(默認值除外)。但是js魔法並不需要形參和實參相匹配,多的實參忽略,少的就是undefined。事實上,js還提供了一種訪問參數的方法。在函數體上下文中,js提供了arguments(類似Python的*args)以便參數的訪問。考慮到沒有卵用的形參,js函數的形參更

是一個別名。

在Python中,函數重載可以通過默認值實現,而在js中,你可以隨心所欲的解析arguments,可以說是很硬核了。

回到我們的max和min。EMCAScript v3之後,max和min就支持任意數量參數的調用了。從邏輯上考慮,既然沒有傳入任何數,那取最大的函數就不能返回一個能大於任何數的數,所以返回-Infinity不無道理。min亦然。

魔法操作符+、-

為了更好的理解接下來的坑,我們有必要先看看+、-兩個操作符。這倆操作符神奇就神奇在,他們不僅僅是雙目運算符,也同時是單目運算符!對於+,雙目運算時其意義是數字加或字符串拼接。這裏有個很坑的地方,就是只要參與運算的值不全是數字,那麽+就會被視為字符串拼接(String.concat),從而把所有參數轉換為字符串並進行拼接。單目運算時,+被視為取正,所有傳入的參數都會被轉換為數字並取正。(然而取正並沒有任何卵用,所以其實就是轉為數字)

相比之下-就和藹了許多,雙目是數值減,單目這是取反。

無奈的解釋器

下面這個魔法涉及到的東西很多,不過我還是打算把它歸類到解釋器的範疇,而且這個鍋要丟給REPL。{}+[]具歧義,可以被理解為:

  • (作為值理解)對象{}+數組,+為雙目
  • (作為代碼塊理解){}為代碼塊,+是單目

而這兩種理解下的結果也是不同的。而在REPL的上下文下,js解釋器采用了第二種理解。而一旦上下文變化,提示解釋器這是表達式時,解釋器就會采用第一種理解。比如console.log({}+[])的結果就不再是0了。

隱式類型轉換

之前在說+、-的時候,我提到了一些隱式的轉換,其實這樣的轉換遠不止出現在+、-。比如取反!,就會轉成布爾型再取反。所以!+[]就是true,![]是false。考慮到運算優先級,最後得到”truefalse”。

作為一個弱類型語言,js的邏輯是,如果類型不對,那就轉過去。

==與===

這是個老生常談的東西了。這裏不多講,只要知道==可能會隱式轉換類型就行。

最後

我寫這篇文章的目的並不是解釋這張圖,因為這張圖裏的很多知識並不是實際編程所需要的(就像i+++++i,這些是我認為不重要的知識)。我是希望借這張圖聊到一些js的語法特性,以加深對js的理解。這兩點在我看來有本質的區別。

自己只是個做了幾年全棧開發的老碼農,希望本文能對大家有所幫助幫助。

如果你依然在編程的世界裏迷茫,不知道自己的未來規劃,可以加入web前端學習交流群:767273102 裏面可以與大神一起交流並走出迷茫。新手可免費領取學習資料,看看前輩們是如何在編程的世界裏傲然前行不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻),有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入

點擊:前端學習圈

看過這張圖你還記不牢JavaScript的語法和特性,算我輸!