JavaScript如何遍历数据对象生成逗号分隔（CSV）文件

DevOps 小满

2026-11-6

现有代码的核心问题

语法与逻辑疏漏：DOM取值部分漏写jQuery选择器前缀$，直接运行会报语法错误；textarray.push()为空参数入栈，根本没有把循环得到的实际数据存入数组
冗余执行：固定输入框的取值写在循环内部，每轮重复执行取值逻辑，既浪费性能，还可能因为循环执行期间用户修改输入值出现取值不一致的问题
格式不符合CSV标准：没有对带特殊字符的字段做转义，直接拼接的内容遇到含逗号、双引号、换行的字段时，会打乱原有列结构
缺少行分隔逻辑：最终生成的文本没有做换行分隔，所有内容连成一长串，完全不符合“每轮循环对应CSV单独一行”的要求

简化可落地的实现方案

先实现符合RFC标准的CSV字段转义逻辑，避免格式错乱

function escapeCSVField(value) {
  if (value == null) return '';
  // 字段包含逗号、双引号、换行时，整体用双引号包裹，内部双引号替换为两个双引号
  if (/[",\n]/.test(value)) {
    return `"${value.replace(/"/g, '""')}"`;
  }
  return value;
}

调整循环逻辑，把固定输入值的取值移到循环外部，每轮循环生成对应CSV行存入数组

const textarray = [];
// 固定输入值只在循环外取一次
const sms = $('#TxtMessage').val();
const date = $('#datetxt').val();
const code = $('#code').val();

// 可选：手动添加CSV表头，按需调整字段名
// textarray.push(['短信内容','日期','编码','产品类型','搅拌机','质量等级'].map(escapeCSVField).join(','));

for (let i = 0; i < data.length; i++) {
  const item = data[i];
  // 每轮生成一行完整的CSV行内容
  const currentRow = [
    sms,
    date,
    code,
    item.producttype,
    item.mixer,
    item.quality
  ].map(escapeCSVField).join(',');
  textarray.push(currentRow);
}

// 所有行用换行拼接成完整的CSV文本
const csvContent = textarray.join('\n');

如需直接生成可下载的CSV文件，不用手动复制文本，通过Blob触发浏览器自动下载即可

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const downloadLink = document.createElement('a');
const objectUrl = URL.createObjectURL(blob);
downloadLink.href = objectUrl;
downloadLink.download = '导出数据.csv';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(objectUrl);

关键注意点

相比手动拼接字符串，用数组map+join的方式不容易出现漏逗号、字段顺序错乱的问题
转义逻辑是标准CSV的必备环节，否则带特殊字符的字段会让打开的表格列完全错位
生成Blob时指定charset=utf-8，可以避免中文打开CSV时出现乱码

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