如何用JavaScript Fetch API读取文本文件并转为数组？

嘿，我来帮你搞定这个问题！咱们先拆解下你现在遇到的问题，再给你正确的实现代码：

首先，你的现有代码有几个关键问题：

• 语法错误：第二个.then()的写法不符合JavaScript语法，没法正确处理返回的文本数据
• 分割逻辑不对：你的sample.txt里是用空格分隔水果，不是每行一个，所以用换行符/\r?\n/分割自然得不到想要的结果
• 另外你提到之前误用了JSON处理逻辑——如果之前你试过用resp.json()来读这个文本文件，那肯定会报错，因为sample.txt是纯文本不是JSON格式，你现在用resp.text()是完全正确的，这一步没毛病~

正确的实现代码 #

let fruitArray;

fetch('sample.txt')
  .then((resp) => resp.text()) // 正确读取纯文本内容
  .then(data => {
    // 处理文本：先去首尾空格，再按任意空白字符分割，最后过滤空元素
    fruitArray = data.trim().split(/\s+/).filter(item => item);
    console.log(fruitArray); // 输出：['apple', 'banana', 'orange', 'grape']
  })
  .catch(err => console.error('读取文件出错啦:', err)); // 别忘了加错误处理，避免报错没提示

代码细节解释 #

1. trim()：先去掉文本开头和结尾的多余空格，防止分割后出现空字符串元素
2. split(/\s+/)：用正则匹配一个或多个空白字符（包括空格、制表符等）来分割文本，这样就算文件里有多个连续空格也能正确分割
3. filter(item => item)：保险起见，过滤掉分割后可能出现的空字符串（比如文本里有连续多空格的情况）

如果以后你的sample.txt改成每行一个水果的格式，那时候只需要把分割正则换成/\r?\n/，再加个过滤空行的逻辑就可以啦。

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