jquery中的map函数(jQuery map遍历)
310人看过
jQuery中的map函数是其核心工具方法之一，它通过遍历对象或数组对每个元素执行回调函数，并将返回值组成新的jQuery对象。相较于原生JavaScript的Array.map，jQuery.map具有更强的兼容性（支持非数组对象）和链式操作特性，但其返回值类型差异常成为开发者混淆点。该函数在处理DOM元素集合、数据转换及复杂对象映射时表现突出，尤其在需要保留jQuery对象特性（如CSS选择器、事件绑定）的场景中不可替代。然而，其回调函数中的this指向和返回值处理规则需特别注意，错误使用可能导致意料之外的结果。
一、基本定义与语法结构
jQuery.map(obj, callback)接受两个参数：待遍历的对象或数组，以及回调函数。回调函数每执行一次会传入两个参数：当前索引和当前元素，返回值将作为新集合的元素。例如：
let arr = [1,2,3];
let $new = $.map(arr, function(n) return n2; ); // [2,4,6]
值得注意的是，当输入为jQuery对象时，回调函数中的this指向始终为DOM元素，而非jQuery实例。
二、返回值类型与用途差异
| 特性 | jQuery.map | Array.map |
|---|---|---|
| 返回值类型 | jQuery对象 | Array |
| 输入兼容性 | 支持数组/对象/jQuery对象 | 仅数组 |
| 链式操作 | 可继续调用jQuery方法 | 需转换类型 |
该差异导致两者适用场景不同：当需要立即执行CSS选择器过滤或事件绑定时，jQuery.map的返回值可直接使用；而Array.map更适合纯数据计算场景。
三、与each函数的核心对比
| 维度 | $.map | $.each |
|---|---|---|
| 主要目的 | 生成新集合 | 执行副作用操作 |
| 返回值 | jQuery对象 | 原对象 |
| 参数数量 | 2个（索引+元素） | 1个（索引/元素混合） |
典型应用差异：使用each批量修改元素样式时无需返回值，而map常用于提取特定属性值组成新数组。例如提取所有input的value：
let values = $('input').map(function() return this.value; ).get();
四、参数机制与回调细节
- 索引参数：在非数组对象中，索引表示属性名（如对象键名）
- 元素参数：始终为当前遍历项的原始值（可能是DOM节点或普通数据）
- 返回值处理：若回调返回null或undefined，则自动过滤该元素
- 上下文绑定：回调函数中的this指向始终为当前DOM元素（非jQuery包装集）
特殊案例：当输入为纯对象时，索引参数为键名而非数字序号，例如：
let obj = a:1,b:2;
let keys = $.map(obj, function(v,k) return k; ); // ["a","b"]
五、链式调用与版本兼容
| 特性 | 完整版jQuery | Slim版jQuery |
|---|---|---|
| map函数支持 | ✅ | ❌（3.0+） |
| 返回值类型 | jQuery对象 | - |
| 链式操作示例 | $.map(...).filter(...) | - |
在Slim版中缺失map时，需改用each手动构建数组，但会失去链式操作能力。例如：
// Slim版替代方案
let result = [];
$('div').each(function()
if(this.className)
result.push(this.innerHTML);
);
六、性能优化与适用场景
时间复杂度：map与each均为O(n)，但map因涉及新对象创建，内存消耗更高。建议在以下场景优先使用：
- 需要转换数据格式（如DOM转JSON）
- 需过滤+映射同时完成（替代filter+map组合）
- 依赖
性能陷阱：对
对比维度 $.map Array.map Object.values 输入类型 数组/对象/jQuery对象 数组 纯对象
81人看过
136人看过
323人看过
101人看过
163人看过
102人看过