当前位置：首页 > news >正文

map循环遍历

news 2025/7/29 10:53:55

在 jQuery 中，$.map() 和 $(selector).map() 都可用于循环遍历数据，但它们的使用场景和语法有所不同。以下是详细的对比和用法说明：

1. `$.map()` - 通用数据映射

作用：遍历数组或对象，返回处理后的新数组
语法：

var newArray = $.map(collection, function(item, index) {// 返回处理后的值return modifiedItem;
});

示例

// 遍历数组
var numbers = [1, 2, 3];
var squared = $.map(numbers, function(num) {return num * num;
});
// 结果: [1, 4, 9]// 遍历对象
var person = { name: "Alice", age: 25 };
var values = $.map(person, function(value, key) {return `${key}: ${value}`;
});
// 结果: ["name: Alice", "age: 25"]

特点：

支持数组和对象
自动过滤 null 和 undefined 的返回值
返回新数组，不修改原数据

2. `$(selector).map()` - DOM元素映射

作用：遍历 jQuery 对象中的 DOM 元素，返回新 jQuery 对象或数组
语法：

var result = $('selector').map(function(index, element) {// 返回处理后的值return modifiedValue;
}).get(); // .get() 转为纯数组

示例

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

// 获取所有 <li> 文本并转为大写
var texts = $('li').map(function(index, element) {return $(element).text().toUpperCase();
}).get();
// 结果: ["APPLE", "BANANA"]

特点：

专为 DOM 设计
回调参数顺序是 (index, element)（与 $.map() 相反）
需调用 .get() 转为普通数组

3. 对比总结

特性	`$.map()`	`$(selector).map()`
输入类型	数组、对象	jQuery DOM 集合
回调参数顺序	`(item, index)`	`(index, element)`
返回值	自动返回新数组	返回 jQuery 对象（需 `.get()`）
过滤机制	自动跳过 `null`/`undefined`	保留所有返回值
性能	更快（纯数据操作）	较慢（涉及 DOM 操作）

4. 常见用法场景

(1) 数据转换

// 将价格数组格式化为货币字符串
var prices = [10, 20, 30];
var formatted = $.map(prices, function(price) {return `$${price.toFixed(2)}`;
});
// 结果: ["$10.00", "$20.00", "$30.00"]

(2) 过滤数据

// 筛选偶数
var numbers = [1, 2, 3, 4];
var evens = $.map(numbers, function(num) {return num % 2 === 0 ? num : null;
});
// 结果: [2, 4]

(3) DOM 属性提取

// 获取所有链接的 href
var urls = $('a').map(function() {return $(this).attr('href');
}).get();

(4) 嵌套数据扁平化

var matrix = [[1, 2], [3, 4]];
var flat = $.map(matrix, function(row) {return $.map(row, function(cell) {return cell * 2;});
});
// 结果: [2, 4, 6, 8]

5. 注意事项

$.map() 会跳过 null/undefined
若需保留所有值，改用原生 Array.map()：

var result = originalArray.map(function(item) {return transform(item); // 即使返回 undefined 也会保留
});

DOM 遍历优先用 $(selector).each()
如果只是操作 DOM 而不需要返回新数组，更推荐：
```
$('li').each(function(index, element) {$(element).addClass('item-' + index);
});
```
性能优化
大数据量时，原生 for 循环或 Array.map() 比 $.map() 更快。

代码对比：`$.map()` vs 原生 `map`

// jQuery
var jqResult = $.map([1, 2, 3], function(num) {return num * 2;
});// 原生 JavaScript
var jsResult = [1, 2, 3].map(function(num) {return num * 2;
});// 结果相同: [2, 4, 6]