Breaking out of jQuery loop vs native JS for loop. Which is better?

First of all, apologies if the heading question doesn't exactly match with what I am going to ask.

My problem is that I want to have a loop, and the contr开发者_如何学Gool is suppose to break out of this loop, once a condition is met.

Now, is it better to use the native JS 'for loop' and use 'return' or is it better to use the jQuery.each() and use return false, to break out of the loop?

If you can get away with using the plain old JavaScript method of looping over the collection, use it and break out normally.

Unless there is a very good reason to use jQuery.each(), I try to keep it out of my code as much as possible. It's really a very simple shortcut and by using plain old JavaScript, I can retain more control over what my code is actually doing.

I assume you mean break? Performance aside, use whatever you find clearer.

Some would argue that the terseness of for...break (or even a for with proper stopping conditions) would win over a library function that creates an anonymous function and passes control back and forth between your code and theirs and back to yours, but they both work.

If you do care about the performance aspect (and you probably shouldn't, readability is way more important for this), then for also wins -- it's not "free" to call a function for every single element and process return values for stopping conditions.

I prefer to use a plain JS loop when practical.

You have more control over the plain JS for loop because there you can return from the entire function. In a jQuery .each() loop, you can only stop the .each() iteration with a return. If you want to then return from the host function, you need to write additional code to do that. I prefer the plain JS for loop when possible.

The plain JS for loop is also a ton easier to step into, through and out of in the JS debugger. To step into the .each() loop, you have to either step through a lot of jQuery code or you have to put a breakpoint inside the .each() loop and run to that breakpoint.

For example, to return from the host function when some condition inside the loop is met, it would work like this in the two loops:

Plain JS

function findMatch(array, target) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i] === target) {
            return(i);
        }
    }
    return(-1);
}

Using jQuery.each()

function findMatch(array, target) {
    var found = -1;
    jQuery.each(array, function (index, value) {
        if (value === target) {
            found = index;
            return(false);
        }
    });
    return(found);
}

Stepping through this function in the debugger to see why it is or isn't working is a ton easier in the plain JS version.

I usually prefer $.each as it looks cleaner with arrays (no i < a.length and such needed), and is closer to the foreach syntax which more comfortable languages have. Also, it has its own scope, which helps avoiding some common mistakes with closures:

for(var i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        // this will display the index of the clicked 
        // element. Or maybe not?
        alert(i); 
    }
}

Skipping levels of control (breaking multiple loops or returning from the whole function while in the middle of a loop) is not possible with $.each though, so if you need that, use for. Also, interactive debugging is more painful with function-based loops.