上篇說了一些 JS 中數(shù)組操作的常見誤區(qū),這次來總結(jié)一下初學(xué)者常見的其他易錯點。
寫立即執(zhí)行函數(shù)時前置 void
立即執(zhí)行函數(shù)(IIFE)在 JS 非常常用,作用就是構(gòu)造一個函數(shù)級的變量作用域。常見的寫法如下:
(function () {
?// code
})();
這樣寫可能會被 JS 理解成為一個函數(shù)調(diào)用
var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()
從今天改變習(xí)慣,這樣寫:
void function () {
?// code
}();
有些人喜歡以 ! 打頭,個人習(xí)慣問題。
在 規(guī)范日益流行的今天,忽略行尾分號成為了主流(但是筆者不喜歡),更要改變這個習(xí)慣
注: 本身禁止行首括號(#user-content-細則)
檢查一個變量是否為對象之前,首先判斷其值是否為 null
雖然不愿承認,JS 標(biāo)準(zhǔn)說:
typeof null === 'object' // true
毋庸置疑的, null 不具備作為對象類型的基本特征,是原始類型。這是一個廣為人知的 JS 的 bug,,它從 JS 誕生開始就存在,從未、而且永遠不會被修復(fù)
我們不必去探究它的黑歷史,但是我們寫代碼時判斷一個變量的類型時,首先需要判斷它是否為 null
if (someVal !== null && typeof someVal === 'object') {
?// someVal 是一個對象
}
做數(shù)值計算時,注意 JS 數(shù)值類型的精度
在 JS 里,所有的 number 原始值都是一個雙精度浮點數(shù),對應(yīng) Java 的 double 類型,對應(yīng)標(biāo)準(zhǔn) IEEE754。小心它的精度問題。
做整數(shù)處理時,注意數(shù)值的大小
JS 最大可存儲的安全整數(shù)(不存在精度問題)為 90991 (16位,Number. ),注意比 Java 的 long 類型最大整數(shù) (19位) 小幾個數(shù)量級,所以有時 JS 的 number 類型是不能精確存儲 Java 的整數(shù)的(當(dāng)然通常情況下不是問題)。
問題通常出在前后端數(shù)據(jù)傳輸上。數(shù)據(jù)庫中的主鍵通常是一個自增長的長整型數(shù),有可能會超出 JS 的安全整數(shù)范圍,這時請考慮使用字符串傳輸。
做小數(shù)計算時,注意浮點數(shù)的精度問題
例如:0.1+0.2 => 0.300004,0.4-0.3 => 0.000003
將小數(shù)轉(zhuǎn)化為字符串時,永遠記得使用 toFixed 取小數(shù)點后若干位數(shù)字:
(0.1 + 0.2).toFixed(2) === '0.30'
比較小數(shù)相等時,切記不要直接使用 ===,而要使用相減取絕對值的方式(表示兩數(shù)相差在一定范圍內(nèi)即認為他們相等)。
0.1+0.2 === 0.3 // false
Math.abs(0.1+0.2 - 0.3) <= 1e-10 // true
NaN !== NaN
NaN 之所以 NB,因為它有一個獨一無二的特性。對!獨一無二!那就是:
NaN === NaN // false
var a = NaN; a === a // false
NaN 不等于它自己。你可以使用這個特性判斷一個變量是否為 NaN,一個變量如果不等于它自己,這個變量一定是 NaN。
還有一個方式是使用 Number.isNaN。注意如果不已知這個變量的類型是數(shù)字時,不要使用 isNaN做判斷,因為 isNaN 有個很詭異的特性:它會先將待判斷的變量轉(zhuǎn)換為數(shù)值類型。
isNaN('abc') // true
isNaN('123') // false
isNaN('') // false
isNaN([]) // false
isNaN({}) // true
永遠不要寫 someVal===NaN
正確使用
首先接受兩個參數(shù),第一個參數(shù)為待parse的字符串(如果不是字符串則會首先轉(zhuǎn)換為字符串);第二個參數(shù)為使用的進制數(shù)。
如果不傳第二個參數(shù),則進制由第一個參數(shù)決定。什么意思呢?比如以 0x 開頭的字符串,會被解析為16進制數(shù)。
我們知道以數(shù)字 0 開頭的數(shù)字為8進制數(shù)(非嚴(yán)格模式),比如 011 === 9,0 本身也是8進制數(shù)。那么問題來了, ('011') = ?
答案是看瀏覽器。目前絕大多數(shù)瀏覽器都會作為10進制數(shù)解析,結(jié)果為11。但是還有一些老舊的瀏覽器以8進制數(shù)解析(例如IE8和一批老Android瀏覽器)
所以如果你非要用 :
使用規(guī)則一:請傳入第二個參數(shù)
回到 本身的含義。顧名思義這個函數(shù)是在parse,被parse的一定是個字符串。如果第一個參數(shù)不是字符串,那么會首先被轉(zhuǎn)換為字符串。
問: (0.) =?
答:
String(0.) => '8e-10'
('8e-10') => 8
自己打開調(diào)試器去試
使用規(guī)則二:永遠不要使用給小數(shù)取整
建議對于數(shù)值轉(zhuǎn)換一概使用強制轉(zhuǎn)換函數(shù) Number,如果你JS用6了可以使用 +(正號)。如果需要對某個數(shù)字取整,建議使用 Math.trunc。如果你能確定數(shù)值在 32 位以內(nèi),可以使用 x|0 或 ~~x等方式
的用處在于轉(zhuǎn)換一些CSS里帶單位的值: ('10px',10) => 10。但這里建議使用,可以解析小數(shù)又沒有進制問題。
除了用于比較 null 或 ,永遠不要使用非嚴(yán)格相等==
絕不要簡單的把非嚴(yán)格相等 == 理解為兩者表示的數(shù)字一樣,它有一套非常復(fù)雜的轉(zhuǎn)換規(guī)則:它會先將 %%轉(zhuǎn)換為 @@,然后把 !! 轉(zhuǎn)換為 **,如果 %% 是 ?? 類型,還會 xx 一把……
看不懂對吧,我相信你就算看懂了也記不住的。不然請問:
'true' == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false
關(guān)于非嚴(yán)格相等,你只需要記住這個規(guī)則:
null == null // => true
undefined == undefined ?// => true
null == undefined // => true
undefined == null // => true
x == null // => false (x 非 null 或 undefined)
x == undefined // => false (x 非 null 或 undefined)
簡言之:
x == null // 或 x == undefined
是最簡單的判斷 x 為 null 或 的方式,相對應(yīng)的
x != null // 或 x != undefined
是最簡單的判斷 x 非 null 和 的方式。這就是 == 存在的唯一意義。
日期處理new Date(year, month, day) 注意其參數(shù)的數(shù)值范圍
由于可能的歷史傳承原因,JS 內(nèi)置對象 Date 的構(gòu)造函數(shù)比較特殊。
如果year是 0 ~ 99 之間,year 默認加 1900。比如 1 代表公元 1901 年,99 代表公元 1999 年,100 代表公元 100 年。(你問 -1 是幾?公元前 1 年。。。)
month從 0 開始算。0 代表一月,1 代表二月,以此類推。12 代表下一年的一月(自動進位)
第一點不知道也沒什么,畢竟一般不會操作公元 99 年之前的時間。但第二點就很容易出錯,切記它是以 0 開始的數(shù)字。
這樣得到的日期對象是本地時間(采用客戶端時區(qū))
new Date() 注意瀏覽器時區(qū)問題以及瀏覽器兼容性
時常有后端接口返回一個日期字符串的情況:
new Date('2018-01-01') // => "2018/1/1 08:00:00" 新版瀏覽器,IE 11
new Date('2018-01-01') // => "2018/1/1 00:00:00" 某些舊版安卓
new Date('2018-01-01') // => "Invalid Date" IE 8(這個忽略。。。)
可以看到,瀏覽器基本都是把日期字符串當(dāng)做 UTC 時間處理的。而
new Date('2018/01/01') // => "2018/1/1 00:00:00" 包括 IE 8 在內(nèi)所有瀏覽器
所以對于日期字符串,請注意字符串中是使用橫杠還是斜杠。對于橫杠可以考慮將 - 替換成 /,或者補全完整的帶時區(qū)的 ISO8601 字符串。考慮到負數(shù)時區(qū)的問題,不推薦將小時數(shù)清零的做法。
PS:將日期對象取當(dāng)天 0 點為 date.(0,0,0,0)PS2:取當(dāng)前時間的 Unix 時間戳可以 Date.now()
補:慎用||填充默認值
這反而是 JS 老鳥更容易犯的錯誤。給用戶傳入的對象填充默認值是很常見的行為,他們總是隨手就寫:
config.prop1 = config.prop1 || 233;
config.prop2 = config.prop2 || 'balabala';
expr1||expr2 的意思是:如果expr1能轉(zhuǎn)換成true則返回expr1,否則返回expr2
expr1||(expr1)?expr1:expr2
哪些值不能轉(zhuǎn)換為 true 呢?
null
NaN
0 !!!
空字符串('') !!!
如果用戶指定了傳入?yún)?shù)的值為 0 或者是空字符串的配置項,它的值就會被強制替換為默認值,然而實際上只有 應(yīng)該被認為是用戶沒有指定其值(語義上可以這樣理解: null表示 用戶讓你給他把這個位置空著;而 表示 用戶沒發(fā)表意見)
所以就應(yīng)該是這樣:
config.prop1 = config.prop1 !== undefined ? config.prop1 : 233;
config.prop2 = config.prop2 !== undefined ? config.prop2 : 'balabala';
很長。。。你可以搞個全局的函數(shù)簡化這一操作,或者考慮使用 lodash 的 方法
本公眾號內(nèi)回復(fù) “資料”, 下載各種編程資料;
回復(fù)“面試題”“ajax”等詞,可看文章;
其它功能正在完善,不定期更新....