jQuery.map - 该功能的实际用途？

Posted 2023-05-07

【中文标题】jQuery.map - 该功能的实际用途？

【英文标题】：jQuery.map - Practical uses for the function?

【发布时间】：2010-10-17 00:35:43

【问题描述】：

我试图更好地理解jQuery.map 函数。

所以一般来说 .map 接受一个数组并将其“映射”到另一个项目数组。

简单的例子：

$.map([0,1,2], function(n)
    return n+4;
);

结果为 [4,5,6]

我想我明白它的作用。我想知道为什么有人需要它。这个功能的实际用途是什么？您如何在代码中使用它？

【参考方案1】：

映射有两个主要目的：从项目数组中获取属性，并将每个项目转换为其他内容。

假设您有一个代表用户的对象数组：

var users = [
   id: 1, name: "RedWolves" ,
   id: 2, name: "Ron DeVera" ,
   id: 3, name: "Jon Skeet" 
];

映射是一种从每个项目中获取特定属性的便捷方式。例如，您可以将其转换为用户 ID 数组：

var userIds = $.map(users, function(u)  return u.id; );

另一个例子，假设你有一个元素的集合：

var ths = $('table tr th');

如果您想存储这些表头的内容以供以后使用，您可以获取它们的 html 内容数组：

var contents = $.map(ths, function(th)  return th.html(); );

【讨论】：

酷。您应该将提示添加到：***.com/questions/182630/jquery-tips-and-tricks

【参考方案2】：

$.map 是关于转换集合中的项目。

就 DOM 而言，我经常使用它来快速从元素中提取值：

var usernames = $('#user-list li label').map(function() 
    return this.innerHTML;
)

上面将用户列表中的<label> 元素转换为仅包含其中的文本。然后我可以这样做：

alert('The following users are still logged in: ' + usernames.join(', '));

【讨论】：

$.map 和 .map() 是不同的函数。您指的是$.map，提供的示例是.map()

示例中提供的代码不会按原样工作，因为您首先需要使用 .get() 将映射列表转换为本机数组。这是更正后的代码： var usernames = $('#user-list li label').map(function() return this.innerHTML; ).get();

【参考方案3】：

Map 是一个high-order function，它使您能够将某些函数应用于给定序列，生成一个新的结果序列，其中包含每个原始元素的值以及所应用函数的值。

我经常使用它来获取我所有 jQuery UI 面板的有效选择器，例如：

var myPanels = $('a').map(function()  
  return this.hash || null; 
).get().join(',');

这将返回当前页面中可用面板的逗号分隔字符串，如下所示：

"#home,#publish,#request,#contact"

这是一个可以使用的有效选择器：

$(myPanels);// do something with all the panels

【讨论】：

这是一个很好的用例！

【参考方案4】：

例子：

$.map($.parseJSON(response), function(item)      
    return  value: item.tagName, data: item.id ;
)

这里服务器将以 JSON 格式返回“响应”，通过使用 $.parseJSON 它正在将 JSON 对象转换为 javascript 对象数组。

通过对每个对象值使用$.map，它将调用function(item) 来显示结果值：item.tagName, data: item.id

【参考方案5】：

这是你可以用它做的一件事。

$.map(["item1","item2","item3"], function(n)
    var li = document.createElement ( 'li' );
    li.innerHTML = n;
    ul.appendChild ( li );
    return li;
);

【参考方案6】：

最近我在实际环境中发现了.map 的一个很好的例子。

考虑到如何在给定此数组（或另一个数组）的情况下将选项附加到选择框：

selectValues =  "1": "test 1", "2": "test 2" ;

this *** answer 使用.map：

$("mySelect").append(
  $.map(selectValues, function(v,k) 
     return $("<option>").val(k).text(v);
  )
);

【参考方案7】：

将代码值转换为代码文本是一种可能的用途。比如当你有一个选择列表并且每个索引值都有对应的代码文本时。