早期破环的JavaScript

Question

Why would a for loop terminate early in JavaScript? For some reason my outer for loop terminates after the first repetition. I am new to JavaScript but would expect something like this to work in Java.

function check(){
    var elements = document.getElementById('fields').children;
    var filteredMolecules = molecules;
    console.log(elements.length);
    for (i = 0; i < elements.length; i++) { 
        console.log(elements[i].id)
        filterMolecules(filteredMolecules, elements[i].id, 0, 10);
    }
}

function filterMolecules(molecules, parameter, lower, upper){
    console.log('filtering');
    var filteredMolecules = [];
    for (i=0;i<molecules.length;i++){
        var value = molecules[i].val()[parameter];
        filteredMolecules.push(molecules[i]);
    }
    molecules=filteredMolecules;
}

In check(), I loop through elements which contains 22 items as shown by the first console.log(elements.length). If I remove the method filterMolecules(...) then all 22 IDs are logged. However, with the code as is, only the first id is logged.

I believe the filterMolecules method which should run elements.length number of times is causing the outer for loop to not work. Could someone please explain why this is happening. If relevant, in filterMolecules(...) the data is retrieved from Google Firebase with molecules[i].val()[parameter]. Additionally, both methods use the global variable molecules (line 3 and line 14)

Answer 1

When you don't declare variables in javascript you end up using globals (which can be a difficult to spot source of bugs). So here you are using the same global variable i for both loops. When you start looping thought molecules you are accidentally incrementing the counter loop of your first for . Use different variables or define them with :

 for (let i=0;i<molecules.length;i++)

Which will give each loop its own version of i .

In this case, since the declarations are inside individual functions, you could use var too:

for (var i=0;i<molecules.length;i++) {
 // etc.
}