map（）get（）混乱

Question

我刚刚浏览了jQuery API，我对map()＆amp; get()方法。我知道我错了，但map()方法看起来很像.each()语句？除了文档说它返回一个新的jQuery对象。

我一直在玩jsfiddle试图让我的头围绕它，但我不是那里。 here是jsfiddle链接：

此处还有代码片段：

$.fn.equalizeHeights = function() {
    var two = $(this).map(function(i, e) {
                                return $(e).height();
                            });
    console.log(two);
    console.log(two.constructor);
    console.log(two.get());
    console.log(two.get().constructor);
    return this.height(Math.max.apply(this,two.get()));
}
$('input').click(function() {
    $('div').equalizeHeights();
});

我看到他们正在使用原型扩展jQuery来创建一个名为equalizeHeights()的函数。 $(this)表示页面上所有“div”元素的选择器。 map()调用遍历div数组中的每个项并返回其高度？但我感到困惑的是我正在登录控制台。 一个是object，另一个是array？

有人可以详细说明map()和get()在这段代码中做了些什么吗？

提前致谢。

Answer 1

基础

有两种不同的jQuery map()函数：.map()和$.map()。他们执行类似的事情，但在不同的集合。您正在使用第一个表单，它执行以下操作：

1. 迭代调用函数的jQuery对象（集合，无论如何）。在这种情况下，那是$(this)，这是.equalizeHeights()函数被调用的任何内容...... $('div')：页面上的所有<div>元素（phew）。< / LI>

2. 创建一个数组，其元素数量与调用.map()的对象相同（页面上的所有div，请记住），其n ^th 元素由调用提供的回调 - 我将在一秒内到达目标jQuery对象中的n ^th 元素。在这种特殊情况下，该回调就是这个函数：

   function(i, e) { return $(e).height(); }

是的，.map()看起来像.each()，但有一个关键区别：

• .each()对集合中的每个元素执行操作;传递给.each()的回调的返回值用于确定迭代是否继续。
• .map()还对集合中的每个元素执行操作，但回调的返回值用于生成.map()返回的类数组对象中的元素。

你还和我在一起吗？

jQuery obects是类似数组的，但它们不是数组！在.get()调用结束时调用.map()的原因是将该jQuery对象转换为真正的数组。该数组的元素是回调返回的值。

全部放在一起

此函数将页面上每个<div>的高度设置为最高<div>的高度。方法如下：

$('input').click(function() {   // bind a click listener to every <input> element
    $('div').equalizeHeights(); // ...that will call the equalizeHeights() fn
                                //    on all <div> elements when fired
});

因此，查看equalizeHeights()定义：

$.fn.equalizeHeights = function() {
    // construct an array that contains the height of every <div> element
    var two = $(this).map(function(i, e) {
                                return $(e).height();
                          });


    return this.height(    // set the height of element <div> element to...
        Math.max.apply(    // the largest value in...
            this,two.get() // the array of height values
        )
    ); // ...and finally, return the original jQuery object to enable chaining
}

但constructor业务呢？

正如您所发现的，是，一个是对象（一个jQuery对象），另一个是数组。这就是为什么你需要.get()调用将类似数组的对象变成Math.max()可以理解的东西。

不是查看constructor属性，而是可以使用更多jQuery来确定您正在查看的内容：

console.log(two.jquery);         // the version of jquery, something like "1.4.4"
console.log($.isArray(two));     // is it a plain old JS array? false
console.log(two.get().jquery);   // undefined! it's just an array.
console.log($.isArray(two.get()));    // true

更好的方法是查看调试器内部的实际对象，而不仅仅是console.log()。这样，您可以看到整个对象图，其所有属性等。

有什么问题吗？评论。

Answer 2

map遍历jQuery对象并将函数应用于每个元素。每个调用的返回值都会添加到数组中。然后将该数组包装到jQuery对象中并返回。

get返回一个包含jQuery对象中每个元素的数组。这意味着它基本上解包了map返回的选择并获得了一个普通的JS数组。

在您的示例中，map创建一个包含每个元素高度的选择。然后，在其上调用get，以便本机JS函数Math.max可以理解它。然后this.height()将选择中每个元素的高度设置为数组中的最大值。

Answer 3

Each似乎没有返回结果数组，而map返回一个包含所有回调的reurn值的数组。

Get返回一个包含在jquery对象中的纯项的数组，如lonesomeday所述。 （校正的）