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?
Best Answer
(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.)Four options:
Generic loop:
or in ES2015+:
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 (e.g., in theory faster, though in fact you'd have to have so many elements that the odds are you'd have other problems; details).ES5's
forEach
:As of ECMAScript5, arrays have a
forEach
function on them which makes it easy to loop through the array:Link to docs
(Note: There are lots of other functions, not just
forEach
; see the answer referenced above for details.)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.Disadvantages: If you're using
this
in the containing code and you want to usethis
within yourforEach
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 toforEach
soforEach
sets it asthis
during the callback, or C) Use an ES2015+ arrow function, which closes overthis
. If you don't do one of those things, in the callbackthis
will beundefined
(in strict mode) or the global object (window
) in loose mode. There used to be a second disadvantage thatforEach
wasn't universally supported, but here in 2018, the only browser you're going to run into that doesn't haveforEach
is IE8 (and it can't be properly polyfilled there, either).ES2015+'s
for-of
: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.
jQuery.each:
(Link to docs)
Advantages: All of the same advantages as
forEach
, plus you know it's there since you're using 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, sincethis
means something else within the function.You can avoid the
this
thing though, by either using$.proxy
:...or
Function#bind
:...or in ES2015 ("ES6"), an arrow function:
What NOT to do:
Don't use
for..in
for this (or if you do, do it with proper safeguards). You'll see people saying to (in fact, briefly there was an answer here saying that), butfor..in
does not do what many people think it does (it does something even more useful!). Specifically,for..in
loops through the enumerable property names of an object (not the indexes of an array). 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/3I should soften the "don't" above. If you're dealing with sparse arrays (e.g., 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 likehasOwnProperty
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.