JavaScript中類型的強制轉換與隱式轉換詳解

一、隱式轉換

以下語句的執行結果是什麼?

A. undefined == null
B. isNaN("100")
C. parseInt("1a") === 1
D. [ ] instanceof Array

答案:

A. undefined == null 為 true; undefined === null 為 false

B. 當傳入 NaN 或能被轉換成 NaN 的值,isNaN 返回 true,”100″會被先轉成 Number–>100,不為 NaN,因此返回 false

C. parseInt(“1a”)隻會解析前面是數字的部分,即隻解析”1″,parseInt(“1a1”) === 1 也為 true

D. [ ]是個空數組,返回 true

雙等號裡的轉換

熱身完畢再來看一段代碼:

if ([]) {
  console.log(true);
}

結果輸出瞭 true。

其實 [] 為 false,因為在等號比較時,如果有一邊是 Boolean 值,會優先將左右兩邊的數據轉為 Number,
即:

Number([]); // 0
Number(false); // 0

因此[] 為 false。

但是,但是,進行 if 判斷時,會將數據轉為 Boolean 類型,

即:

Boolean([]); // true

所以可以輸出 true。

總結一些雙等號判斷時的技巧:

  1. 如果雙等號前後有 NaN,一律返回 false;
  2. 如果雙等號前後有佈爾值(0,1 也算),一律轉成數字再比較,(false 為 0,true 為 1);
  3. 如果雙等號前後有字符串,分為三種情況:
    1. 另一端是對象,則對象使用 toString 或者 ValueOf 進行轉換;
    2. 另一端是數字,字符串轉數字;
    3. 另一端是字符串,直接比較;
    4. 其他一律返回 false。
  4. 如果一端是數字,另一端是字符串如 ‘3’則參考第三條。另一端是對象,取對象的 toString 或 ValueOf 結果進行比較,其他一律返回 false;
  5. null 和 undefined 不進行類型轉換,但是它們倆相等;

Boolean 類型轉換

var test = new Boolean();
console.log(test);

var test = new Boolean(0);
console.log(test.valueOf());

var test = new Boolean(null);
console.log(test.valueOf());

var test = new Boolean("");
console.log(test.valueOf());

var test = new Boolean(NaN);
console.log(test.valueOf());

答案為:

false false false false false

原理如下:

  1. 當作為一個構造函數(帶有運算符 new)調用時,Boolean() 將把它的參數轉換成一個佈爾值,並且返回一個包含該值的 Boolean 對象,註意這裡返回的是 Boolean 對象,可以通過 toString 或者 valueOf 取值;
  2. 如果作為一個函數(不帶有運算符 new)調用時,Boolean() 隻將把它的參數轉換成一個原始的佈爾值,並且返回這個值——強制類型轉換;
  3. 如果省略 value 參數,或者設置為 0、-0、null、””、false、undefined 或 NaN,則該對象設置為 false。否則設置為 true(即使 value 參數是字符串 “false”)。

“+” 與 “-“

console.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log("A" - "B" + "2");
console.log("A" - "B" + 2);

輸出結果如何?

結果為:122 32 NaN2 NaN

解析:

  1. 數字和字符串相加,會將數字轉為字符串,所以結果是字符串拼接,第一句輸出”122″;
  2. +”2”,這裡的一元運算符+,會將字符串轉為數字,於是 1+ +”2” = 1+2 = 3,再與後面的字符串合並,所以第二句輸出”32″;
  3. 減號會將減號兩邊都先轉化成數字,而 Number(“A”)、Number(“B”)結果是 NaN,減法操作中,隻要有一方為 NaN,結果都是 NaN,因此第三句是 NaN 和”2″的拼接,結果為 NaN2(第 4.1 點中提到,雙等號其中一方為 NaN,結果為 false);
  4. 根據前一句的解析,”A”-“B”結果為 NaN,與數字 2 相加,結果還是 NaN

二、強制類型轉換

對於代碼 var a = 10.42; 取出 a 的整數部分,以下代碼哪些是正確的?

A. parseInt( a );
B. Math.floor( a );
C. Math.ceil( a );
D. a.split('.')[0];

答案:AB

很多人看一眼就會選擇ABC

解析:

A. parseInt 轉換為整數,默認為 10 進制,結果為 10;

B. floor 向下取整,結果為 10 —— floor 是地板的意思,向下取整,輔助記憶;

C. ceil 向上取整,結果為 11;

D. split 操作數必須是正則或字符串,結果為 TypeError。

new String 與 ‘ ‘

下面哪些執行結果為 true?

A. 'foo' == new function(){ return String('foo'); };
B. 'foo' == new function(){ return new String('foo'); };
C. [] == 0
D. ![]
E: !0

答案:

A:下面細說;

B:下面細說;
C:Number([])結果是 0,因此 C 選項正確;
D:對象總等於真,但是為什麼在判斷一個空對象 == true 或者 === true 得到的結果都是 false 呢?

根據我們在雙等號那裡的總結可知,雙等號有一方為佈爾值時,兩邊都會轉換為 Number 類型,所以控制臺測試空對象== true 或者 === true,實際上都是在執行 空對象==1 或者 === 1,所以才會返回 false,因此,如果你想驗證對象總等於真,應該使用!{} 和 !!{}  !{}; // false;   !!{}; // true

E:由於 Boolean(0) == false,因此!0=true,正確。

說說 AB 選項,由於使用 new 關鍵字,調用 function 構造函數,結果變得出乎我們的意料。

首先我們要知道,當使用 new 調用一個構造函數時,如果內部返回瞭一個引用對象(數組,對象,函數等)都將覆蓋 new 創建的匿名對象。

如果返回一個原始類型(無顯式 return 時,其實是返回瞭一個 undefined),那麼就返回瞭 new 創建的匿名對象。

如此看來,

A 選項中,構造函數內返回的是一個字符串,那麼最終構造函數返回的是 new 創建的匿名對象,也就是一個空對象。

B 選項中,構造函數內部返回的是一個字符串對象,那麼最終構造函數返回的是這個對象。

總結

到此這篇關於JavaScript中類型的強制轉換與隱式轉換的文章就介紹到這瞭,更多相關JavaScript類型強制轉換與隱式轉換內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: