在jQuery的工具库里，jQuery.map() 是一个我早期使用频率非常高的函数。它不像 $.each() 那样只是简单地遍历，map() 的核心魅力在于“转换”和“映射”——你对一个数组或对象里的每一项执行某个操作，然后得到一个全新的、由操作结果组成的新数组。
这听起来可能有点抽象，但说白了，它就是一条数据的“流水线”：原料（原数组）进去，经过加工（回调函数），然后产出一批新货（新数组）。它不会改变你的原始数组，这是一个非常纯粹的“函数式”编程思想。
语法与参数详解
让我们先看一下它的基本“配方”：
jQuery.map( array/object, callback )
它接收两个参数，我根据自己的使用习惯，把它们理解为“原料”和“加工图纸”：
-
array/object: 这是你要进行转换的“源材料”。它既可以是一个普通的 JavaScript 数组，也可以是一个对象。当传入对象时，回调函数会依次处理它的每个属性值。 -
callback: 这就是你的“加工图纸”，定义了如何处理每一项。这个回调函数本身接收两个参数：function( value, indexOrKey )。第一个是当前项的值，第二个是该项在数组中的索引或者对象中的键名。-
这个回调函数的返回值非常重要。它决定了新数组长什么样。
-
返回一个值：这个值会被添加到新数组的对应位置。
-
返回
null或undefined：这个行为很特殊，相当于告诉map：“这一项我不要了，从新数组里跳过它”。这给我们提供了一种在映射同时进行过滤的便捷方式。
-
我个人在此处的建议是，如果你只是单纯地想删除数组中的某些项，用原生的 Array.prototype.filter() 语义会更清晰。但当你既需要过滤，又需要对保留项进行修改时，jQuery.map() 返回 null 的特性就显得格外好用，一步到位。
核心示例与实战演练
光说不练假把式，我们通过几个从易到难的场景来看看它具体是怎么工作的。
场景一：数值加工厂
假设我们有一个原始数组 [55, 12, 49, 89, 34, 88]，需求是为每个元素都加上 5，生成一份“强化版”的新数组。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="add5-btn">点击为每个值加5</button>
<p id="result1"></p>
<script>
$(document).ready(function(){
$("#add5-btn").click(function() {
var originalArray = [55, 12, 49, 89, 34, 88];
var newArray = jQuery.map(originalArray, function(value, index) {
// 返回值将进入新数组
return value + 5;
});
$("#result1").html("<b>新数组：</b>" + JSON.stringify(newArray));
// 输出: [60, 17, 54, 94, 39, 93]
});
});
</script>
这里，回调函数对每个 value 执行了 + 5 操作并直接返回，map() 会忠实地把这些返回值收集起来。
场景二：字符串拼接者
我们再来看一个处理字符串数组的例子。原始数组是 ["Welcome", "to", "the", "JQPoint"]，我们想给每个单词后面都拼接一个字符 'J'。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="concat-btn">点击拼接字符</button>
<p id="result2"></p>
<script>
$(document).ready(function(){
$("#concat-btn").click(function(){
var stringArray = ["Welcome", "to", "the", "JQPoint"];
var newStringArray = jQuery.map(stringArray, function(val) {
return val + 'J';
});
$("#result2").html("<b>新数组：</b>" + JSON.stringify(newStringArray));
// 输出: ["WelcomeJ", "toJ", "theJ", "JQPointJ"]
});
});
</script>
这个例子直观展示了 map() 最纯粹的功能：对每个原始值应用一个转换函数，并将转换后的结果一对一地映射到新数组。
场景三：过滤与映射的二合一
这是最能体现 jQuery.map() 巧妙之处的用法。原始数组 [5, 12, 4, 14, 4, 48]，我们的需求很明确：
-
只关心数值大于10的元素。
-
对于这些“合格”的元素，把它们加上7。
-
其余的，直接丢掉。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="filter-map-btn">点击进行筛选并增值</button>
<p id="result3"></p>
<script>
$(document).ready(function(){
$("#filter-map-btn").click(function() {
var sourceArray = [5, 12, 4, 14, 4, 48];
var processedArray = jQuery.map(sourceArray, function(item) {
// 关键点：不满足条件时返回 null，该项将被移除
return item > 10 ? item + 7 : null;
});
$("#result3").html("<b>处理后的新数组：</b>" + JSON.stringify(processedArray));
// 输出: [19, 21, 55]
});
});
</script>
本节课程知识要点：在这个例子中，return item > 10 ? item + 7 : null 这一行代码精妙地结合了 filter 和 map 两个操作。如果你的需求是先过滤再映射，写成两步在代码阅读上会更清晰。但如果你确认这个“条件映射”逻辑足够内聚且简单，那么这种写法则是一种很老练的“jQuery 风格”用法。
jQuery.map() 是一个功能强大且很有“性格”的工具函数。在现在 JavaScript 中，原生数组的 Array.prototype.map() 方法已经成为了标准，它提供类似的功能，但无法直接处理对象，也无法在映射时通过返回 undefined 来优雅地移除元素（原生 map 会为这个项保留一个 undefined 槽位）。
理解 jQuery.map() 不仅仅是为了看懂遗留代码，它背后那种“转换数据流”的思维，对塑造一个开发者的编程思维习惯有长远的价值。当你再遇到数组到数组的转换问题时，可以试着在脑海里把它扔进 map() 这条流水线上思考一下，思路或许会清晰不少。
