JS中map和parseInt的用法詳解
map
map方法用于創(chuàng)建一個新的數(shù)組(不改變原數(shù)組),這個新數(shù)組由原數(shù)組中的每個元素,調(diào)用map中的回調(diào)函數(shù)處理后的返回值組成!
參數(shù)
map(callbackFn, thisArg)
callbackFn 回調(diào)函數(shù),數(shù)組中的每個元素都會調(diào)用該函數(shù),對數(shù)據(jù)進行處理,處理完成的元素會被添加到新的數(shù)組中!callbackFn被調(diào)用時會傳入如下參數(shù):
- item 當前正在處理的元素
- index 當前正在處理的元素下標
- arr 原數(shù)組
thisArg(可選) 用來修改this指向
使用
// 給數(shù)組中每一項增加一個label屬性! const arr = [{name:'測試1'},{name:'測試2'},{name:'測試3'}] const newArr = arr.map(item=>{ item.label = '通過map添加' return item }) // 結(jié)果: newArr = [{name:'測試1',label: "通過map添加"},{name:'測試2',label: "通過map添加"},{name:'測試3',label: "通過map添加"}]
thisArg這個參數(shù)因為實際開發(fā)中基本都用的是箭頭函數(shù),所以用到第二個參數(shù)的情況并不多
const arr = [{name:'測試1'},{name:'測試2'},{name:'測試3'}] const newArr = arr.map(function(item){ console.log(this); // Number?{1} },1)
map和parseInt一起使用
正常情況下我們使用map回調(diào)函數(shù)中只會傳遞一個參數(shù)item,這就可能會出現(xiàn)下面這種問題:
console.log(["1", "2", "3"].map(parseInt));
期望輸出 [1, 2, 3]
, 而實際結(jié)果是 [1, NaN, NaN]
,這是因為parseInt在使用時,也只傳遞一個參數(shù)進去,但實際上parseInt可以接收兩個參數(shù)(表達式,基數(shù)),所以如上代碼map在執(zhí)行回調(diào)時默認傳遞了三個參數(shù)parseInt的第二個參數(shù)為下標,就導致了[1, NaN, NaN]
的結(jié)果!
# parseInt()
string(必選),要解析的字符串
radix(可選),表示要解析的數(shù)字的基數(shù)
radix介于 2 ~ 36 之間,如果省略該參數(shù)或其值為0,則數(shù)字將以10為基礎(chǔ)來解析,如果它以 0x或0X開頭,將以16為基數(shù),如果該參數(shù)小于2或者大于36,則parseInt()將返回NaN。
到此這篇關(guān)于JS中map和parseInt的用法詳解的文章就介紹到這了,更多相關(guān)JS map parseInt內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
IE中鼠標經(jīng)過option觸發(fā)mouseout的解決方法
這篇文章主要介紹了IE中鼠標經(jīng)過option觸發(fā)mouseout的解決方法,分析了IE中鼠標移到option時window.event.toElement返回值為null的原因及解決方法,需要的朋友可以參考下2015-01-01TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07JavaScript實現(xiàn)網(wǎng)頁跨年倒計時
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁跨年倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12