在js里面,在使用if語句的時候,我們都知道,使用嚴格相等運算符===來進行條件判斷,但是在日常工作中,我們可能經常會碰到這種代碼:
if(xxx){
...
}
或者是
if(xxx==0){
...
}
那么這種情況下,if里面的條件是否成立,看起來就要花費一番心思了,而且有的時候的結果可能并非符合直覺。接下來就來解密一下當遇到上面兩種情況時,條件到底何時能夠成立呢
if(xxx)的情況
以下幾個場景的結果分別是多少?
if ("hello") {
console.log("hello")
}
if ("") {
console.log('empty')
}
if (" ") {
console.log('blank')
}
if ([0]) {
console.log('array')
}
if('0.00'){
console.log('0.00')
}
如果沒有了解一定的規(guī)則,只憑直覺來判斷的話,以上的代碼很難估計出正確的結果。但是我們可以了解if(xxx)判斷的規(guī)則后再去看,那么結果可能就顯而易見了
對于if括號里的表達式,會被強制轉換為布爾類型,而轉換的規(guī)則如下
| 類型 | 結果 |
|---|---|
| Undefined | false |
| Null | false |
| Boolean | 直接判斷 |
| Number | +0, ?0, 或者 NaN 為 false, 其他為 true |
| String | 空字符串為 false,其他都為 true |
| Object | true |
有了這個規(guī)則之后,再回頭去看上面的問題,不難得出結果,分別為:
true false true true true
xxx==xx的情況
類似的,我們來看看不同類型的值使用==比較的結果
有如下問題
!" " == false
"0" == false
"00" == false
"0.00" == false
undefined == null
{} == true
[] == true
var obj = {
a: 0,
valueOf: function(){return 1}
}
obj == "[object Object]"
obj == 1
obj == true
下表為==相等運算符的轉換規(guī)則
| x | y | 結果 |
|---|---|---|
| null | undefined | true |
| Number | String | x == toNumber(y) |
| Boolean | (any) | toNumber(x) == y |
| Object | String or Number | toPrimitive(x) == y |
| otherwise | otherwise | false |
toNumber
| type | Result |
|---|---|
| Undefined | NaN |
| Null | 0 |
| Boolean | ture -> 1, false -> 0 |
| String | “abc” -> NaN, “123” -> 123 |
toPrimitive
對于 Object 類型,先嘗試調用 .valueOf 方法獲取結果。 如果沒定義,再嘗試調用 .toString方法獲取結果
從上方表格可以看出,當數字和字符串比較時,會將字符串轉換為數字,而對象和字符串做比較時,會調用對象的valueOf或toString方法進行轉換
因此上面的答案分別為
true
true
true
true
true
false
false
fasle
true
true
總結
雖然我們了解了上述兩種情況的類型轉換規(guī)則,但是在日常工作中還是建議使用規(guī)范的if(xxx===xx)的嚴格相等運算符的格式,否則可能會帶來意想不到的副作用,也會給團隊其他成員帶來理解上的困擾