First Expression in a Javascript For Loop - what's with the comma? - Stack Overflow

admin管理员组

文章数量:1332345

I'm working through an HTML5 drag and drop example /, but can't figure out exactly what is happening in the loop at the end of this function-

function FileSelectHandler(e) {

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

As far as I know, the first expression should just be i=0. What is happening with the , f? As long as the files array contains key i, i gets incremented, f is parsed and it then looks for files[i] again, right?

I'm working through an HTML5 drag and drop example http://www.sitepoint./html5-file-drag-and-drop/, but can't figure out exactly what is happening in the loop at the end of this function-

function FileSelectHandler(e) {

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

As far as I know, the first expression should just be i=0. What is happening with the , f? As long as the files array contains key i, i gets incremented, f is parsed and it then looks for files[i] again, right?

• javascript
• loops

Share Improve this question Follow asked Nov 23, 2011 at 22:20 MarkMark 46711 gold badge66 silver badges2222 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

In a for loop, you can have multiple initializers separated by mas. That's what you have there, bined with a lazy (and misleading) var. In this particular case, it's equivalent to:

function FileSelectHandler(e) {
    var i, f, files;

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (i = 0; f = files[i]; i++) {
        ParseFile(f);
    }
}

...because var is badly misunderstood in JavaScript. But probably a better example of using multiple initializers would be:

var a = [1, 2, 3], index, len;

for (index = 0, len = a.length; index < len; ++index) {
    // Do something with a[index]
}

There, with the misleading var removed, we can see that there are two distinct initializers at the beginning of the for statement.

, f simply declares another var f. The condition runs until the index i is not found in the assignment f = files[i] (the assignment returns false breaking the loop). That loop is the equivalent of:

for(var i=0; i < files.length; i++){
    var f = files[i];
    // rest of code
}

It's just declaring a local variable named f.

A (slightly) more jslint-friendly version might be:

function FileSelectHandler(e) {
    var files, i, f;

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (i = 0; f = files[i]; i++) {
        ParseFile(f);
    }
}

Variables in JavaScript have function-scope, and hence declaring them at the top of the function makes that clearer.

(Incidentally, naming ordinary functions with a capital letter is confusing - that's normally used for constructors).

That's just another variable initialization that runs before your for loop starts.

Since all declarations in JavaScript are hoisted, i and f are declared at the top of the function; both are initially set to undefined. The loop then initializes i to zero, and f remains undefined.

At each pass of the loop, f is set to files[i]. If this new value of f is "falsy"—null, undefined, false, empty string, NaN—the loop terminates. Otherwise the loop executes again.

The , f is just a declaration of a var. Within the first set of semicolons (var i = 0, f;) is where declarations occur.

var i=0, f declares the variables i and f (and initializes the first to 0).

If you do not declare f, it bees a global variable which could generate conflicts.

本文标签： First Expression in a Javascript For Loopwhat39s with the commaStack Overflow