使用 FileReader.readAsText() 将 .txt 文件拆分为 JavaScript 数组答案

【问题标题】：Splitting a .txt file into a JavaScript Array using FileReader.readAsText()使用 FileReader.readAsText() 将 .txt 文件拆分为 JavaScript 数组
【发布时间】：2021-04-05 16:48:55
【问题描述】：

我使用 FileReader.readAsText() 来导入文件并将其导入我的数组，但它会创建一个新数组，该数组最终会推入我现有数组的第一个位置。当我尝试索引该数组时，它显然是“未定义的”，即使我可以清楚地看到我的 console.log 命令中的值。我的测试 .txt 文件读取

aaa
bbb
cc
ddd
eee
ddd
eee
哎呀

我想读取文件并通过拆分每一行将其存储到一个数组中 '''

        var guestList = []
        document.getElementById('inputfile') 
        .addEventListener('change', function loadFile() { 
          
        var fr=new FileReader(); 
        fr.onload=function(){ 
          guestList.push(fr.result.split('\n')); 
          
        } 
        console.log(guestList)
          
        fr.readAsText(this.files[0]);
    }) 
    console.log(guestList)

''' 这是我的控制台的样子： [] 0: (9) ["aaa", "bbb", "ccc", "ddd", "eee", "ddd", "eee", "eee", ""] length: 1 proto: Array(0)

【问题讨论】：

标签： javascript arrays filereader

【解决方案1】：

您只是将单个项目推送到guestList - 拆分文件的结果。相反，只需使用 .split 的结果，而不是将其包围在另一个数组中 - 并确保将结果记录在回调内部，而不是外部。

此外，为了多系统兼容性，某些环境使用换行符和换行符。考虑改用正则表达式，以可选地匹配换行符后跟换行符：

document.getElementById('inputfile').addEventListener('change', () => {
  const fr = new FileReader();
  fr.onload = () => {
    const guestList = fr.result.split(/\r?\n/);
    console.log(guestList);
  };
  fr.readAsText(this.files[0]);
});

【讨论】：