JavaScript中已定义数组索引返回undefined问题求助

核心问题：异步操作的执行顺序 #

你遇到的问题本质是FileReader的异步特性导致的：

• fr[f].onloadend是异步回调函数，只有当文件读取完成后才会执行；而你在循环结束后立即执行console.log(c_file_)时，所有文件读取的回调都还没触发，此时c_file_还是空数组。
• 浏览器控制台会动态更新引用类型的显示，当后续回调执行、数组被填充后，你在控制台看到的是更新后的数组状态，但在代码执行流程中，直接访问c_file_[0]的时机早于回调执行，所以返回undefined。

另外，原代码里的string、values等变量未用let/const声明，会成为全局变量，可能引发意外问题，建议补上声明。

解决方案 #

方案1：用Promise+async/await控制异步流程 #

将单个文件的读取操作封装成Promise，再用Promise.all等待所有文件读取完成后再处理数组：

document.getElementById('inputfile').addEventListener('change', async function () {
    const readFile = (file) => {
        return new Promise((resolve, reject) => {
            const fr = new FileReader();
            fr.onloadend = () => {
                if (!fr.result) {
                    console.log('read_fail');
                    resolve(null);
                    return;
                }
                const blocks = fr.result.split("\n");
                const string = [];
                for (let b = 0; b < blocks.length; b++) {
                    string.push(blocks[b].split("], ["));
                    string[b][0] = string[b][0].replaceAll('[[', "");
                    string[b][string[b].length - 1] = string[b][string[b].length - 1].replaceAll(']]', "");
                }
                const values = [];
                for (let i = 0; i < string.length; i++) {
                    values.push([]);
                    for (let n = 0; n < string[i].length; n++) {
                        values[i].push(parseFloat(string[i][n]));
                    }
                }
                resolve(values);
            };
            fr.onerror = reject;
            fr.readAsText(file);
        });
    };

    // 等待所有文件读取完成
    const c_file_ = await Promise.all(Array.from(this.files).map(readFile));
    // 过滤掉读取失败的null值（如果需要）
    const validFiles = c_file_.filter(item => item !== null);
    
    // 现在可以安全访问数组元素了
    console.log(c_file_);
    console.log(c_file_[0]);
});

方案2：用计数器跟踪异步任务完成状态 #

如果不想用Promise，可以通过计数器记录已完成的读取任务，当所有任务完成后再处理数组：

document.getElementById('inputfile').addEventListener('change', function () {
    const c_file_ = [];
    const totalFiles = this.files.length;
    let completedCount = 0;

    for (let x = 0; x < totalFiles; x++) {
        const fr = new FileReader();
        const file = this.files[x];
        
        fr.onloadend = () => {
            completedCount++;
            if (!fr.result) {
                console.log('read_fail');
                c_file_.push(null); // 或其他默认值
            } else {
                const blocks = fr.result.split("\n");
                const string = [];
                for (let b = 0; b < blocks.length; b++) {
                    string.push(blocks[b].split("], ["));
                    string[b][0] = string[b][0].replaceAll('[[', "");
                    string[b][string[b].length - 1] = string[b][string[b].length - 1].replaceAll(']]', "");
                }
                const values = [];
                for (let i = 0; i < string.length; i++) {
                    values.push([]);
                    for (let n = 0; n < string[i].length; n++) {
                        values[i].push(parseFloat(string[i][n]));
                    }
                }
                c_file_.push(values);
            }

            // 所有文件读取完成后，再访问数组元素
            if (completedCount === totalFiles) {
                console.log(c_file_);
                console.log(c_file_[0]);
                // 在这里执行后续需要用到数组的逻辑
            }
        };
        fr.readAsText(file);
    }
});

这两种方案都能确保你在所有文件读取完成后再访问数组元素，避免因异步时机问题导致的undefined。

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