map（）get（）混乱

我只是通过jQuery API，我对map()和get()方法有点困惑。 我知道我错了，但map()方法看起来很像.each()语句？ 除了文档说它返回一个新的jQuery对象。

我一直在jsfiddle上玩这个试图让我的头围绕它，但我不是那里。 这是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(); }); 

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

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

提前致谢。

Answer 1

基本面

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

1. 迭代调用函数的jQuery对象（集合，无论如何）。 在这种情况下，这是$(this) ，这是调用.equalizeHeights()函数的任何东西……这是$('div') ：页面上的所有

   元素（phew）。

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

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

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

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

你还在听我说吗？

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

把它们放在一起

此函数将页面上每个

的高度设置为最高

的高度。 这是如何做：

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

那么，查看equalizeHeights()定义：

 $.fn.equalizeHeights = function() { // construct an array that contains the height of every 
 element var two = $(this).map(function(i, e) { return $(e).height(); }); return this.height( // set the height of element 
 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()可以理解的东西。

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

 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 on，以便本机JS函数Math.max可以理解它。 this.height()然后将选择中每个元素的高度设置为数组中的最大值。

Answer 3

当map返回包含所有回调的reurn值的数组时， 每个似乎都不返回结果数组。

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