最近發現在前端的面試題目中經常出現操作符類型轉換的題目,於是這裡來進行一個JavaScript中的操作符類型轉換示例總結,需要的朋友可以參考下
首先，我們先來做一些題目吧！為了統一，我不混著來寫這些題目，面試題目中，經常將這些題目混起來，這樣對你的迷惑度會更大，為了更方便演示，我在這裡分模組寫了一些題目，大家可以看下！
運算子字串的隱性轉換
乘法
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()方法，並將得到的字串轉換為數值。
關係運算子
關係運算子統一回傳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上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
詳細解讀在javascript中undefined和null的理解
#以上是JavaScript中的操作符類型轉換（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
