JavaScript核心概念(1):類型轉換

本文首發於我的博客

看到這個是否是有一種想打人的感受，垃圾 JavaScript，這特麼都什麼鬼，相信不少人不論是筆試仍是面試，都被 JS 的類型轉換難道過，相信認真看完我這篇文章，媽媽不再用擔憂類型轉換的問題了。

原始值到原始值的轉換

1. 原始值轉化爲布爾值

   全部的假值(undefined、null、0、-0、NaN、」」)會被轉化爲 false，其餘都會被轉爲 true

2. 原始值轉化爲字符串 都至關於 原始值 + ""

3. 原始值轉爲數字

   • 布爾轉數字：true -> 1, false -> 0
   • 字符串轉數字：以數字表示的字符串能夠直接會轉爲字符串，若是字符串頭尾有空格會忽略，可是空格在中間，轉換結果就是 NaN。

   +" 66" // 66
     +" 6 7 " // NaN
   複製代碼

原始值到對象的轉換

• null 和 undefined 轉對象直接拋異常
• 原始值經過調用 String()、Number()、Boolean()構造函數，轉換爲他們各自的包裝對象

對象到原始值的轉換

1. 對象轉爲布爾都爲 true
2. 對象到字符串
   • 若是對象有 toString() 方法，就調用 toString() 方法。若是該方法返回原始值，就講這個值轉化爲字符串。
   • 若是對象沒有 toString() 方法或者 該方法返回的不是原始值，就會調用該對象的 valueOf() 方法。若是存在就調用這個方法，若是返回值是原始值，就轉化爲字符串。
   • 不然就報錯
3. 對象到數字
   • 對象轉化爲數字作了跟對象轉化爲字符串作了想同的事兒，不一樣的是後者是先調用 valueOf 方法，若是調用失敗或者返回不是原始值，就調用 toString 方法。
4. 補充。一些經常使用內置對象 toString 方法和 valueOf 的轉換規則
   • toString 相關

     

   • valueOf 相關

     

== 運算符如何進行類型轉換

1. 若是一個值是null，另外一個值是undefined，則相等
2. 若是一個是字符串，另外一個值是數字，則把字符串轉換成數字，進行比較
3. 若是任意值是true，則把true轉換成1再進行比較；若是任意值是false，則把false轉換成0再進行比較
4. 若是一個是對象，另外一個是數值或字符串，把對象轉換成基礎類型的值再比較。對象轉換成基礎類型，利用它的 toString 或者 valueOf 方法。 js 核心內置類，會嘗試 valueOf 先於 toString（能夠理解爲對象優先轉換成數字）；例外的是 Date，Date 利用的是 toString 轉換。非 js 核心的對象，經過本身的實現中定義的方法轉換成原始值。

+ 運算符如何進行類型轉化

1. 若是做爲一元運算符就是轉化爲數字，經常用來將字符串轉化爲數字

   +"2" //  2
   2+false // 0
   複製代碼

2. 若是做爲二元運算符就有兩種轉換方式

   • 兩邊若是有字符串，另外一邊一會轉化爲字符串進行相加
   • 若是沒有字符串，兩邊都會轉化爲數字進行相加，對象也根據前面的方法轉化爲原始值數字。
   • 若是其中的一個操做數是對象,則將對象轉換成原始值，日期對象會經過 toString() 方法進行轉換，其餘對象經過 valueOf（）方法進行轉換，可是大多數方法都是不具有可用的 valueOf() 方法，因此仍是會經過 toString() 方法執行轉換。

流程圖以下：

實戰分析

1. []+[] // ""

_1. 首先運算符是 + 運算符並且很明顯是二元運算符，而且有對象，因此選擇最後一點，操做數是對象，將對象轉換爲原始值。

_2. 兩邊對象都是數組，左邊的數組先調用 valueOf() 方法無果，而後去調用 toString(), 方法，在 toString() 的轉化規則裏面有『將數組轉化爲字符串，用逗號分隔』，因爲沒有其餘元素，因此直接是空字符串 「」。

_3. 由於加號有一邊是字符串了，因此另一邊也轉爲 字符串，因此兩邊都是空字符串 「」。

_4. 因此加起來也是空字符串 「」。

2. (! + [] + [] + ![]).length // 9

_1. 首先咱們會看到挺多一元運算符，「+」、「！」，對於一元運算符是右結合性，因此能夠畫出如下運算順序。

_2. 對於+[]，數組是會被轉化爲數字的而不是字符串，可見「+ 運算符如何進行類型轉化」的第一條，因此通過第一步就會轉化爲

(!0 + [] + false).length

_3. 第二步比較簡單，0 轉化爲布爾值就是 false，因此通過第二步就轉化爲

(true + [] + false).length

_4. 第三步中間的 []會轉爲空字符串，在「+ 運算符如何進行類型轉化」第二條的第三點，對象會被轉轉化爲原始值，就是空字符，因此通過第三步以後就會變成

("true" + false).length

_5. 第五步就比較簡單啦，最終就是

"truefalse".length // 9

附錄：

《JavaScript權威指南》中類型轉換表格

我的公衆號，歡迎繼續交流