在jquery中，map()函數傳回的是使用指定函數處理封裝後新的陣列；該函數用於使用指定函數處理陣列中的每個元素或物件的每個屬性，並將處理結果封裝為新的陣列傳回；此函數傳回值將作為結果陣列中的一個元素，如果傳回值為null或undefined，則不會被加到結果陣列中。
本教學操作環境：windows10系統、jquery3.6.0版本、Dell G3電腦。
jquery中map
jQuery.map()函數用於使用指定函數處理陣列中的每個元素(或物件的每個屬性)，並將處理結果封裝為新的數組返回。
注意：
1. 在jQuery 1.6 之前，函數只支援遍歷陣列；從 1.6 開始，函數也支援遍歷物件。
2. map()也會為函數傳入兩個參數：其一是目前迭代的元素或屬性值，其二是目前迭代項的陣列索引或物件屬性名稱。
3. 此函數傳回值將作為結果陣列中的一個元素，如果傳回值為null或undefined，則不會被加入到結果陣列中。
語法
$.map( object, callback )
object Array/Object類型 指定的需要處理的陣列或物件。
callback Function類型 指定的處理函數。
範例如下：
<!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>範例如下：
#擴充知識：
在我們原生js中有map方法，而在jQuery當中也有一個map方法，那它們之間有什麼不同？照例先看程式碼
第一個參數：目前遍歷到的元素
第二個參數：目前遍歷的索引
第三個參數：目前被遍歷的陣列
# 但是，注意：和原生js的forEach方法一樣，不能遍歷偽數組
毫無疑問的報錯了，在就證明原生js的map方法不能遍歷偽數組了
那麼接下來來看jQuery中的map方法吧
# 第一個參數：要遍歷的陣列
第二個參數：每遍歷一個元素之後執行的回呼函數
回呼函數的參數：
第一個參數：遍歷到的元素
第二個參數：遍歷到的索引
和原生js的map方法一樣可以遍歷陣列
那麼可不可以遍歷偽數組？那讓我們直接看程式碼吧！
顯然是可以的，和jQuery中的each方法一樣看，map方法也可以遍歷偽數組
既然jQuery中的each和map方法都可以遍歷數組和偽數組，那麼它們之間又有什麼區別呢？
each方法預設的傳回值是遍歷誰就回傳誰
2. map方法預設的回傳值是一個空數組
1. each方法不支援在回呼函數中對遍歷的陣列進行處理
2. map方法可以在回呼函數中透過return對遍歷的陣列進行處理，然後產生一個新的陣列傳回
# 可以看到map方法傳回的陣列是索引加上索引對應的值，所以說map方法是可以透過return對遍歷的陣列進行處理，然後產生一個新的陣列回傳
而each是不支援透過return在回呼函數中對遍歷的陣列進行處理
透過以上的比較應該都了解到它們之間的不同了吧，什麼時候用map方法什麼時候用each方法，應該都有一個比較清楚的認知了吧？
影片教學推薦：jQuery影片教學
以上是jquery中map回傳的是物件還是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
