FreeCodeCamp TwitchTV项目：for循环内回调的console.log输出疑问

Hey Juanli, let's break down what's probably going on with that console.log inside your callback in the getChannelData() function! 这类异步场景里最容易踩的坑就是循环变量的作用域和异步回调的执行时机不匹配，我先给你拆解最常见的情况和解决办法：

大概率遇到的问题：循环变量未被正确捕获 #

假设你的代码结构类似这样：

function getChannelData() {
  const channels = ["freecodecamp", "esl_sc2", "cretetion"];
  for (var i = 0; i < channels.length; i++) {
    const channelName = channels[i];
    // 调用Twitch API的异步请求
    fetch(`https://api.twitch.tv/kraken/channels/${channelName}`)
      .then(res => res.json())
      .then(data => {
        console.log(`当前频道索引：${i}，频道名：${data.name}`);
      });
  }
}

你会发现所有console.log输出的i都是循环结束后的数值（比如3），完全不是当前循环的索引。原因是var声明的变量是函数作用域，异步回调执行的时候，循环已经跑完了，所有回调共享同一个i的引用。

三种有效解决办法 #

1. 用let声明循环变量（ES6+首选） #

let是块级作用域，每次循环都会创建一个独立的i变量，回调会捕获当前循环对应的那个i：

for (let i = 0; i < channels.length; i++) {
  // ... 异步请求代码
  .then(data => {
    console.log(`当前频道索引：${i}，频道名：${data.name}`);
  });
}

2. 用立即执行函数（IIFE）封装变量（兼容旧环境） #

如果需要支持ES6之前的环境，可以用IIFE把当前循环的变量封装成独立作用域：

for (var i = 0; i < channels.length; i++) {
  (function(currentIndex) {
    const channelName = channels[currentIndex];
    fetch(`https://api.twitch.tv/kraken/channels/${channelName}`)
      .then(res => res.json())
      .then(data => {
        console.log(`当前频道索引：${currentIndex}，频道名：${data.name}`);
      });
  })(i);
}

3. 替换成forEach循环 #

forEach的回调本身会为每个元素创建独立作用域，天然避开这个问题：

channels.forEach((channelName, index) => {
  fetch(`https://api.twitch.tv/kraken/channels/${channelName}`)
    .then(res => res.json())
    .then(data => {
      console.log(`当前频道索引：${index}，频道名：${data.name}`);
    });
});

如果你的问题不是这个情况，可以把getChannelData()的具体代码片段贴出来，特别是循环和回调部分的细节，我再帮你精准定位！

内容的提问来源于stack exchange，提问作者juanli