使用$(数组)。每个遍历数组

I recently came upon a jQuery construction I hadn't seen before. Here's a simplified version:

我最近遇到了一个以前从未见过的jQuery结构。这是一个简化的版本:

$([ '1', '2', '3' ]).each( function( index, value ) {
  console.log( "index", index, "value", value );
});

This iterates over all the elements of the array [ '1', '2', '3' ]. The thing is, I'm used to seeing $(...) used with a CSS selector, but I haven't seen it used on a newly declared array, as is being done here. It seems to work, though (tested with Firefox 34 and Chromium 39).

它遍历数组的所有元素['1'，'2'，'3']。问题是，我已经习惯了$(…)与CSS选择器一起使用，但是我还没有看到它在新声明的数组中使用，正如这里所做的那样。不过，它似乎还能工作(用Firefox 34和Chromium 39进行测试)。

Q1: Am I correct in understanding that this is equivalent to

我的理解是正确的吗

var a = [ '1', '2', '3' ];
for ( var i = 0, value; value = a[i]; i++ ) {
  console.log( "index", i, "value", value );
}

If not, what are the differences? (apart from the fact that this declares variables a, i and value).

如果没有，有什么区别?(除了它声明了变量a, i和value之外)。

Q2: As far as iterating over arrays in jQuery is concerned, I'm more used to $.each (not to be confused with $(selector).each as used above). Would the above be equivalent to

Q2:就jQuery中的数组迭代而言，我更习惯使用$。每个(不要与$(选择器)混淆)。每个上面使用的)。上述情况是否等价于

$.each( [ '1', '2', '3' ], function( index, value ){
  console.log( "index", index, "value", value );
});

if yes, why are there two such extremely similar constructions in jQuery? Between the two, what is the preferred way to iterate over arrays, or is this just a matter of personal style?

如果是，为什么jQuery中有两个如此相似的结构呢?在这两者之间，迭代数组的首选方式是什么，还是这只是个人风格的问题?

2 个解决方案

#1

Q1. Yes.

Q1。是的。

Q2. jQuery accepts arrays (and array-like objects) and turns them into jQuery objects.

Q2。jQuery接受数组(和类数组对象)并将它们转换为jQuery对象。

You can see that easily by issuing, on the browser console:

通过在浏览器控制台发布，您可以很容易地看到:

console.dir($([ '1', '2', '3' ]))
> VM199:2 e.fn.e.init[3]

That's a jQuery object that call returns. They can be iterated over with .each(). This facility is meant to enable you to do this (contrived example):

这是一个调用return的jQuery对象。可以用.each()迭代它们。这个工具的目的是让你做这个(设计的例子):

$(document.getElementsByTagName("A")).each(func);

Doing so with a plain array of strings works, and will likely continue to work in the future, however I still see that as a mis-use of the API and would recommend the proper approach:

使用简单的字符串数组这样做是可行的，将来可能还会继续这样做，但是我仍然认为这是对API的误用，并将建议采取适当的方法:

$.each(['1', '2', '3' ], func);

#2

Q1: As other said, yes.

正如其他人所说，是的。

Q2: Ill start by saying not because you can that you should.

我首先要说的不是因为你能，你应该。

It is right that you can use $([ '1', '2', '3' ]).each() and it will work, but it isn't efficient.

您可以使用$(['1'，'2'，'3']).each()，它将会工作，但它不是有效的。

Both are not the same (they are similar though). As said in the jQuery doc:

两者都不一样(虽然相似)。正如jQuery文档中所说:

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array.

$.each()函数不同于$(选择器).each()函数，它专门用于在jQuery对象上迭代。可以使用$.each()函数对任何集合进行迭代，无论是对象还是数组。

Which mean that if you use $([ '1', '2', '3' ]).each() you are creating a jQuery object which is not needed. It is way faster, performance wise, the property each of the jQuery object then calling the function passing an array than calling a function creating a jQuery object of an array and then access to its prototype .each().

这意味着如果您使用$(['1'，'2'，'3']).each()，您将创建一个jQuery对象，而这是不需要的。它比调用函数创建一个数组的jQuery对象，然后访问它的原型(每个())更快，性能更聪明，每个jQuery对象的属性都调用了传递一个数组的函数。

#1