為什么要學(xué)習(xí)類型轉(zhuǎn)換

我們都知道，JS是弱類型語(yǔ)言，變量的類型是可以改變的，在es6時(shí)，我們的數(shù)據(jù)類型可以說(shuō)成7種也可以是8種，而在es6之前，我們只有6種類型，即String,Number,Boolean,Undefined,Null和Object，雖然類型不多，但是我們得弄明白轉(zhuǎn)換后變量的確切類型和情況，所以這是我們需要學(xué)習(xí)的。今天我們只討論es6之前的簡(jiǎn)單數(shù)據(jù)類型的顯示轉(zhuǎn)換String,Number,Boolean這3種。

這篇文章很大一部分參考的是MDN中的文檔，MDN是一個(gè)非常全面且權(quán)威的資源庫(kù)，適合從初學(xué)者到高級(jí)開(kāi)發(fā)者的各個(gè)層次的Web開(kāi)發(fā)者：MDN Web Docs

Boolean

// 基本數(shù)據(jù)類型間的顯示類型轉(zhuǎn)換之Boolean
console.log(Boolean()); // 什么都不傳入默認(rèn)值為 false

console.log(Boolean(false));
console.log(Boolean(true));
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(+0),'+0'); // false
console.log(Boolean(-0),'-0'); // false
console.log(Boolean(NaN),'NaN'); // false 
console.log(Boolean(''),'空字符串'); // false

首先引入一個(gè)概念：假值：假值（falsy values）是指那些在布爾上下文中被自動(dòng)轉(zhuǎn)換為 false 的值。當(dāng)這些值出現(xiàn)在條件表達(dá)式中（如 if 語(yǔ)句、循環(huán)的條件部分等），它們會(huì)被解釋為 false，從而影響程序的執(zhí)行流程。

• 當(dāng)在什么都不傳入時(shí)默認(rèn)值為false
• undefined:是一個(gè)假值，表示未定義或者不存在的值。
• null ：表示空值或沒(méi)有對(duì)象，也是假值之一。
• +0和-0也都是假值，雖然都為0，但卻是兩個(gè)不同的值。

console.log(1 / + 0) // Infinity 正無(wú)窮大
console.log(1 / - 0) // -Infinity 負(fù)無(wú)窮大
console.log(Object.is(5, 5)); // 比較兩者是否相等 true
console.log(Object.is(+0, -0)); // false

NaN：Not a number表示一個(gè)無(wú)效或者無(wú)法表示的數(shù)值結(jié)果，同樣是假值。

console.log(2 * "a", 2 + "a"); // NaN 2a
console.log(typeof NaN); // number
console.log(parseInt("abc")); // 將字符串解析為數(shù)字 
console.log(parseInt("12abc"));
console.log(NaN == NaN); // 不代表確切值 
// 不能通過(guò) ===或者== 去判斷是否為NaN 所以要使用 isNaN 
console.log(isNaN(NaN)), isNaN(parseInt("abc")) // false true

字符串a(chǎn)不能有效的轉(zhuǎn)化成一個(gè)數(shù)字，所以會(huì)返回NaN，而+,使用的是加法運(yùn)算符（+）。加法運(yùn)算符在處理一個(gè)數(shù)字和一個(gè)字符串時(shí)有特殊的行為：它不會(huì)嘗試將字符串轉(zhuǎn)換為數(shù)字，而是將數(shù)字轉(zhuǎn)換為字符串，并將兩者連接（拼接）起來(lái)。因此，2 + "a" 的結(jié)果是字符串 "2a"。

isNaN()是Number.isNaN()上的靜態(tài)方法，用于判斷一個(gè)值是否為NaN,NaN不能等于它自己。

parseInt

parseInt 是 JavaScript 中的一個(gè)全局函數(shù)，用于解析一個(gè)字符串并返回一個(gè)整數(shù)。它接受兩個(gè)參數(shù)：

要解析的字符串 (string)：這是你想要轉(zhuǎn)換為整數(shù)的值。

進(jìn)制（可選）  (radix)：這是一個(gè)介于 2 到 36 之間的整數(shù)，表示你想要解析的數(shù)字系統(tǒng)的基數(shù)。例如，2 表示二進(jìn)制，8 表示八進(jìn)制，10 表示十進(jìn)制，16 表示十六進(jìn)制。如果不提供此參數(shù)，parseInt 會(huì)假設(shè)不同的默認(rèn)值，這取決于字符串的前綴：

• 如果字符串以 "0x" 或 "0X" 開(kāi)頭，parseInt 會(huì)將其視為十六進(jìn)制數(shù)。
• 如果字符串以 "0" 開(kāi)頭，parseInt 在舊版瀏覽器中可能會(huì)將其視為八進(jìn)制數(shù)，但根據(jù) ES5 標(biāo)準(zhǔn)，它現(xiàn)在被視為十進(jìn)制數(shù)。
• 否則，parseInt 會(huì)嘗試將字符串解析為十進(jìn)制數(shù)。

parseInt 函數(shù)從字符串的開(kāi)始解析字符，直到遇到一個(gè)無(wú)法被解析為數(shù)字的字符或字符串結(jié)束。所有在合法數(shù)字之后的字符都會(huì)被忽略。如果第一個(gè)字符不能被轉(zhuǎn)換為數(shù)字，則 parseInt 返回 NaN。

" "：任何類型的空字符串（即不包含任何字符的字符串）都是假值。

除了上述所說(shuō)的假值，其余所有在布爾上下文中都為真值，為true。

Number

// 基本數(shù)據(jù)類型間的顯示類型轉(zhuǎn)換之Number
console.log(Number()); // 什么都不傳入默認(rèn)值為 0
console.log(Number(undefined)); // NaN undefined 數(shù)值上下文中沒(méi)有轉(zhuǎn)成一個(gè)特定數(shù)字的含義  
console.log(Number(null)); // 0 在數(shù)字上下文中有轉(zhuǎn)化成0的可能
console.log(Number(false)); // 0 
console.log(Number(true)); // 1 
console.log(Number("123")); // 123 
console.log(Number("-123")); // -123 
console.log(Number("0x11")); // 16進(jìn)制
console.log(Number(""), Number(" ")); // 0
console.log(Number("100a")); // NaN 

var a = 1.234;
console.log(typeof a, a.toFixed(2));// 1.23
var b = new Number(a);
console.log(typeof b); // object
console.log(b.toFixed(2)); // 1.23 
//Number.prototype.toFixed()

這是MDN文檔中截取的部分，意思是：如果提供了 value，則返回由 ToNumber(value) 計(jì)算出的數(shù)值（不是一個(gè)數(shù)字對(duì)象），否則返回 +0。

ToNumber(value) ：這是 ECMAScript 規(guī)范中的一個(gè)抽象操作，用于將不同類型的值轉(zhuǎn)換為數(shù)值。它定義了如何將字符串、布爾值、對(duì)象等非數(shù)字類型轉(zhuǎn)換為相應(yīng)的數(shù)字表示。

對(duì)于undefined指為NaN：因?yàn)?code>undefined的定義，其不存在可能變?yōu)橐粋€(gè)特定的數(shù)字，它沒(méi)有這個(gè)趨勢(shì)或者含義。

對(duì)于null指為NaN:它有值，只是為空，所以它在數(shù)字上下文中可以變成一個(gè)數(shù)字類型，所以在這里為0。

總結(jié)一下，在Number類型轉(zhuǎn)換中，除了正常轉(zhuǎn)換成數(shù)字類型的情況，就只有1和0和NaN。

String

// 基本數(shù)據(jù)類型間的顯示類型轉(zhuǎn)換之String
console.log(String()); // 默認(rèn)為空字符串
console.log(String(undefined), typeof String(undefined)); // "undefined" string
console.log(String(null), typeof String(null)); // "null" string
console.log(String(+0), String(-0)); // "0"
console.log(String(NaN)); // NaN 
console.log(String(1)); // 1

在這里，將其他的類型作為要轉(zhuǎn)變的值填入，都會(huì)被轉(zhuǎn)化成與其名稱相對(duì)應(yīng)的字符串，而不是值。

parseInt more

最后我們?cè)贁U(kuò)展一下parseInt()

console.log([1,2,3].map(parseInt))
console.log([1,2,3].map((v, index, item) => {
    console.log(v, index, item);
    return parseInt(v, index) // [ 1, NaN, NaN ]
    return parseInt(v) // [ 1, 2, 3 ]
})) 

在這里我們運(yùn)用了map來(lái)返回一個(gè)新的數(shù)組，而map中可以傳入三個(gè)參數(shù)，它默認(rèn)傳入了3個(gè)參數(shù)分別是元素的值、下標(biāo)、整個(gè)數(shù)組。而parseInt中可以傳入兩個(gè)值，在上文中我們講到，第二個(gè)位置傳入的是多少進(jìn)制，所以如果在這里向parseInt中傳入下標(biāo)的話，它的效果并不是我們所想的那樣，因?yàn)橹凳?，進(jìn)制為0，也就是默認(rèn)10進(jìn)制，所以第一個(gè)值為1，但是因?yàn)闆](méi)有1進(jìn)制，而二進(jìn)制的格式也不可能擁有3。在不傳入下標(biāo)僅僅傳入值后，將會(huì)得到我們想要的正常輸出結(jié)果，或者顯示指定將要轉(zhuǎn)化為10進(jìn)制。

到此這篇關(guān)于面試中?？嫉腏avaScript中簡(jiǎn)單類型數(shù)據(jù)轉(zhuǎn)換盤(pán)點(diǎn)的文章就介紹到這了,更多相關(guān)JavaScript類型數(shù)據(jù)轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論