2012年4月15日

JavaScript true/false 傻傻分不清楚




JavaScript true/false 傻傻分不清楚

簡介

因該不少剛學JavaScript初學者常常會碰到這個問題,那就是我的if判斷甚麼時候會是true甚麼時候會是false,或著常常看到別人寫的if裡面沒有放置特別的判斷直接if(obj)這到底是甚麼意思呀,看到這些寫法真的會讓初學的人傻傻分不清楚啊!!


本篇就以這些問題為開始,帶領各位了解if判斷背後的秘辛,廢話不多說我們開始今天的旅程吧。

小技巧


在開始旅程之前,先介紹一個小技巧可以把任何值轉換成true或false,這個方法背後等同於if()裡面的轉換,相信大家都用過!這個符號來反轉true/false,例如if(!a == 520),那大家試過兩個!符號嗎?有人說兩個符號不就等於甚麼都沒做!???


先賣個關子,在這邊你只需要知道!!(物件)會回傳true或false,最簡單應用就是可以把物件轉換的true/false值存到自訂變數中,如下
var value =!!null; // value = false

實例


以下幾個例子你認為誰會是true誰會是false呢?
var q1 = undefined; var q2 = null; var q3 = []; var q4 = {}; var q5 = 0; var q6 = 1; var q7 = 999; var q8 = ""; var q9 = "hello"; var q10 = false; var q11 = true; var q12 = new Boolean("true"); var q13 = new Boolean("false"); var q14 = new Number(0); var q15 = new Number(1); var a1 = !!q1; var a2 = !!q2; var a3 = !!q3; var a4 = !!q4; var a5 = !!q5; var a6 = !!q6; var a7 = !!q7; var a8 = !!q8; var a9 = !!q9; var a10 = !!q10; var a11 = !!q11; var a12 = !!q12; var a13 = !!q13; var a14 = !!q14; var a15 = !!q15;

思考一下,並把答案寫在紙上
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

答案是
a1 = false a2 = false a3 = true a4 = true a5 = false a6 = true a7 = true a8 = false a9 = true a10 = false a11 = true a12 = true a13 = true a14 = true a15 = true 你答對了幾題呢!?


答對12題以上的朋友相信你對本篇文章要探討的已經相當了解,接下來要探討的可能你已經了解但你可以繼續閱讀下去,答對8題以下的朋友,接下來的文章你一定要繼續閱讀下去,好的不繼續廢話了,開始解釋囉


在JavaScript中,會等於false的值只會有undefined, null, false, 0, ""這五種,物件類永遠為true,為什麼?別問我規定就是人家訂好的嘛!!
ECMA官方規格說明


注意我剛剛說得,就只有上面幾種值會是false,那我們再一次掃描每一題題目吧
q1 = undefined; 屬五大false類,為false
q2 = null; 屬五大false類,為false
q3 = []; []是一個空陣列,陣列是物件永遠為true
q4 = {}; {}空的物件還是物件,true
q5 = 0; 屬五大false類,為false
q6 = 1; 不屬五大false類,為true
q7 = 990; 同上
q8 = ""; 空字串屬五大false類,為false
q9 = "hello"; 屬五大false類,為true
q10 = false; 廢話請別懷疑這題送分題
q11 = true; 廢話請別懷疑這題送分題
q12 = new Boolean("true"); 連下一題一起看
q13 = new Boolean("false"); Boolean為object永遠為true 
q14 = new Number(0);
q15 = new Number(1); Number類同屬object永遠為true


注意q12~q15,你不是說0跟false是false嗎,怎麼q13,q15答案為true,那是因為使用new方式創建出來的Boolean, Number它們都是Object子類,使用typeof判斷都是"object",而0, false使用typeof得到的結果分別是"number", "boolean"。
typeof 0; // "number" typeof false; // "number" typeof new Boolean("false"); // "object" typeof new Number(0); // "object" 

總結


歸納上面說明的,整理出這個表格

Input TypeResult
Undefinedfalse
Nullfalse
BooleanThe result equals the input argument (no conversion).
NumberThe result is false if the argument is +0, -0, or NaN; otherwise the result is true.
StringThe result is false if the argument is the empty string (its length is zero); otherwise the result is true.
Objecttrue





本篇文章就探討到這邊,如果有任何的問題歡迎留言討論。

沒有留言:

ShareThis