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

Question

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

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

简单的例子：

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

结果为 [4,5,6]

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

Answer 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(); });

Answer 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(', '));

Answer 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

Answer 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

Answer 5

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

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

Answer 6

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

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

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

this StackOverflow answer 使用.map：

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

Answer 7

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