站長資訊網(wǎng)
在jquery中，map()函數(shù)返回的是使用指定函數(shù)處理封裝后新的數(shù)組；該函數(shù)用于使用指定函數(shù)處理數(shù)組中的每個(gè)元素或?qū)ο蟮拿總€(gè)屬性，并將處理結(jié)果封裝為新的數(shù)組返回；該函數(shù)返回值將作為結(jié)果數(shù)組中的一個(gè)元素，如果返回值為null或undefined，則不會(huì)被添加到結(jié)果數(shù)組中。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。
jquery中map
jQuery.map()函數(shù)用于使用指定函數(shù)處理數(shù)組中的每個(gè)元素(或?qū)ο蟮拿總€(gè)屬性)，并將處理結(jié)果封裝為新的數(shù)組返回。
注意：
1. 在jQuery 1.6 之前，該函數(shù)只支持遍歷數(shù)組；從 1.6 開始，該函數(shù)也支持遍歷對(duì)象。
2. map()還會(huì)為函數(shù)傳入兩個(gè)參數(shù)：其一是當(dāng)前迭代的元素或?qū)傩灾担涠钱?dāng)前迭代項(xiàng)的數(shù)組索引或?qū)ο髮傩悦?/p>
3. 該函數(shù)返回值將作為結(jié)果數(shù)組中的一個(gè)元素，如果返回值為null或undefined，則不會(huì)被添加到結(jié)果數(shù)組中。
語法
$.map( object, callback )
object Array/Object類型 指定的需要處理的數(shù)組或?qū)ο蟆?/p>
callback Function類型 指定的處理函數(shù)。
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div { color:blue; } p { color:green; margin:0; } span { color:red; } </style> <script src="js/jquery.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>
示例如下：
擴(kuò)展知識(shí)：
在我們?cè)鷍s中有map方法，而在jQuery當(dāng)中也有一個(gè)map方法，那它們之間有什么不同？照例先看代碼
第一個(gè)參數(shù)：當(dāng)前遍歷到的元素
第二個(gè)參數(shù)：當(dāng)前遍歷的索引
第三個(gè)參數(shù)：當(dāng)前被遍歷的數(shù)組
但是，注意：和原生js的forEach方法一樣，不能遍歷偽數(shù)組
毫無疑問的報(bào)錯(cuò)了，在就證明原生js的map方法不能遍歷偽數(shù)組了
那么接下來來看一下jQuery中的map方法吧
第一個(gè)參數(shù)：要遍歷的數(shù)組
第二個(gè)參數(shù)：每遍歷一個(gè)元素之后執(zhí)行的回調(diào)函數(shù)
回調(diào)函數(shù)的參數(shù)：
第一個(gè)參數(shù)：遍歷到的元素
第二個(gè)參數(shù)：遍歷到的索引
和原生js的map方法一樣可以遍歷數(shù)組
那么可不可以遍歷偽數(shù)組？那讓我們直接看代碼吧！
顯然是可以的，和jQuery中的each方法一樣看，map方法也可以遍歷偽數(shù)組
既然jQuery中的each和map方法都可以遍歷數(shù)組和偽數(shù)組，那么它們之間又有什么區(qū)別？
-
each方法默認(rèn)的返回值是遍歷誰就返回誰
2. map方法默認(rèn)的返回值是一個(gè)空數(shù)組
1. each方法不支持在回調(diào)函數(shù)中對(duì)遍歷的數(shù)組進(jìn)行處理
2. map方法可以在回調(diào)函數(shù)中通過return對(duì)遍歷的數(shù)組進(jìn)行處理，然后生成一個(gè)新的數(shù)組返回
可以看到map方法返回的數(shù)組是索引加上索引對(duì)應(yīng)的值，所以說map方法是可以通過return對(duì)遍歷的數(shù)組進(jìn)行處理，然后生成一個(gè)新的數(shù)組返回
而each是不支持通過return在回調(diào)函數(shù)中對(duì)遍歷的數(shù)組進(jìn)行處理
通過以上的比較應(yīng)該都了解到它們之間的不同了吧，什么時(shí)候用map方法什么時(shí)候用each方法，應(yīng)該都有一個(gè)比較清楚的認(rèn)知了吧？
視頻教程推薦：jQuery視頻教程
