map()get()困惑 [英] map() get() confusion

问题描述

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

I'm just going through the jQuery API and I'm a bit confused on map() & get() method. I know I'm wrong but the map() method looks a lot like an .each() statement? Except the documentation says it returns a new jQuery object.

我一直在jsfiddle上玩这个游戏，试图把它弄清楚，但是我还没到那儿. 此处是jsfiddle链接:

I've been playing with this on jsfiddle trying to get my head around it, but I'm not quite there. here is the jsfiddle link:

这也是代码段:

$.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?

I see they are extending jQuery using prototype to create a function called equalizeHeights(). And $(this) represents the selector for all the 'div' elements on the page. The map() call iterates through each of the items in the array of divs and returns its height? But what I'm confused about is what I'm logging to the console. One is an object and the other is an array?

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

Could someone elaborate on what map() and get() are doing in this snippet of code?

谢谢.

推荐答案

基础知识

有两种不同的jQuery map()函数: .map() 和

Fundamentals

There are two different jQuery map() functions: .map(), and $.map(). They perform similar things, but over different collections. You're using the first form, which does the following:

1. 遍历在其上调用函数的jQuery对象(集合，无论如何).在这种情况下，这就是$(this)，这是在...上调用的.equalizeHeights()函数，即... $('div'):页面上的所有<div>元素(phew).

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

1. Iterate over the jQuery object (collection, whatever) on which the function was invoked. In this case, that's $(this), which is whatever the .equalizeHeights() function was invoked on ...which is $('div'): all <div> elements on the page (phew).

2. Create an array with the same number of elements as the object that .map() was invoked on (all divs on the page, remember) whose n^th element is generated by invoking the provided callback - I'll get there in a sec - on the n^th element in the targeted jQuery object. In this particular case, that callback is this function:

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

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

是的，.map()确实类似于.each()，但是有一个关键的区别:

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

Yes, .map() does look like .each(), but there is a key difference:

• .each() performs an action on each of the elements in the collection; the return value of the callback passed to .each() is used to determine whether or not the iteration continues.
• .map() also performs an action on each of the elements in the collection, but the callback's return value is used to generate an element in the array-like object returned by .map().

你还在和我在一起吗?

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

jQuery obects are array-like, but they are not arrays! The reason that you call .get() at the end of the .map() call is to turn that jQuery object into a true array. The elements of that array are the values returned by the callback.

此功能将页面上每个<div>的高度设置为最高的<div>的高度.方法如下:

This function sets the height of every single <div> on the page to the height of the tallest <div>. Here's how:

$('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()定义的内部:

So, looking inside of the equalizeHeights() definition:

$.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()可以理解的东西的原因.

But what about the constructor business?

As you discovered, yes, one is an object (a jQuery object) and the other is an array. That's why you need that .get() call to turn the array-like object into something that Math.max() can understand.

代替查看constructor属性，您可以使用更多的jQuery来弄清楚您正在查看的内容:

Instead of looking at the constructor property, you can use a little more jQuery to figure out just what you're looking at:

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()处理.这样，您可以看到整个对象图，其所有属性等.

Even better is to look at the actual objects inside of a debugger, rather than just console.log()-ing them. That way, you can see the entire object graph, all its properties, etc.

这篇关于map()get()困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！