jquery map

jQuery .map() 方法详解

jQuery 的 .map() 方法用于遍历数组或对象集合，并对每个元素执行回调函数，最终返回一个新的 jQuery 对象或数组。它类似于 JavaScript 的原生 Array.prototype.map()，但专为 jQuery 对象设计。

基本语法

$.map(array, callback)
$(selector).map(callback)

参数说明

• array：待处理的数组或类数组对象。
• selector：jQuery 选择器选中的元素集合。
• callback：处理每个元素的函数，接收两个参数：
  • element：当前处理的元素或值。
  • index：当前元素的索引（可选）。

返回值

• 返回一个新数组或 jQuery 对象，包含回调函数处理后的结果。

使用示例

示例 1：处理数组

const numbers = [1, 2, 3, 4];
const squared = $.map(numbers, function(num) {
  return num * num;
});
// 结果: [1, 4, 9, 16]

示例 2：处理 jQuery 对象

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

const texts = $('li').map(function() {
  return $(this).text();
}).get();
// 结果: ["Apple", "Banana"]

示例 3：过滤数据

通过返回 null 或 undefined 过滤不需要的值：

const mixed = [1, 2, null, 4, undefined];
const filtered = $.map(mixed, function(val) {
  return val ? val * 2 : null;
});
// 结果: [2, 4, 8]

与原生 map() 的区别

1. 返回值处理

   

   • jQuery .map() 自动扁平化嵌套数组。
   • 原生 map() 严格返回与原始数组长度相同的数组。

2. 参数顺序

   • jQuery .map() 回调参数顺序为 (element, index)。
   • 原生 map() 回调参数顺序为 (currentValue, index, array)。

3. 上下文绑定

   

   • jQuery .map() 回调中 this 指向当前元素（DOM 对象）。
   • 原生 map() 回调中 this 默认指向 undefined（除非绑定）。

性能注意事项

• 对于纯数组操作，原生 map() 通常更快。
• 对 DOM 集合操作时，jQuery .map() 更便捷，无需手动转换。

常见问题

如何将结果转为纯数组？

使用 .get() 方法：

const arr = $('div').map(...).get();

如何跳过某些元素？

回调中返回 null 或 undefined：

$('div').map(function() {
  return $(this).hasClass('skip') ? null : this.id;
});