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 Type | Result |
|---|---|
| Undefined | false |
| Null | false |
| Boolean | The result equals the input argument (no conversion). |
| Number | The result is false if the argument is +0, -0, or NaN; otherwise the result is true. |
| String | The result is false if the argument is the empty string (its length is zero); otherwise the result is true. |
| Object | true |
本篇文章就探討到這邊，如果有任何的問題歡迎留言討論。
沒有留言:
張貼留言