理解javascript中forEach和for之间的区别
Understanding difference between forEach and for in javascript
我正在使用twitch.tv API编写一个应用程序,为此我需要为不同的用户进行多次getJSON()调用。对以下输出有任何解释吗。
//users array contains the list of users for which data is fetched
var users = ["freecodecamp", "brunofin", "storbeck", "medrybw", "comster404", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
当使用简单for循环时:
for (var i = 0; i < users.length; i++) {
var user = users[i];
$.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
var add = user;
if(json.status === 422) {
add = add + ' ' + "Closed";
} else {
if (json.stream === null) {
add = add + ' ' + "Offline";
} else {
add = add + ' ' + json.stream.game;
}
}
$("#userList").append("<div>" + add + "</div>");
});
};
输出:
beohoff Closed
beohoff Offline
beohoff Offline
beohoff Offline
beohoff StarCraft: Brood War
beohoff Offline
beohoff Offline
beohoff Offline
beohoff Offline
beohoff Closed
beohoff Offline
使用forEach时:
users.forEach(function(user) {
$.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
var add = user;
if(json.status === 422) {
add = add + ' ' + "Closed";
} else {
if (json.stream === null) {
add = add + ' ' + "Offline";
} else {
add = add + ' ' + json.stream.game;
}
}
$("#userList").append("<div>" + add + "</div>");
});
});
输出:
brunofin Closed
comster404 Closed
storbeck Offline
terakilobyte Offline
freecodecamp Offline
medrybw StarCraft: Brood War
thomasballinger Offline
RobotCaleb Offline
noobs2ninjas Offline
habathcx Offline
beohoff Offline
在forEach的情况下,ajax调用是按顺序进行的,还是有其他调用?
使用for (var i = 0; i < users.length; i++)) { ... }
,您随后将值0 till users.length-1分配给i
,并对其执行某些操作,但您仍处于同一闭包中。
由于js的异步性质,您在收到第一个答案之前发送所有json请求。当您的答案到达时,user
的值为users[users.length-1]
,然后在所有输出中使用该值。
使用users.forEach(function(user) { ... }
,可以为每个用户元素创建一个新的闭包。在每个闭包中,您都有一个本地user
变量,当json请求的响应发生变化时,您将使用该变量。
当您使用for
循环进行迭代并在其范围内运行异步代码时,当Ajax第一次返回时,迭代已经结束。
使用forEach循环,您为每个迭代运行一个回调,创建一个新的socpe,即使迭代结束,每个函数现在都在事件循环中等待调用。
你可以这样做,这样它就会是一样的:
for (var i = 0; i < users.length; i++) {
getUser(user[i]);
};
function getUser(user){
$.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
var add = user;
if(json.status === 422) {
add = add + ' ' + "Closed";
} else {
if (json.stream === null) {
add = add + ' ' + "Offline";
} else {
add = add + ' ' + json.stream.game;
}
}
$("#userList").append("<div>" + add + "</div>");
});
}
理解它的最好方法是使用setTimeout循环并打印i:
for(var i = 0; i < 10; i++){
setTimeout(function(){ console.log(i) }, 100);
};
它将输出:10十次,并运行一个功能:
for(var i = 0; i < 10; i++){
log(i)
};
function log(i){ setTimeout(function(){ console.log(i)}, 100) };
希望它有帮助。
相关文章:
- 全局变量和全局对象的属性之间有什么区别吗
- JavaScript中的函数和对象之间没有区别吗?
- 在下划线中使用_(obj).map(callback)和_.map(obj,callback)之间的区别
- javascript函数的:和=之间的区别
- 什么's本地node.js服务器和python简单http服务器之间的区别
- 函数中this和var之间的区别
- “util.inherits”和在NodeJS中扩展原型之间的区别
- Math.min()和Math.max()之间有什么区别?在Javascript中
- webpack开发模式和生产构建模式之间有什么区别
- servlet和代理servlet之间的区别
- Javascript 类型未定义和 void 之间的区别
- Javascript-defineProperty和直接在对象上定义函数之间的区别
- 关于承诺/A+规范,术语“当时可”和“承诺”之间有什么区别
- 布局引擎和javascript引擎之间的区别
- 什么's extjs中的mon()和on()之间的区别
- type=text/javascript和language=javascript之间的区别
- 函数()和新函数()之间的区别
- JavaScript中let和var之间的区别
- 蓝鸟的done()和spread()之间的区别
- Node.js HTTP/NET——连接和请求之间的区别