如何将URL文本数据添加到现有JavaScript数组？为何元素返回undefined？

问题根源 #

核心是异步操作的执行顺序：fetch是异步任务，它会在后台处理请求、等待响应，而主线程会直接执行后面的DOM更新代码。这时候newArray还没被添加任何新元素，只有初始的["value a"]，所以newArray[1]不存在，返回undefined。

修正方案1：把DOM更新放到异步回调内 #

将更新页面的代码移到fetch的then回调里，确保数据加载完成后再操作数组和DOM：

const newArray = ["value a"];
const fileUrl = "你的values.txt实际URL";

fetch(fileUrl)
    .then(r => r.text())
    .then((text) => {
        // 分割文本并过滤空行（避免最后一行换行产生空元素）
        const array2 = text.split("\n").filter(item => item.trim() !== "");
        array2.forEach(item => newArray.push(item));
        
        // 此时数据已加载完成，可正常访问newArray[1]
        document.getElementById("add").innerHTML += "<br>Array test: " + newArray[1];
    })

修正方案2：用async/await简化异步逻辑 #

这种写法更直观，同步风格的代码处理异步操作：

const newArray = ["value a"];
const fileUrl = "你的values.txt实际URL";

async function loadData() {
    const response = await fetch(fileUrl);
    const text = await response.text();
    const array2 = text.split("\n").filter(item => item.trim() !== "");
    newArray.push(...array2); // 用扩展运算符一次性添加所有元素
    
    // 数据准备好后更新DOM
    document.getElementById("add").innerHTML += "<br>Array test: " + newArray[1];
}

// 调用异步函数
loadData();

额外提示 #

文本文件最后一行的换行符会导致split("\n")生成空字符串，所以用filter(item => item.trim() !== "")过滤掉无效的空元素，避免数组里出现无意义的空值。

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