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

将代码值转换为代码文本是可能的用途。例如，如果您有一个选择列表，并且每个索引值都有相应的代码文本。

jQuery.map - 函数的实际用途？

7 个答案: