【JavaScript】typeof、instanceof、資料類型轉換

目錄

• ​​1. typeof​​
• ​​2. instanceof​​
• ​​3. 資料類型轉換​​

1. typeof

• 對于基本資料類型，除了​

  ​null​

  ​都可以顯示正确的類型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof b // b 沒有聲明，但是還會顯示 undefined      

• 對于對象，除了函數都會顯示​

  ​object​

  ​

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'      

• 對于​

  ​null​

  ​​，他屬于基本資料類型，但是會顯示​

  ​object​

  ​

typeof null // 'object'      

• 如果我們想要判斷一個變量是否存在，可以使用​

  ​typeof​

  ​​：(不能使用​

  ​if(a)​

  ​​ ，若​

  ​a​

  ​未聲明，則報錯)

if(typeof a != 'undefined'){
    //變量存在
}      

• 可以通過​

  ​Object.prototype.toString.call(xx)​

  ​檢視一個變量的正确的資料類型

調用object.toString時，因為數組、函數等都是object的執行個體，都重寫了toString方法，調用的就是重寫後的方法，函數傳回的是函數體的字元串，數組傳回的是數組元素組成的字元串，而Object.prototype.toString方法傳回的是對象的具體類型。

• ​

  ​Object.prototype.toString.call(xx)​

  ​的應用

在網上看到的一個面試題：

實作一個函數clone，可以對js中的5種主要的資料類型（包括number string object array Boolean）進行值複制。

function getDataType(data){  
    var getType=Object.prototype.toString;  
    var myType=getType.call(data);//調用call方法判斷類型，結果傳回形如[object Function]  
    var typeName=myType.slice(8,-1);//[object Function],即去除“[object ”的字元串。  
    var copyData='';//複制後的資料  
    //console.log(data+" is "+myType);  
    switch(typeName){  
        case 'Number': copyData=data-0;  
                break;  
        case 'String': copyData="'"+data+"'";  
                break;  
        case 'Function': copyData=data;  
                break;  
        case 'Null': copyData=null;  
                break;  
        case 'Undefined': copyData="Undefined";  
                break;  
        case 'Array':   
                    copyData=[];//先将copyData變為空數組  
                    for(var i=0;i<data.length;i++){  
                        copyData[i]=data[i];//将data數組資料逐個寫入copyData  
                    }  
                break;  
        case 'Object':   
                    copyData={};//先将copyData變為空對象  
                    for(var x in data){  
                        copyData[x]=data[x];  
                    }  
                break;  
        case 'Boolean': copyData=data;  
                break;  
        default : copyData=data;  
                break;  
    }  
    return copyData;  
}   
console.log(getDataType(123));  
console.log(getDataType("123"));  
console.log(getDataType(null));  
console.log(getDataType(undefined));  
console.log(getDataType(false));  
console.log(getDataType([1,2,4]));  
console.log(getDataType({"name":"wc"}));  
console.log(getDataType(function(){alert(23);}));      

2. instanceof

• 定義：​

  ​instanceof​

  ​​運算符用來測試一個對象在其原型鍊中是否含有一個構造函數的​

  ​prototype​

  ​​屬性，其文法是：​

  ​object instanceof constructor​

  ​
• 參數：其中​

  ​object​

  ​​是要檢測的對象，​

  ​constructor​

  ​是某個構造函數
• 注意：instanceof隻能用來檢測對象和函數，不能檢查其他資料類型

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var str = 'hello world'
str instanceof String // false

var str1 = new String('hello world')
str1 instanceof String // true      

3. 資料類型轉換

把一個變量轉換為 基本資料類型 的轉換過程可以被抽象成一種稱為 ​

​ToPrimitive​

​​ 的操作, 對于基本資料類型直接傳回本身. 對于對象就執行對象本身的​

​valueOf​

​​ 方法或 ​

​toString​

​ 方法傳回操作數的基本資料類型。

• 轉為​

  ​boolean​

  ​​值

  在條件判斷時，除了​​

  ​undefined​

  ​​，​

  ​null​

  ​​，​

  ​false​

  ​​，​

  ​NaN​

  ​​，​

  ​' '​

  ​​，​

  ​0​

  ​​，​

  ​-0​

  ​，其他所有值都轉為 true，包括所有對象。

• 對象轉基本類型

  （1）對象在轉換基本類型時，會調用​​

  ​valueOf​

  ​​ 和​

  ​toString​

  ​​，并且這兩個方法你是可以重寫的。

  （2）如果傾向于轉換為​​

  ​Number​

  ​​ 類型的，就優先調用​

  ​valueOf​

  ​​；如果傾向于轉換為​

  ​String​

  ​​ 類型，就隻調用​

  ​toString​

  ​

• 運算強制轉換

  （1）當運算符為​​

  ​+​

  ​​時，若其中一方為字元串，就會把另一方轉換為字元串

  （2）其他運算時，隻要一方為數字，那另一方就轉化為數字（可以使用​​

  ​-0​

  ​​，​

  ​*1​

  ​​，​

  ​/1​

  ​​将資料轉換為​

  ​Number​

  ​​）

  （3）對于加号需要注意這個表達式​​

  ​'a' + + 'b'​

  ​ （4）加法運算會觸發三種類型轉換：将值轉換為原始值，轉換為數字，轉換為字元串

'a' + + 'b' // -> "aNaN"
// 因為 + 'b' -> NaN      

[1, 2] + [2, 1] // '1,22,1'
// [1, 2].toString() -> '1,2'
// [2, 1].toString() -> '2,1'
// '1,2' + '2,1' = '1,22,1'      

• ​

  ​==​

  ​操作符

對于​

​==​

​，一般是先轉換（強制類型轉換）再進行比較。

在轉換不同的資料類型時，對于相等和不相等操作符，有如下的基本轉換規則：

1. 如果有一個操作數是布爾值，則在比較相等性之前，将其轉換為數值；
2. 如果一個操作數是字元串，另一個操作數是數值，在比較之前先将字元串轉換為數值；
3. 如果一個操作數是對象，另一個操作數不是，則調用對象的 valueOf() 方法，用得到的基本類型值按照前面的規則進行比較；
4. 如果有一個操作數是 NaN，無論另一個操作數是什麼，相等操作符都傳回 false；
5. 如果兩個操作數都是對象，則比較它們是不是同一個對象。如果指向同一個對象，則相等操作符傳回 true；
6. 在比較相等性之前，不能将 null 和 undefined 轉成其他值。
7. null 和 undefined 是相等的。

.log( [] == ![] )  // true
console.log( {} == !{} )  // false      

（1） 根據運算符的優先級，先計算​

​![]​

​​,因為除了​

​null​

​​、​

​undefined​

​​、​

​NaN​

​​、​

​' '​

​​取反為true，其餘都為false。是以​

​![]​

​​為false；​

​[] == ! []​

​​ 相當于 ​

​[] == false​

​​ （2）如果一個操作數是布爾值，則在比較相等性之前先将其轉換為數值——false轉換為0，而true轉換為1，則​

​false​

​為0； ​

​[] == false​

​ 相當于 ​

​[] == 0​

​ （3）根據上面規則，對于空數組，​

​Number([])​

​結果是0；​

​[] == 0​

​ 相當于 ​

​'0 == 0​

​，是以結論為​

​true​

​

{} == !{}  ->  {} == false  ->  Number({}) == Number(false)  ->  NaN == 0