JavaScript的數(shù)據(jù)類型轉(zhuǎn)換原則(干貨)
我們都知道JavaScript是一門弱類型(或稱動(dòng)態(tài)類型)的語言,即變量的類型是不確定的。
var num = 123 ; //123 var num = 'HAHAHA' + num ; // "HAHAHA123"
上面的代碼中,變量num起初是一個(gè)數(shù)值,后來又變成一個(gè)字符串。變量類型完全由當(dāng)前值決定。這種類型就叫弱類型。
我們知道,在編程語言中,數(shù)據(jù)本身和運(yùn)算之間都是有類型的。
在強(qiáng)類型的編程語言中,不同類型的變量是不能直接進(jìn)行運(yùn)算的。
但是在弱類型語言中不同類型的變量卻是可以直接相加,因此在運(yùn)算中就需要轉(zhuǎn)換數(shù)據(jù)的類型。這種數(shù)據(jù)類型的轉(zhuǎn)換大多數(shù)情況下都是自動(dòng)轉(zhuǎn)換的,但有時(shí)卻是需要手動(dòng)強(qiáng)制轉(zhuǎn)換,
在進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換之前,我們先來了解一下JavaScript的數(shù)據(jù)類型有哪些。
- 5中基本數(shù)據(jù)類型:number ,string , boolean , undefined , unll .
- 一種復(fù)雜的數(shù)據(jù)類型: Object .
有時(shí)候我們需要知道一個(gè)變量的數(shù)據(jù)類型時(shí),可以通過typeof()來操作。返回值的類型為:string 。
<script> var arr = [undefined , true , 'world' , 123 , null , new Object , function () {}] for ( i = 0; i < arr.length; i ++) { console.log(typeof(arr[i])); } </script>
輸出的結(jié)果為:undefined , boolean , string , number , object , object , function
null明明是基本數(shù)據(jù)類型呀,為什么輸出的結(jié)果是Object.這是因?yàn)閚ull被認(rèn)為是空的對(duì)象引用。記住即可。
函數(shù)不是數(shù)據(jù)類型,但是調(diào)用typeof后為什么會(huì)出現(xiàn)function類型呢。從技術(shù)的角度看,函數(shù)是對(duì)象。但是也有一些特殊的屬性,因此利用typeof來區(qū)分函數(shù)和對(duì)象是有必要的。
顯式轉(zhuǎn)換的數(shù)據(jù)類型
1、將非數(shù)值轉(zhuǎn)換為數(shù)值類型的函數(shù)
有3個(gè)函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值:Number()、parseInt()、parseFloat()。
第一個(gè)函數(shù)Number(mix),可以用于任何數(shù)據(jù)類型,該函數(shù)先將mix的數(shù)據(jù)類型轉(zhuǎn)換為number類型,然后再將mix的值轉(zhuǎn)換為數(shù)值。
若mix的值能直接轉(zhuǎn)換成數(shù)字,則直接顯示。若不能則顯示0或NaN.
而另兩個(gè)函數(shù)則專門用于把字符串轉(zhuǎn)換成數(shù)值。
parseInt(string)函數(shù):將字符串轉(zhuǎn)換為數(shù)值,不遵循四舍五入。這里的string必須是數(shù)字類型的開頭字符串,一直遍歷到非數(shù)值的那個(gè)字符才停止。若不是數(shù)字開頭,則會(huì)顯示NaN.
<script> var num = ["123" , "124.4" , "234asd" , "asf456"] ; for (i = 0; i < num.length; i++) { console.log(parseInt(num[i])); } </script>
執(zhí)行結(jié)果為:123 , 124 , 234 , NaN .
parseFloat(string):將string轉(zhuǎn)換為浮點(diǎn)數(shù)。從數(shù)字位開始看,直到非數(shù)字位結(jié)束,用法與parseInt(string)一致。
parseInt()函數(shù)還有另一種用法。parseInt(string,radix):
以radix為基底,將string轉(zhuǎn)換成十進(jìn)制的整數(shù)。radix的取值為2-32。
2、將其它類型的數(shù)據(jù)轉(zhuǎn)換為字符串類型的函數(shù)
有兩個(gè)函數(shù)可以把其他數(shù)據(jù)類型轉(zhuǎn)換為字符串。toString() 和 string() 。
String(mix):將mix轉(zhuǎn)換成字符串類型。該函數(shù)可以將任何數(shù)據(jù)類型的值轉(zhuǎn)換為字符串。
toString()函數(shù)有兩種用法。,
- 用法一:demo.toString():將demo轉(zhuǎn)換成字符串類型。demo不能等于null undefined
- 用法二:demo.toString(radix):將十進(jìn)制的數(shù)demo轉(zhuǎn)換為目標(biāo)進(jìn)制的數(shù)。如123.0.toString(8)為將十進(jìn)制數(shù)字123轉(zhuǎn)換為8進(jìn)制的字符串。
注:不能寫成123.toString(8) . 因?yàn)闉g覽器解析的時(shí)候會(huì)解析成小數(shù)。
//例題:把一個(gè)二進(jìn)制的數(shù)10001000轉(zhuǎn)換成十六進(jìn)制的數(shù)。
//思路:先把二進(jìn)制轉(zhuǎn)換成十進(jìn)制,再由十進(jìn)制轉(zhuǎn)換成十六進(jìn)制。
var num1 = parseInt('10001000',2); //136 var num2 = num1.toString(16); //'88'
3、將值轉(zhuǎn)換成布爾值類型
Boolean(變量):將一個(gè)值轉(zhuǎn)換成其對(duì)應(yīng)的布爾值。
(1)原始類型值的轉(zhuǎn)換方法
以下六個(gè)值的轉(zhuǎn)化結(jié)果為false,其他的值全部為true。
- undefined
- null
- -0
- +0
- NaN
- ''(空字符串)
(2)對(duì)象的轉(zhuǎn)換規(guī)則
所有對(duì)象的布爾值都是true,甚至連false對(duì)應(yīng)的布爾對(duì)象也是true。
Boolean(new Boolean(false)) // true
請(qǐng)注意,空對(duì)象{}和空數(shù)組[]也會(huì)被轉(zhuǎn)成true。
Boolean([]); // true Boolean({}); // true
隱式的數(shù)據(jù)類型轉(zhuǎn)換
隱式類型的轉(zhuǎn)換是系統(tǒng)進(jìn)行運(yùn)算時(shí)自動(dòng)進(jìn)行的,但是調(diào)用的方法都是顯式類型轉(zhuǎn)換的方法。
1、遞增和遞減操作符
a++ ,a-- ,++a , --a
這4個(gè)操作符對(duì)任何值都適用,也就是他們不僅適用于整數(shù),還可以用于字符串、布爾值、浮點(diǎn)數(shù)值和對(duì)象,此時(shí)伴隨著隱式的數(shù)據(jù)類型轉(zhuǎn)換。
即先將變量通過Number()轉(zhuǎn)換成number的數(shù)據(jù)類型,然后再進(jìn)行遞增、遞減操作。
2、(+)(-),即正負(fù)號(hào)
不僅適用于整數(shù),還可以用于字符串、布爾值、浮點(diǎn)數(shù)值和對(duì)象。將變量通過Number()轉(zhuǎn)換成number的數(shù)據(jù)類型。
3、isNaN(變量)
執(zhí)行過程為:即先將變量通過Number轉(zhuǎn)換,再進(jìn)行isNaN() 。
4、(+) 加號(hào)
先看下面的一段代碼
<script> var str = 1 + "1"; var num = 1 + 1; var num1 = 1 + false; document.write(str , "<br>" , num , "<br>" , num1); </script>
執(zhí)行結(jié)果為:11 , 2 ,1
所以加法有兩個(gè)作用。如果沒有運(yùn)算過程中沒有字符串時(shí),就將變量通過Number()轉(zhuǎn)換為number類型后,再進(jìn)行運(yùn)算。如果有字符串的話,加號(hào)兩邊起的就是字符串連接作用。
5、- * / % 減號(hào),乘號(hào),除號(hào),取余
運(yùn)算時(shí)把數(shù)據(jù)轉(zhuǎn)換成number類型后,再進(jìn)行運(yùn)算。
6、&& || ! 與或非運(yùn)算
將運(yùn)算符兩邊的值轉(zhuǎn)換成通過Boolean()函數(shù)轉(zhuǎn)換成布爾類型,然后再進(jìn)行運(yùn)算。不同的是,&& || 返回的是比較后自身的原值,而 !運(yùn)算返回的是布爾值.
看一個(gè)例子。
<script> console.log(5 && 3); //從左往右判斷,如果全都為真,則返回最后一個(gè)為真的值,只要有一個(gè)判斷為假,就返回為假的那個(gè)值 console.log(0 || 2); //從左往右判斷,返回第一個(gè)為真的值,若完成了全部的判斷且所有的值都為假,就返回最后為假的那個(gè)值 console.log(!3); </script>
返回的結(jié)果為:3 , 2 , false.
7、 < > <= >= == != 比較運(yùn)算符
當(dāng)數(shù)字和字符串比較大小時(shí),會(huì)隱示將字符串轉(zhuǎn)換成number類型進(jìn)行比較。而當(dāng)字符串和字符串比較大小時(shí),則比較的是ascii碼的大小。最后返回的則是布爾值
<script> //1)純數(shù)字之間比較 alert(1<3);//true //2)數(shù)字字符串比較,會(huì)將其先轉(zhuǎn)成數(shù)字 alert("1"<"3");//true alert("123"<"123");//false //3)純字符串比較,先轉(zhuǎn)成ascii碼 alert("a"<"b");//true alert("abc"<"aad");//false,多純字母比較,會(huì)依次比較ascii碼 //4)漢字比較 alert("我".charCodeAt());//25105 alert("的".charCodeAt());//30340 alert("我"<"的");//true,漢字比較,轉(zhuǎn)成ascii碼 //5)當(dāng)數(shù)字和字符串比較,且字符串為數(shù)字。則將數(shù)字字符串轉(zhuǎn)為數(shù)字 alert(123<"124");//true,下面一句代碼得出124的ascii碼為49,所以并不是轉(zhuǎn)成 ascii比較 alert("124".charCodeAt());//49 //6)當(dāng)數(shù)字和字符串比較,且字符串為非純數(shù)字時(shí),則將非數(shù)字字符串轉(zhuǎn)成數(shù)字的時(shí)候會(huì)轉(zhuǎn)換為NaN,當(dāng)NaN和數(shù)字比較時(shí)不論大小都返回false. alert(13>"abc");//false </script>
下面看一種特殊情況。
<script> //undefined不發(fā)生類型轉(zhuǎn)換 console.log(undefined == undefined); //true console.log(undefined == 0); //false console.log(undefined > 0); //false console.log(undefined < 0); //false //null不發(fā)生類型轉(zhuǎn)換 console.log(null == null); //true console.log(null == 0); //false console.log(null > 0); //false console.log(null < 0); //false console.log(undefined == null); //true console.log(NaN == NaN); //false. not a number 不等于任何東西,包括它自己 </script>
關(guān)于 == 的隱式類型轉(zhuǎn)換,可以看博客:http://www.dbjr.com.cn/article/136521.htm
在項(xiàng)目工程中,如果用 == 來判斷兩個(gè)數(shù)值是否相等,由于會(huì)發(fā)生隱式類型轉(zhuǎn)換。所以是非常存在非常大的漏洞的。為了解決這一問題。引入了 === (絕對(duì)等于)和 !==(絕對(duì)不等于)。
<script> console.log(1 === "1"); //false console.log(1 === 1); //true </script>
總結(jié)
以上所述是小編給大家介紹的JavaScript的數(shù)據(jù)類型轉(zhuǎn)換小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- js 數(shù)據(jù)類型轉(zhuǎn)換總結(jié)筆記
- JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法小結(jié)
- JavaScript實(shí)現(xiàn)數(shù)據(jù)類型的相互轉(zhuǎn)換
- 詳解Javascript數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則
- JavaScript中數(shù)據(jù)類型轉(zhuǎn)換總結(jié)
- javascript基本數(shù)據(jù)類型和轉(zhuǎn)換
- JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解(推薦)
- JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例
相關(guān)文章
JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08前端使用pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)為圖片
這篇文章主要為大家詳細(xì)介紹了前端如何使用pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)為圖片功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04使用json來定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘son來定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)鼠標(biāo)移入隨機(jī)變換顏色的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11原生js實(shí)現(xiàn)自定義滾動(dòng)條組件
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動(dòng)條組件的開發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01