站長資訊網(wǎng)
jquery中有map()方法。map()方法用于使用指定回調(diào)函數(shù)處理數(shù)組的每個元素（或?qū)ο蟮拿總€屬性），并將處理結(jié)果封裝為新數(shù)組返回，語法“$.map(數(shù)組或?qū)ο?回調(diào)函數(shù))”。map()方法會為回調(diào)函數(shù)傳入兩個參數(shù)：第一個參數(shù)為當(dāng)前迭代的元素或?qū)傩灾?，第二個參數(shù)為當(dāng)前迭代項的數(shù)組索引或?qū)ο髮傩悦蝗绻卣{(diào)函數(shù)的返回值為null或undefined，則不會被添加到結(jié)果數(shù)組中。
本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.0版本、Dell G3電腦。
jquery中有map()方法。
在jquery中，map()方法用于使用指定回調(diào)回調(diào)函數(shù)處理數(shù)組的每個元素（或?qū)ο蟮拿總€屬性），并將處理結(jié)果封裝為新數(shù)組返回。
注意：1. 在jQuery 1.6 之前，該函數(shù)只支持遍歷數(shù)組；從 1.6 開始，該函數(shù)也支持遍歷對象。
語法格式：
$.map( object, callback )
| 參數(shù) | 描述 |
|---|---|
| object | Array/Object類型 指定的需要處理的數(shù)組或?qū)ο蟆?/td> |
| callback | Function類型 指定的處理函數(shù)。 |
map()會為回調(diào)函數(shù)傳入兩個參數(shù)：其一是當(dāng)前迭代的元素或?qū)傩灾?，其二是?dāng)前迭代項的數(shù)組索引或?qū)ο髮傩悦?/p>
回調(diào)函數(shù)返回值將作為結(jié)果數(shù)組中的一個元素，如果返回值為null或undefined，則不會被添加到結(jié)果數(shù)組中。
示例：使用$.map() 修改一個數(shù)組的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { color:blue; } p { color:green; margin:0; } span { color:red; } </style> <script src="./js/jquery-3.6.0.min.js"></script> </head> <body> <div></div> <p></p> <span></span> <script> $(function() { var arr = ["a", "b", "c", "d", "e"]; $("div").text(arr.join(", ")); arr = $.map(arr, function(n, i) { return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = $.map(arr, function(a) { return a + a; }); $("span").text(arr.join(", ")); }) </script> </body> </html>
擴展知識
map方法可以遍歷數(shù)組，那么可不可以遍歷偽數(shù)組？那讓我們直接看代碼吧！
顯然是可以的，和jQuery中的each方法一樣看，map方法也可以遍歷偽數(shù)組
既然jQuery中的each和map方法都可以遍歷數(shù)組和偽數(shù)組，那么它們之間又有什么區(qū)別？
1、each方法默認(rèn)的返回值是遍歷誰就返回誰
2、map方法默認(rèn)的返回值是一個空數(shù)組
1、each方法不支持在回調(diào)函數(shù)中對遍歷的數(shù)組進行處理
2、map方法可以在回調(diào)函數(shù)中通過return對遍歷的數(shù)組進行處理，然后生成一個新的數(shù)組返回
可以看到map方法返回的數(shù)組是索引加上索引對應(yīng)的值，所以說map方法是可以通過return對遍歷的數(shù)組進行處理，然后生成一個新的數(shù)組返回
而each是不支持通過return在回調(diào)函數(shù)中對遍歷的數(shù)組進行處理
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
