如何使用JavaScript将多个数组转为CSV列并修复行列索引插入问题

需求 #

将多个JavaScript数组转换为CSV对应的列。

背景 #

正在调用API扫描配备GPS单元的资产车队，生成包含闲置资产列表等在内的多项指标。

问题 #

目前卡在嵌套for循环中计算单元格插入到正确行/列位置的索引逻辑上，查找了很多NPM上的包都无法便捷实现多数组转CSV列的需求。

期望输出 #

All Assets,Idle Assets
1000,2001,
1001,2002,
1002,2003,
1003,2004,
1004,,

实际错误输出 #

All Assets,Idle Assets
1000,2001,
2002,
2003,
2004,
,
1001,1002,1003,1004,

现有代码 #

//Sample Array Data (can handle more arrays/columns)
const allAssets = ['1000', '1001', '1002', '1003', '1004'];
const idleAssets = ['2001', '2002', '2003', '2004'];

////Arrays to CSV columns
const headers = ['All Assets', 'Idle Assets'];
const columns = [allAssets, idleAssets];

//Identify columnLen (# of arrays) & rowLen (length of longest array)
let longestArr = 0;
columns.forEach((arr) =>
    arr.length > longestArr
        ? longestArr = arr.length
        : undefined);

const rowLen = longestArr;
const columnLen = columns.length;
const heading = (headers.join(',')).concat('\n');

const csvConstructor = () => {
    const data = [];
    for (let column = 0; column < columnLen; column++) {
        const columnArray = columns[column];
        for (let row = 0; row < rowLen; row++) {
            let cell;
            
            //Account for different sized arrays
            columnArray[row] === undefined
                ? cell = ','
                : cell = columnArray[row].concat(',');

            //New line for cells in last column
            (columns.length - 1) === column
                ? cell = cell.concat('\n')
                : undefined;

            //Dynamically insert cell into appropriate data index
            const insertAt = column + row; //<--- 此处索引计算逻辑需要修复
            data.splice(insertAt, 0, cell);
        }
    }
    const result = heading.concat(data.join(''));
    return result
}

const csv = csvConstructor();
console.log(csv);

核心问题出在两点：循环顺序不合理、索引计算逻辑错误。原代码先遍历列再遍历行，索引计算insertAt = column + row完全不符合二维表格的位置映射规则，同时频繁调用splice插入元素性能也较差。

更简单的实现思路是先遍历行再遍历列，不需要处理复杂的索引计算，逻辑更清晰：

const allAssets = ['1000', '1001', '1002', '1003', '1004'];
const idleAssets = ['2001', '2002', '2003', '2004'];

const headers = ['All Assets', 'Idle Assets'];
const columns = [allAssets, idleAssets];

// 计算最长列的长度作为总行数
const rowLen = Math.max(...columns.map(arr => arr.length));
const heading = headers.join(',') + '\n';

const csvConstructor = () => {
  const rows = [];
  // 外层遍历每一行
  for (let row = 0; row < rowLen; row++) {
    const currentRow = [];
    // 内层遍历当前行的每一列
    for (let col = 0; col < columns.length; col++) {
      // 空值填充为空字符串
      currentRow.push(columns[col][row] ?? '');
    }
    rows.push(currentRow.join(',') + '\n');
  }
  return heading + rows.join('');
}

const csv = csvConstructor();
console.log(csv);

如果一定要保留原代码先列后行的遍历方式，只需要把索引计算逻辑修改为const insertAt = row * columnLen + column即可，但仍然不推荐该实现方式。

内容的提问来源于stack exchange，提问作者jason-warner