$.map()用于遍历数组并转换数据,如将[1,2,3,4,5]翻倍为[2,4,6,8,10],支持过滤大于2的数并平方得[9,16],与原生map不同的是会自动排除undefined值,返回新数组而非jQuery对象。

在jQuery中,map() 方法用于遍历数组或对象,并为每个元素执行一个函数,返回一个新的 jQuery 对象或数组。它类似于原生 JavaScript 中的 Array.prototype.map(),但有一些细微差别,特别是在处理 jQuery 集合时。
基本语法
$.map( array, callback )参数说明:
- array:要遍历的数组或类数组对象。
- callback:为每个元素执行的回调函数,接受两个参数:当前元素的值和索引(value, index)。
回调函数中返回的值将组成新的数组。如果返回 null 或 undefined,该元素不会被包含在结果中。
遍历普通数组并转换数据
使用 $.map() 将数组中的每个元素进行处理,比如将数字翻倍:
ReportPlust意在打造一套精美的数据报表模板,里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件,用户只需要按照虚拟数据的格式,传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示,该插件
var doubled = $.map(numbers, function(value, index) {
return value * 2;
});
// 结果: [2, 4, 6, 8, 10]
过滤并转换数据
可以在回调中加入条件判断,实现过滤功能。例如只保留大于2的数并平方:
var nums = [1, 2, 3, 4];var result = $.map(nums, function(value) {
if (value > 2) {
return value * value;
}
// 小于等于2的返回 undefined,自动被忽略
});
// 结果: [9, 16]
与原生 map 的区别
jQuery 的 $.map() 和原生 Array.map() 行为略有不同:
- 原生
map不会跳过null或undefined,而是保留位置。 - jQuery
$.map()会自动排除返回为null或undefined的项。
// [undefined, undefined, 3] —— 三个元素
$.map([1, 2, 3], function(x) { return x > 2 ? x : undefined; })
// [3] —— 只保留有效值
基本上就这些。如果你只是处理普通数组,$.map() 提供了简洁的数据转换方式,特别适合在 jQuery 项目中配合使用。注意它返回的是标准数组,不是 jQuery 对象。









