最近發(fā)現在前端的面試題目中經常出現操作符類型轉換的題目,于是這里來進行一個JavaScript中的操作符類型轉換示例總結,需要的朋友可以參考下

首先，我們先來做一些題目吧！為了統(tǒng)一，我不混著來寫這些題目，面試題目中，經常將這些題目混起來，這樣對你的迷惑度會更大，為了更方便演示，我在這里分模塊寫了一些題目，大家可以看下！

操作符字符串的隱性轉換

乘法

console.dir("-------以下乘法---------");

console.dir(5*"5");

console.dir(5*"a");

console.dir(5*NaN);

console.dir(5*null);

console.dir(5*undefined);

console.dir(5*5);

console.dir("-------以上乘法---------");

除法

console.dir("-------以下除法---------");

console.dir(5/"5");

console.dir(5/"a");

console.dir(5/NaN);

console.dir(5/null);

console.dir(null/5);

console.dir(5/undefined);

console.dir(5/5);

console.dir(5/0);

console.dir(0/5);

console.dir(0/0);

console.dir("-------以上除法---------"); 

取余、求模

console.dir("-------以下取余、求模--------");

console.dir(16%"5");

console.dir(5%"a");

console.dir(5%NaN);

console.dir(5%null);

console.dir(null%5);

console.dir(5%undefined);

console.dir(5%5);

console.dir(5%0);

console.dir(0%5);

console.dir(0%0);

console.dir("-------以上取余、求模---------"); 

加法

console.dir("-------以下加法--------");

console.dir(16+"5");

console.dir(5+"a");

console.dir(5+NaN);

console.dir(5+null);

console.dir(5+undefined);

console.dir(5+5);

console.dir("兩個數的和是"+5+5);

console.dir("兩個數的和是"+(5+5));

console.dir("-------以上加法--------"); 

減法

console.dir("-------以下減法--------");

console.dir(16-"5");

console.dir(5-"a");

console.dir(5-NaN);

console.dir(5-null);

console.dir(5-undefined);

console.dir(5-5);

console.dir(5-true);

console.dir(5-"true");

console.dir(5-"");

console.dir("兩個數的差是"+5-5);

console.dir("兩個數的差是"+(5-5));

console.dir("-------以上減法--------"); 

關系操作符

console.dir("-------以下關系操作符--------");

console.dir(16>"5");

console.dir("16">"5");

console.dir(5<"a");

console.dir(5>=NaN);

console.dir(5<NaN);

console.dir(NaN>=NaN);

console.dir(5>=null);

console.dir(5>=undefined);

console.dir(5>=5);

console.dir(5>=true);

console.dir(5>="true");

console.dir(5>="");

console.dir("Brick">"alphabet");

console.dir("brick">"alphabet");

console.dir("-------以上關系操作符--------"); 

乘法

console.dir(5*"5"); //25

console.dir(5*"a");//NaN

console.dir(5*NaN);//NaN

console.dir(5*null);0

console.dir(5*undefined);//NaN

console.dir(5*5);//25

下面說一下乘法隱性轉換原則：

1、如果2個數值都是數字，那么直接進行乘法運算，（相信大家都會的，和小學數學一樣，同時要注意數字的符號），如果乘積數值超過了ECMAscript的數值表示范圍，則返回Infinity（正無窮）或者-Infinity（負無窮）

2、如果一個數是NaN,那么結果就是NaN

3、如果Infinity與0相乘，結果是NaN

4、假如一個操作符是數字，另外一個不是數值，那么先用Number()函數，將其進行轉化，將轉化出來的值與數字進行相乘。假如轉換出來的結果出現NaN，那么結果就是NaN。

除法

console.dir(5/"5");//1  將字符轉化為數字進行相除

console.dir(5/"a");//NaN  將“a”用Number()函數進行轉化，出來的值是NaN，結果就是NaN

console.dir(5/NaN);//NaN

console.dir(5/null);//Infinity null用Number()函數進行轉化，結果是0，那么5/0是正無窮

console.dir(null/5);//0 同上0/5是0

console.dir(5/undefined);//NaN  undefined 用Number()進行轉化，結果是NaN

console.dir(5/5);//1

console.dir(5/0);//Infinity

console.dir(0/5);//0

console.dir(0/0);//NaN //0除以0結果是NaN

下面說一下除法隱性轉換原則：

和乘法類似，唯一多的一條就是0/0結果是NaN

取余、求模

求余在項目中用的最多的是求奇數偶數的時候。我們經常用一個數值與2進行求余，結果是0那么這個數是偶數，結果是1那么這個數是奇數。

看看上面的題目：

console.dir(16%"5"); //1 將字符串5通過Number()轉化為5然后進行求余

 console.dir(5%"a");//NaN

 console.dir(5%NaN);//NaN

 console.dir(5%null);//NaN 將null 通過Number()轉化，結果是0，然后計算5%0 ，結果是NaN

 console.dir(null%5);//0 同上0%5 取余，結果是0

 console.dir(5%undefined);//NaN

 console.dir(5%5);//0

 console.dir(5%0);//NaN

 console.dir(0%5);//0

 console.dir(0%0);//NaN

console.dir(Infinity%Infinity);//NaN

console.dir(5%Infinity);//5

 console.dir(Infinity%5); //NaN

下面說一下取余隱性轉換原則：

和乘法一樣，我說一下比較特別的地方吧！我們都知道被除數和除數的概念吧，小學的時候就學過的。

1、被除數是無窮大，除數是有限大的值，那么結果是NaN

2、被除數是有限大的值，除數是0，那么結果是NaN

3、Infinity%Infinity結果是NaN

4、被除數是有限大的值，除數是無窮大的值，結果是被除數。

5、被除數是0，結果是0

減法

看看上面的例子吧！

console.dir(16-"5");//11

console.dir(5-"a");//NaN

console.dir(5-NaN);//NaN

console.dir(5-null);//5

console.dir(5-undefined);//NaN

console.dir(5-5);//0

console.dir(5-true);//4

console.dir(5-"true");//NaN

console.dir(5-"");//5

console.dir(5-Infinity);//-Infinity

console.dir(Infinity-Infinity);//NaN

console.dir("兩個數的差是"+5-5);//NaN

console.dir("兩個數的差是"+(5-5));//兩個數的差是0

下面說一下減法隱性轉換原則：

和上面一樣，相同的就不說了，我說一下減法特有的。

1、Infinity-Infinity結果是NaN

2、-Infinity-Infinity結果是-Infinity

3、一個數字減Infinity結果是-Infinity

4、Infinity-（-Infinity）結果是Infinity

5、如果操作數是對象，則調用對象valueOf方法，如果結果是NaN那么結果就是NaN。如果沒有valueOf方法，那么調用toString()方法，并將得到的字符串轉換為數值。

關系操作符

關系運算符統(tǒng)一返回true或者false

console.dir(16>"5"); //true

console.dir("16">"5");//false

console.dir(5<"a");//false

console.dir(5>=NaN);//false

console.dir(5<NaN);//false

console.dir(NaN>=NaN);//false

console.dir(5>=null);//true

console.dir(5>=undefined);//false

console.dir(5>=5);//true

console.dir(5>=true);//true

console.dir(5>="true");//false

console.dir(5>="");//true 

console.dir("Brick">"alphabet");//false B的字符串編碼值是66 ，而a的字符串編碼是97.因此false

console.dir("brick">"alphabet");//true 小寫字母b比a大，所以是true

下面說一下關系運算符隱性轉換原則：

還是和上面一樣，相同的就不說了。

如果比較的兩個數都是字符串，那么會比較字符串對應的字符串編碼值。

加法運算

加法運算隱性轉換，我之所以最后說，是因為加法運算隱性轉換和之前的不一樣，之前的所有的運算符號，只要一個是數字，另一個也默認使用Number（）進行數字轉換。加法運算不一樣。加法運算只要其中一個是字符串，那么另外一個也會轉換為字符串，然后進行字符串的拼接！

console.dir(16+"5"); //156

console.dir(5+"a");//5a

console.dir(5+NaN);//NaN

console.dir(5+null);//5

console.dir('5'+null);//5null

console.dir(5+undefined);//NaN

console.dir(null+undefined);//NaN

console.dir(5+5);//10

console.dir("兩個數的和是"+5+5);//兩個數的和是55

console.dir("兩個數的和是"+(5+5));//兩個數的和是10

下面說一下加法運算符隱性轉換原則：

1、有一個是字符串，那么另外一個也會轉換為字符串進行拼接。假如一個是字符串，另外一個是null或者undefined，那么相加，null或者undefined就會調用String()方法，獲得字符串“null”或者“undefined”，然后進行拼接。

2、假如一個數字加null或者undefined，那么還是把null或者undefined進行Number()轉換之后再相加。

3、剩下的原則和其他的差不多，就不多說了。

雙等號隱性轉換

把以下代碼運行一遍，相信你自然就懂了~

var a;

console.dir(0 == false);//true

console.dir(1 == true);//true

console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false

console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false

console.dir(1 == undefined);//false

console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true

console.dir(1==="1");//false