JavaScript读取文件转可遍历数组 去除行尾\r符方案

行尾残留\r是因为Windows系统下文本文件默认使用\r\n（CRLF）作为换行符，现有代码仅按\n分割字符串，自然会将\r留在拆分后的每一段末尾。
除此之外代码还有两处逻辑错误，会直接导致解析结果不可用：

• 默认分隔符设为逗号，但你给出的示例文件是用连续空白（多空格/制表符）分隔列
• reduce生成行对象时，错误地将属性赋值到了headers数组上，而非目标对象本身

按以下步骤调整代码即可得到可正常遍历的JavaScript数组：

1. 解析前先做字符串清洗：全局删除所有\r字符，同时去除字符串首尾的多余空白，避免首尾空行干扰解析
2. 调整分隔符匹配规则：用匹配1个及以上连续空白的正则作为默认分隔符，适配你当前的文件格式
3. 修正对象赋值逻辑：把列属性正确写入reduce生成的对象中，同时对每个字段做去空白处理
4. 过滤拆分后产生的空行，避免空值导致的属性取值错误

const input = document.querySelector('input')
const fileReader = new FileReader()

fileReader.onload = (e) => {
  const rawContent = e.target.result
  const data = csvToArray(rawContent)
  console.log('解析结果：', data)
  // 后续可直接遍历data执行加减乘运算
}

const csvToArray = (str, delimiter = /\s+/) => {
  // 清洗字符串：删除所有\r，去除首尾空白
  const cleanStr = str.replace(/\r/g, '').trim()
  // 拆分表头
  const firstLineBreak = cleanStr.indexOf("\n")
  const headers = cleanStr.slice(0, firstLineBreak).split(delimiter)
  // 拆分数据行，过滤空行
  const rows = cleanStr.slice(firstLineBreak + 1).split("\n").filter(row => row.trim())

  return rows.map((row) => {
    const values = row.split(delimiter)
    // 修正赋值逻辑，属性写入返回对象
    return headers.reduce((obj, header, index) => {
      obj[header.trim()] = values[index]?.trim()
      // 如果需要直接做数值运算，可以提前把values字段转成数字类型：
      // if (header === 'values') obj[header] = Number(obj[header])
      return obj
    }, {})
  })
}

input.onchange = (e) => {
  const [file] = e.target.files
  if (!file) return
  // 读取文本文件优先用readAsText，比readAsBinaryString更适配文本解析场景，可避免编码问题
  fileReader.readAsText(file)
}

针对你提供的示例文件，最终会输出如下结构的数组，可直接遍历访问：

[
  {actions: 'f', values: '4'},
  {actions: 'u', values: '2'},
  {actions: 'f', values: '8'},
  {actions: 'd', values: '1'},
  {actions: 'f', values: '2'},
  {actions: 'u', values: '3'},
  {actions: 'f', values: '3'}
]

如果后续需要处理标准逗号分隔CSV，只需要调用csvToArray时手动传入分隔符,即可。

内容的提问来源于stack exchange，提问作者Ida Näslund