For循環和ForEach循環展現與getJSON不同的行爲

Question

我想從api獲取數據，但是我正在使用的For循環在嵌套的GetJSON調用中返回具有null和未定義值的對象，但是當我嘗試forEach循環時工作正常。 任何想法爲什麼？

var baseUrl = "https://wind-bow.gomix.me/twitch-api/"; 
var channels = ["ESL_SC2", "FreeCodeCamp", "Test_channel", "brunofin"]; 

//**First function with forEach. WORKS FINE** 
function getDataForEach() { 

    channels.forEach(function(channel) { 

     $.getJSON(txtUrl('streams', channel), function(json) { 
      console.log(json); 

      $.getJSON(txtUrl('channels', channel), function(json2) { 
       console.log(json2); 

      }); 
     }); 

    }); 
} 

//**Second function with a normal for loop. The 2nd JSON doesnt return the proper data** 

function getDataForLoop() { 
     for (i=0;i<channels.length;i++){ 
      $.getJSON(txtUrl('streams', channels[i]), function(json) { 
       console.log(json); 

       //THIS 2nd call doesnt returns undefined objects. 
       $.getJSON(txtUrl('channels', channels[i]), function(json2) { 
        console.log(json2); 

       }); 
      }); 

     }); 
    } 

function txtUrl(prop, chnl) { 
    return baseUrl + prop + '/' + chnl + '?callback=?'; 
} 

$(document).ready(function() { 
      getData(); 
}); 

Answer 1

getJSON是異步的，所以它的回調函數不會馬上執行，從而在for環的情況下，如果你使用i回調中會產生this error。

我注意到的另一件事是您使用全球i這也是source of troubles。

如果you'are使用ECMAScript 6可以使用let聲明i：

for(let i = 0; ...) 

let是塊作用域所以使用它不會產生上文所述第一鏈路的誤差。

Answer 2

我認爲這與事實有關，forEach是一個回調函數，而不是。因此在接收數據之前執行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach