使用Promise处理YouTube数据时，数组元素访问为何返回undefined？

存储视频对象的数组videos，打印整个数组时显示有30个符合预期的视频对象，但单独访问数组元素（如videos[0]）时控制台返回undefined，导致访问元素数据时报错。已确保所有Promise在调用相关函数前完成解析，使用AJAX调用YouTube API v3，本地运行作为自定义首页，相关代码如下：

var allVideoPromises = [];
Object.keys(channels).forEach((channelName) => {
    var channel = channels[channelName];
    channel.uploadsPromise.then(function(data) {
        var videoList = JSON.parse(data);
        var channelPromises = [];
        for (var videoData in videoList.items) {
            var video = new YouTubeVideo(videoList.items[videoData].contentDetails.videoId, channel);
            channel.uploads.push(video);
            videos.push(video);
            channelPromises.push(video.videoPromise);
            allVideoPromises.push(video.videoPromise);
            video.videoPromise.then(function(data) {
                var data = JSON.parse(data);
                if (data.items.length > 0) {
                    var videoData = data.items[0];
                    video.title = videoData.snippet.title;
                    video.thumbnail = videoData.snippet.thumbnails.default;
                    video.buffer = (video.thumbnail.height > 90) ? (90 - video.thumbnail.height) / 2 : 0;
                    video.date = new Date(videoData.snippet.publishedAt);
                    video.loaded = true;
                }
            }).catch(function(err) { console.log(err); })
        }
        Promise.all(channelPromises).then(function(data) {
            channel.uploads.sort(function(a, b) { 
                if (a.date < b.date) return 1; 
                else if (a.date > b.date) return -1; 
                return 0; 
            });
        }).catch(function(err) { console.log(err); });
    }).catch(function(err) { console.log(err); });
});
Promise.all(allVideoPromises).then(function(data) {
    videos.sort((a, b) => a.date < b.date);
    console.log(videos);
    console.log(videos[0]);
    //setVideo(mostRecent, video);
}).catch(function(err) { console.log(err); });

核心原因 #

1. 作用域与变量引用问题：for...in循环中使用var声明video和videoData，var的作用域是函数级而非块级，所有异步回调共享同一个video变量引用。当Promise回调执行时，循环已结束，video指向的是循环最后一次迭代的对象，导致前面的视频对象未被正确赋值。
2. 控制台惰性求值特性：浏览器控制台打印数组时是惰性求值——你看到的数组内容是展开时的实时状态，而非console.log(videos)执行时的状态。执行console.log(videos)时数组元素可能还未完成初始化，但展开控制台时Promise回调已执行完毕，所以看起来数组有内容；而console.log(videos[0])是立即求值，此时元素处于未正确初始化状态，返回undefined。

修复方案 #

1. 替换var为let解决作用域问题 #

将循环中的var改为let，让每个循环迭代拥有独立的作用域，确保异步回调能捕获到当前迭代的video对象：

for (let videoData in videoList.items) {
    let video = new YouTubeVideo(videoList.items[videoData].contentDetails.videoId, channel);
    // 后续代码保持不变
}

2. 修正排序逻辑 #

当前videos.sort((a, b) => a.date < b.date)返回布尔值，sort回调需要返回正数、负数或0，否则排序结果异常。改为和频道内排序一致的逻辑：

videos.sort(function(a, b) { 
    if (a.date < b.date) return 1; 
    else if (a.date > b.date) return -1; 
    return 0; 
});

3. 验证Promise收集完整性 #

可以在allVideoPromises收集完成后打印长度，确认其数量与预期的视频数一致，避免遗漏Promise导致部分对象未初始化。

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