Question

jQuery中的.map()函数返回一个jQuery对象：

var $collection = $(selector).map(extractSomeValue)

大多数情况下，所需的是映射值的简单数组：

var extractedArray = $collection.get()

事实上，我发现的所有用例和示例总是将.map（）与.get（）配对，包括jQuery自己的documentation。

使用$collection的用例是什么？为什么.map（）只返回数组，如果这是每个人都使用它的那个？

编辑：要清楚，我只是指jQuery.fn.map，而不是jQuery.map（又名$.map），因为后者定义明确，只能操作在非jQuery对象上，合理地返回一个普通的数组。

Answer 1

想象一下，您已经拥有一个包含a元素的jQuery对象，其中id为href。现在你想要所有目标元素。这是.map()可以派上用场的地方：

var $list = $('a[href^=\\#]');
...
//somewhere else
var $targetElements = $list.map(function() {
       return $(this.href)[0];
});
$targetElements.addClass('newClass');

或您希望根据旧元素创建新元素：

var $links = $('a');
...
var $list = $links.map(function() {
       return $('<li>URL: ' + this.href + '</li>')[0];
});
$list.appendTo($myUl);

我知道，它们可能不是最有用的例子，但它们说明了我的观点。您有元素列表，并希望以某种方式与原始元素相关的另一个元素列表。或者您根据旧元素创建新元素。使用.map()即可使用jQuery对象。

Answer 2

首先要注意的是，jQuery.fn.map与jQuery.map不同，jQuery.fn.map即使将其应用于jQuery对象也会返回一个普通数组。

在jQuery中，他们有时会链接jQuery.fn.filter和map。因此{j}集合上的jQuery.filter会返回另一个jQuery集合，他们可以在其上调用map，而不必扩展jQuery.fn.map的结果。

我认为这只是实现的副作用，但不是，他们是故意这样做的，jQuery.map内部调用map并将结果推送到匹配元素的堆栈。

离开我的头顶，我看不出这个功能非常好的用例。但是，例如，您可以在$elements.map(function() { return [document.createElement('div'), document.createElement('span')]; });函数中一次返回0个或多个节点，并且所有这些节点都将放在一个很好的线性集合中：

{{1}}

Answer 3

我可能会感到困惑（通过多次编辑证明），但我目前的理解是.map()返回一个jQuery Object，它包装一个简单的数组，并提供其他“帮助”jQuery方法。听起来这些辅助函数只有在包装数组是DOM节点数组时才真正有用。 $.fn.get()基本上会为您解开阵列。因此，如果你的map函数重新调整了实际的DOM节点而不是其他值类型，我认为你不会使用get（）。

一个（未经测试且可能有点不正确）的例子：

var $example = $('#foo').map(function() {
    if ($(this).innerHTML == "bar") {
        return this;
    }
});

来自：http://ajpiano.com/when-to-use-jquerys-map-methods/

当你使用jQuery.fn.map时，结果是一个jQuery对象 - 一个由jQuery提供的一组函数的值数组。通常，数组包含DOM个节点，但在使用$.fn.map之后，它只是一个包含任意值的数组。大多数人都熟悉使用.get（index）来访问所选索引处的DOM节点，但是在没有参数的情况下调用.get()时，它会返回整个底层数组。这意味着你不能再在它上面调用jQuery方法，但你可以调用Array.join或任何其他Array方法，这可能是你想要一个数组开始的原因。所以出去.get()吧！

Answer 4

当您必须将一组选定元素的某些属性检索为[]时，

Map非常有用。

例如，假设我想获取以下href元素的a：

<a href="something1">Something</a>
<a href="something2">Something</a>
<a href="something3">Something</a>
<a href="something4">Something</a>

我需要在这种情况下使用地图：

var arr = $("a").map(function(i,e){
    return e.href;
});

Answer 5

当您想要在新集合上继续使用jQuery方法时，.map()返回jQuery对象而不是普通数组的事实可能很有用。这是一个示例（在浏览器控制台中尝试）：

var $collection = $('#qinfo p:even').map(function () {
    return $(this).text();
});

var ucfirst = $collection.map(function () {
    return this.replace(/^./, function (fst) {
        return fst.toUpperCase();
    });
}).get();

var prefixed = $collection.map(function () {
    return 'prefix-' + this;
}).get();

console.log($collection.get());
console.log(ucfirst);
console.log(prefixed);

然而，正如评论中提到的，我认为这主要是代码表示的问题。也就是说，.map()允许您利用函数链。就此而言，我们可以通过将.map()包装到插件中来进一步发展。这样可以使事情更易读，更容易重复使用：

$.fn.ucfirst = function () {
    return this.map(function () {
        return this.replace(/^./, function (fst) {
            return fst.toUpperCase();
        });
    });
};

$collection.ucfirst().each(function () {
    console.log(this.toString());
});

值得注意的是，.ucfirst()旨在处理字符串集合，这超出了jQuery最初目的的范围。

什么时候jQuery .map在没有.get的情况下有用吗？

5 个答案: