start

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

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

控制臺運行：['1',NaN，NaN]

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

回顧一下map

map() 方法創(chuàng)建一個新數組，這個新數組由原數組中的每個元素都調用一次提供的函數后的返回值組成?？偣簿蛢蓚€參數，一個是回調函數，一個是指定對應的this。

1.第一個參數：回調函數

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 ]

回調函數的三個參數依次為：1.當前正在處理的元素；2.當前元素的索引；3.調用map的數組；

2.第二個參數：指定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對象' ]

這里稍微注意下，這里不能使用箭頭函數的形式，因為箭頭函數的this沒有自己的this對象，內部的this就是定義時上層作用域中的this。

學習一下 parseInt

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

怎么理解：

• 將一個字符串A轉換成數字B;
• 第一個參數：需要轉換的字符串A;
• 第二個參數：表示進制的基數（用我自己的大白話講就是：解析字符串A的時候，把A當做多少進制的數字。）

正常的使用：

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

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

注意事項：

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

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

1. 第一個參數如果不是字符串，會被轉換為字符串，且開頭空白符會被忽略。

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

2. 第二個參數，取值范圍為 2-36 的整數，如果超出這個范圍，將返回 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. 第二個參數假如指定 0 或未指定，基數將會根據字符串的值進行推算。

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


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

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

估算的方式：

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

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

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

5. 小數點后超過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沒有第三個參數，所以可以忽略。
• 基數為0 => 默認10進制
• 解析的字符串包含的數字超過基數，返回NaN

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

總結：

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

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

• 第一個參數默認為字符串類型，不是字符串類型，會被 toString；如果字符串無法解析，直接返回NaN;
• 第二個參數指定為 0 或未指定，會根據第一個參數的格式，進行推斷?；鶖档娜≈捣秶鸀?2-36；基數超出范圍NaN;

來都來了

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

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

end

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

總結

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

最新評論