start

先看一個(gè)題目['1','2','3'].map(parseInt)

乍一看，我寫下答案：[1,2,3]

控制臺運(yùn)行：['1',NaN，NaN]

為什么？map函數(shù)我很熟悉了，那么問題出在哪里？大概率出在 parseInt上了

回顧一下map

map() 方法創(chuàng)建一個(gè)新數(shù)組，這個(gè)新數(shù)組由原數(shù)組中的每個(gè)元素都調(diào)用一次提供的函數(shù)后的返回值組成。總共就兩個(gè)參數(shù)，一個(gè)是回調(diào)函數(shù)，一個(gè)是指定對應(yīng)的this。

1.第一個(gè)參數(shù)：回調(diào)函數(shù)

var newArr = [1, 2, 3].map((item, index, arr) => {
  console.log(item, index, arr)
  return item * 2
})
/* 
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

console.log(newArr) // [ 2, 4, 6 ]

回調(diào)函數(shù)的三個(gè)參數(shù)依次為：1.當(dāng)前正在處理的元素；2.當(dāng)前元素的索引；3.調(diào)用map的數(shù)組；

2.第二個(gè)參數(shù)：指定this

var obj = { name: 'obj對象' }

var newArr = [1, 2, 3].map(function (item, index, arr) {
  return item * 2 + this.name
}, obj)

console.log(newArr) // [ '2obj對象', '4obj對象', '6obj對象' ]

這里稍微注意下，這里不能使用箭頭函數(shù)的形式，因?yàn)榧^函數(shù)的this沒有自己的this對象，內(nèi)部的this就是定義時(shí)上層作用域中的this。

學(xué)習(xí)一下 parseInt

parseInt(string, radix) 解析一個(gè)字符串并返回指定基數(shù)的十進(jìn)制整數(shù)，radix 是 2-36 之間的整數(shù)，表示被解析字符串的基數(shù)。

怎么理解：

• 將一個(gè)字符串A轉(zhuǎn)換成數(shù)字B;
• 第一個(gè)參數(shù)：需要轉(zhuǎn)換的字符串A;
• 第二個(gè)參數(shù)：表示進(jìn)制的基數(shù)（用我自己的大白話講就是：解析字符串A的時(shí)候，把A當(dāng)做多少進(jìn)制的數(shù)字。）

正常的使用：

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10

console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

注意事項(xiàng)：

對于 parseInt 第一個(gè)參數(shù)。如果參數(shù)不是一個(gè)字符串，則將其轉(zhuǎn)換為字符串 (使用 ToString抽象操作)。字符串開頭的空白符將會被忽略。

對于 parseInt 第二個(gè)參數(shù)。從 2 到 36 的整數(shù)，表示進(jìn)制的基數(shù)。例如指定 16 表示被解析值是十六進(jìn)制數(shù)。如果超出這個(gè)范圍，將返回 NaN。假如指定 0 或未指定，基數(shù)將會根據(jù)字符串的值進(jìn)行推算。注意，推算的結(jié)果不會永遠(yuǎn)是默認(rèn)值 10！文章后面的描述解釋了當(dāng)參數(shù) radix 不傳時(shí)該函數(shù)的具體行為。

1. 第一個(gè)參數(shù)如果不是字符串，會被轉(zhuǎn)換為字符串，且開頭空白符會被忽略。

console.log(parseInt(10)) // 10
console.log(parseInt('            10')) // 10
console.log(parseInt('  11   22')) // 11 /* 如果字符之間有空格，讀取第一個(gè) */	

2. 第二個(gè)參數(shù)，取值范圍為 2-36 的整數(shù)，如果超出這個(gè)范圍，將返回 NaN。

console.log(parseInt('10', 1)) // NaN
console.log(parseInt('10', 2)) // 2
console.log(parseInt('10', 36)) // 36
console.log(parseInt('10', 37)) // NaN

3. 第二個(gè)參數(shù)假如指定 0 或未指定，基數(shù)將會根據(jù)字符串的值進(jìn)行推算。

console.log(parseInt('10')) // 10
console.log(parseInt('010')) // 10   /* 某些瀏覽器這里會解讀成 8進(jìn)制 */
console.log(parseInt('ox10')) // NaN


/* 第二個(gè)參數(shù)如果是字符串，會被嘗試讀取數(shù)字 */
console.log(parseInt('10', '36')) // 36

/* **我實(shí)踐的結(jié)果：** 第二個(gè)參數(shù)如果是字符串，會被嘗試讀取數(shù)字，無法讀取，默認(rèn)基數(shù)將會根據(jù)字符串的值進(jìn)行推算*/
console.log(parseInt('10', '7tamato')) // 10
console.log(parseInt('10', 'tamato7')) // 10
console.log(parseInt('0x10', 'tamato7')) // 16

估算的方式：

• 如果輸入的 string 以 0x 或 0X（一個(gè) 0，后面是小寫或大寫的 X）開頭，那么 radix 被假定為 16，字符串的其余部分被當(dāng)做十六進(jìn)制數(shù)去解析。
• 如果輸入的 string 以 “0”（0）開頭，radix 被假定為 8（八進(jìn)制）或 10（十進(jìn)制）。具體選擇哪一個(gè) radix 取決于實(shí)現(xiàn)。ECMAScript 5 澄清了應(yīng)該使用 10 (十進(jìn)制)，但不是所有的瀏覽器都支持。因此，在使用 parseInt 時(shí)，一定要指定一個(gè) radix。
• 如果輸入的 string 以任何其他值開頭，radix 是 10 (十進(jìn)制)。

4. 解析的字符串包含的數(shù)字超過 基數(shù)，返回NaN

console.log(parseInt('3', 2)) // NaN
console.log(parseInt('4', 3)) // NaN
console.log(parseInt('1324', 3)) // NaN

5. 小數(shù)點(diǎn)后超過7位

console.log(parseInt(0.000005)) // 0
console.log(parseInt(0.0000005)) // 5

/* 原因是 0.0000005 不是字符串，會被toString() => 5e-7 */
console.log((0.0000005).toString()) // 5e-7

回到初始的問題

['1','2','3'].map(parseInt)

可以理解成這樣：

parseInt('1',0,['1','2','3'])
parseInt('2',1,['1','2','3'])
parseInt('3',2,['1','2','3'])

• parseInt沒有第三個(gè)參數(shù)，所以可以忽略。
• 基數(shù)為0 => 默認(rèn)10進(jìn)制
• 解析的字符串包含的數(shù)字超過基數(shù)，返回NaN

所以答案：[1,NaN，NaN]

總結(jié)：

由于 parseInt 第二個(gè)參數(shù)的推算并不穩(wěn)定，所以建議在使用 parseInt 的時(shí)候第二個(gè)參數(shù)也添加上。

再捋捋解析規(guī)則：

• 第一個(gè)參數(shù)默認(rèn)為字符串類型，不是字符串類型，會被 toString；如果字符串無法解析，直接返回NaN;
• 第二個(gè)參數(shù)指定為 0 或未指定，會根據(jù)第一個(gè)參數(shù)的格式，進(jìn)行推斷。基數(shù)的取值范圍為 2-36；基數(shù)超出范圍NaN;

來都來了

來都來了，順便看一下和parseInt 比較相似的parseFloat，parseFloat比較簡單，只有一個(gè)參數(shù)，就是需要解析的字符串。

對于 BigInt 類型的數(shù)據(jù)，使用 parseInt和 parseFloat 轉(zhuǎn)換BigInt類型的數(shù)據(jù)，都會存在精度丟失的情況，需要注意下。

end

其實(shí)這道題目就是考察，對 parseInt 方法的熟悉程度。

總結(jié)

到此這篇關(guān)于Js中parseInt的使用及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)Js parseInt使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論