js 自帶的 map() 方法全面了解
1. 方法概述
map() 方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。
2. 例子
2.1 在字符串中使用map
在一個(gè) String 上使用 map 方法獲取字符串中每個(gè)字符所對(duì)應(yīng)的 ASCII 碼組成的數(shù)組：
var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值為[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
2.2 易犯錯(cuò)誤
通常情況下，map 方法中的 callback 函數(shù)只需要接受一個(gè)參數(shù)（很多時(shí)候，自定義的函數(shù)形參只有一個(gè)），就是正在被遍歷的數(shù)組元素本身。
但這并不意味著 map 只給 callback 傳了一個(gè)參數(shù)（會(huì)傳遞3個(gè)參數(shù)）。這個(gè)思維慣性可能會(huì)讓我們犯一個(gè)很容易犯的錯(cuò)誤。
// 下面的語(yǔ)句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能覺(jué)的會(huì)是[1, 2, 3]
// 但實(shí)際的結(jié)果是 [1, NaN, NaN]
// 通常使用parseInt時(shí),只需要傳遞一個(gè)參數(shù).但實(shí)際上,parseInt可以有兩個(gè)參數(shù).第二個(gè)參數(shù)是進(jìn)制數(shù).可以通過(guò)語(yǔ)句"alert(parseInt.length)===2"來(lái)驗(yàn)證.
// map方法在調(diào)用callback函數(shù)時(shí),會(huì)給它傳遞三個(gè)參數(shù):當(dāng)前正在遍歷的元素, 元素索引, 原數(shù)組本身.
// 第三個(gè)參數(shù)parseInt會(huì)忽視, 但第二個(gè)參數(shù)不會(huì),也就是說(shuō),parseInt把傳過(guò)來(lái)的索引值當(dāng)成進(jìn)制數(shù)來(lái)使用.從而返回了NaN.
/*
//應(yīng)該使用如下的用戶函數(shù)returnInt
function returnInt(element){
return parseInt(element,10);
}
["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/
參考 ： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
以上這篇js 自帶的 map() 方法全面了解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
js驗(yàn)證真實(shí)姓名與身份證號(hào)是否匹配
使用javascript技術(shù)驗(yàn)真實(shí)姓名，要用到unicode字符來(lái)匹配，由于中國(guó)人的姓名長(zhǎng)度一般是在2-4這個(gè)范圍內(nèi)，所以重復(fù)匹配{2,4}次。接下來(lái)，通過(guò)本文給大家分享js驗(yàn)證省份證號(hào)與真實(shí)姓名是否匹配，需要的朋友可以參考下2015-10-10
javascript檢測(cè)瀏覽器的縮放狀態(tài)實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測(cè)瀏覽器的縮放狀態(tài)實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
在前端項(xiàng)目中,常用的?JavaScript?處理數(shù)據(jù)的方法有很多,本文為大家整理了一些常用的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
本文是對(duì)js中頁(yè)面元素的幾個(gè)用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以 過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)
這篇文章主要介紹了TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript手寫(xiě)源碼之實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一點(diǎn)的幫助，需要的可以參考一下2023-02-02
JS中如何實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁(yè)面頂部的問(wèn)題
這篇文章主要介紹了JS中實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽返回頁(yè)面頂部的問(wèn)題，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
基于prototype擴(kuò)展的JavaScript常用函數(shù)庫(kù)
基于prototype擴(kuò)展的JavaScript常用函數(shù)庫(kù)實(shí)現(xiàn)代碼，學(xué)習(xí)js的朋友可以參考下。2010-11-11
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
javascript hashtable實(shí)現(xiàn)代碼
javascript中沒(méi)有像c#,java那樣的哈希表(hashtable), 然而，javascript中的Array也只有一些類似于'哈希表'的非常簡(jiǎn)單功能。2009-10-10