如何将.csv文件转换为以列标题为键的JavaScript字典数组？

要实现把CSV文件转成以列标题为键、行内容为值的字典数组，核心是拆分CSV的表头和数据行，再将每行数据与表头一一映射。以下分场景给出具体实现：

基础实现（简单CSV，无特殊字符） #

如果你的CSV字段不含逗号、引号等特殊字符，可以用最直接的字符串拆分方法：

Node.js 环境 #

通过fs模块读取文件后处理：

const fs = require('fs');

function csvToDictArray(csvText) {
  // 分割行并过滤空行
  const lines = csvText.split('\n').filter(line => line.trim());
  // 提取表头并去除空格
  const headers = lines[0].split(',').map(header => header.trim());
  
  // 遍历数据行生成字典
  return lines.slice(1).map(line => {
    const values = line.split(',').map(val => val.trim());
    return headers.reduce((obj, header, index) => {
      obj[header] = values[index];
      return obj;
    }, {});
  });
}

// 读取本地CSV文件
fs.readFile('your-file.csv', 'utf8', (err, data) => {
  if (err) throw err;
  const result = csvToDictArray(data);
  console.log(result);
});

浏览器环境 #

通过文件上传控件读取CSV并处理：

<input type="file" id="csvUpload" accept=".csv">
<script>
function csvToDictArray(csvText) {
  const lines = csvText.split('\n').filter(line => line.trim());
  const headers = lines[0].split(',').map(header => header.trim());
  
  return lines.slice(1).map(line => {
    const values = line.split(',').map(val => val.trim());
    return headers.reduce((obj, header, index) => {
      obj[header] = values[index];
      return obj;
    }, {});
  });
}

document.getElementById('csvUpload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (event) => {
    const csvData = csvToDictArray(event.target.result);
    console.log(csvData);
    // 此处可添加后续业务逻辑
  };
  reader.readAsText(file);
});
</script>

进阶实现（支持含特殊字符的CSV） #

如果CSV字段包含逗号、被引号包裹（比如"lorem, ipsum"），直接用split(',')会拆分错误，这时可以用正则匹配CSV的标准格式：

// 解析单行CSV，支持带引号的字段（包括字段内的双引号转义）
function parseCSVLine(line) {
  const regex = /(?:^|,)(?:"([^"]*(?:""[^"]*)*)"|([^,"]*))/g;
  const values = [];
  let match;
  
  while ((match = regex.exec(line)) !== null) {
    let value = match[1] || match[2];
    // 把字段内的双引号转义（"" 转为 "）
    if (value) value = value.replace(/""/g, '"');
    values.push(value?.trim() || '');
  }
  
  // 移除正则匹配产生的开头空元素
  if (values[0] === '') values.shift();
  return values;
}

// 改进后的转换函数
function csvToDictArray(csvText) {
  const lines = csvText.split('\n').filter(line => line.trim());
  const headers = parseCSVLine(lines[0]);
  
  return lines.slice(1).map(line => {
    const values = parseCSVLine(line);
    return headers.reduce((obj, header, index) => {
      obj[header] = values[index];
      return obj;
    }, {});
  });
}

用这个进阶版本处理示例中的CSV：

index,id,description,component,service
0,5,lorem ipsum,7326985,Field Service 

会得到如下结果：

[
  {
    index: "0",
    id: "5",
    description: "lorem ipsum",
    component: "7326985",
    service: "Field Service"
  }
]

内容的提问来源于stack exchange，提问作者André Roy