Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
418 views
in Technique[技术] by (71.8m points)

javascript - 如何在jQuery中循环遍历数组?(How to loop through array in jQuery?)

I am trying to loop through an array.

(我试图循环一个数组。)

I have the following code:

(我有以下代码:)

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

Am trying to get all the data out of the array.

(我试图从阵列中获取所有数据。)

Can some one lead me in the right path please?

(有人可以带我走正确的道路吗?)

  ask by Rickstar translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

(Update: My other answer here lays out the non-jQuery options much more thoroughly. The third option below, jQuery.each , isn't in it though.)

((更新:我在这里的另一个答案更彻底地列出了非jQuery选项。下面的第三个选项jQuery.each虽然不在其中。))


Four options:

(四种选择:)

Generic loop:(通用循环:)

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

or in ES2015+:

(或者在ES2015 +中:)

for (let i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

Advantages : Straight-forward, no dependency on jQuery, easy to understand, no issues with preserving the meaning of this within the body of the loop, no unnecessary overhead of function calls (eg, in theory faster, though in fact you'd have to have so many elements that the odds are you'd have other problems; details ).

(优点 :直接的,jQuery的不存在依赖关系,简单易懂,没有与保护的含义问题, this循环中,函数调用没有不必要的开销(例如体内, 理论上速度更快,但实际上你必须有这么多元素,你可能有其他问题; 细节 )。)

ES5's forEach :(ES5的forEach :)

As of ECMAScript5, arrays have a forEach function on them which makes it easy to loop through the array:

(从ECMAScript5开始,数组上有一个forEach函数,可以很容易地遍历数组:)

substr.forEach(function(item) {
    // do something with `item`
});

Link to docs

(链接到文档)

(Note: There are lots of other functions, not just forEach ; see the answer referenced above for details.)

((注意:还有很多其他功能,不仅仅是forEach ;有关详细信息,请参阅上面提到的答案 。))

Advantages : Declarative, can use a prebuilt function for the iterator if you have one handy, if your loop body is complex the scoping of a function call is sometimes useful, no need for an i variable in your containing scope.

(优点 :声明性,如果你有一个方便的话,可以使用迭代器的预构建函数,如果你的循环体很复杂,函数调用的范围有时是有用的,在你的包含范围中不需要i变量。)

Disadvantages : If you're using this in the containing code and you want to use this within your forEach callback, you have to either A) Stick it in a variable so you can use it within the function, B) Pass it as a second argument to forEach so forEach sets it as this during the callback, or C) Use an ES2015+ arrow function , which closes over this .

(缺点 :如果您在使用this中包含代码,你想用this你中forEach回调,你必须要么A)坚持在一个变量,所以你可以在函数中使用它,B),将它作为第二forEach参数,因此forEach在回调期间将其设置this ,或者C)使用ES2015 + 箭头函数 ,该函数将关闭this 函数 。)

If you don't do one of those things, in the callback this will be undefined (in strict mode) or the global object ( window ) in loose mode.

(如果你不做其中的一件事,在回调中this将是松散模式下的undefined (在严格模式下)或全局对象( window )。)

There used to be a second disadvantage that forEach wasn't universally supported, but here in 2018, the only browser you're going to run into that doesn't have forEach is IE8 (and it can't be properly polyfilled there, either).

(曾经有一个第二个缺点,即forEach不是普遍支持的,但是在2018年,你将遇到的唯一没有forEach浏览器是IE8(并且它无法在那里正确填充,或者)。)

ES2015+'s for-of :(ES2015 +的for-of :)

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

See the answer linked at the top of this answer for details on how that works.

(请参阅本答案顶部链接的答案,详细了解其工作原理。)

Advantages : Simple, straightforward, offers a contained-scope variable (or constant, in the above) for the entry from the array.

(优点 :简单,直接,为数组中的条目提供包含范围的变量(或上面的常量)。)

Disadvantages : Not supported in any version of IE.

(缺点 :任何版本的IE都不支持。)

jQuery.each:(jQuery.each:)

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

( Link to docs )

(( 链接到文档 ))

Advantages : All of the same advantages as forEach , plus you know it's there since you're using jQuery.

(优点 :所有与forEach相同的优点,加上你知道它就在那里,因为你使用的是jQuery。)

Disadvantages : If you're using this in the containing code, you have to stick it in a variable so you can use it within the function, since this means something else within the function.

(缺点 :如果您在包含代码中使用this ,则必须将其粘贴在变量中,以便在函数中使用它,因为this意味着函数中的其他内容。)

You can avoid the this thing though, by either using $.proxy :

(你可以通过使用$.proxy来避免this问题:)

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

...or Function#bind :

(...或者Function#bind :)

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

...or in ES2015 ("ES6"), an arrow function:

(......或在ES2015(“ES6”)中,箭头功能:)

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

What NOT to do:(什么不该做:)

Don't use for..in for this (or if you do, do it with proper safeguards).

(不要使用for for..in (如果你这样做,请使用适当的安全措施)。)

You'll see people saying to (in fact, briefly there was an answer here saying that), but for..in does not do what many people think it does (it does something even more useful!).

(你会看到人们说来(其实,简单有在这里回答说),但for..in没有做什么很多人认为它(它更加有用的东西!)。)

Specifically, for..in loops through the enumerable property names of an object (not the indexes of an array).

(具体来说, for..in循环通过对象的可枚举属性名称(而不是数组的索引)。)

Since arrays are objects, and their only enumerable properties by default are the indexes, it mostly seems to sort of work in a bland deployment.

(由于数组是对象,并且默认情况下它们唯一的可枚举属性是索引,因此它似乎主要是在一个平淡的部署中工作。)

But it's not a safe assumption that you can just use it for that.

(但是,你可以直接使用它并不是一个安全的假设。)

Here's an exploration: http://jsbin.com/exohi/3

(这是一个探索: http//jsbin.com/exohi/3)

I should soften the "don't" above.

(我应该软化上面的“不要”。)

If you're dealing with sparse arrays (eg, the array has 15 elements in total but their indexes are strewn across the range 0 to 150,000 for some reason, and so the length is 150,001), and if you use appropriate safeguards like hasOwnProperty and checking the property name is really numeric (see link above), for..in can be a perfectly reasonable way to avoid lots of unnecessary loops, since only the populated indexes will be enumerated.

(如果你正在处理稀疏数组(例如,数组总共有15个元素但它们的索引由于某种原因在0到150,000范围内散布,因此length为150,001), 并且如果使用适当的保护措施,如hasOwnProperty和检查属性名称实际上是数字(参见上面的链接), for..in可以是避免大量不必要的循环的完全合理的方法,因为只会枚举填充的索引。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...