如何在JavaScript中为二维数组设置固定列宽并在控制台美观打印？

嘿，这个需求其实挺实用的，只是可能搜的关键词不对才没找到现成方案～我给你写个通用的JavaScript方法，不管你的数组是2列、3列还是更多列，都能自动计算每列的最大宽度，输出整齐的格式！

核心思路 #

要实现固定列宽对齐，关键就两步：

1. 统计每列的最大宽度：遍历数组的每一列，找出该列里最长字符串的长度，把这个长度作为这一列的固定宽度。
2. 格式化每行元素：把每行的每个元素用padEnd方法补全到对应列的最大宽度，再用你想要的分隔符（比如||）拼接起来。

完整代码实现 #

function formatArrayForConsole(arr, separator = " || ") {
  // 处理空数组的边界情况
  if (!arr.length) return "";
  
  // 获取数组的列数
  const columnCount = arr[0].length;
  // 初始化存储每列最大宽度的数组
  const columnWidths = new Array(columnCount).fill(0);

  // 第一步：遍历数组，统计每列的最大宽度
  arr.forEach(row => {
    row.forEach((item, colIndex) => {
      const itemLength = String(item).length;
      if (itemLength > columnWidths[colIndex]) {
        columnWidths[colIndex] = itemLength;
      }
    });
  });

  // 第二步：格式化每一行，补全对齐后用分隔符连接
  return arr.map(row => {
    return row.map((item, colIndex) => {
      // 用空格补全到对应列的最大宽度，保证对齐
      return String(item).padEnd(columnWidths[colIndex]);
    }).join(separator);
  }).join("\n");
}

// 测试你的示例数组
const animals = [ 
  ["cats", "dogs"], 
  ["verrylongcat", "dog"], 
  ["shortcat", "verrylongdog"], 
  ["cat", "dog"] 
];

// 输出到控制台
console.log(formatArrayForConsole(animals));

输出效果 #

运行上面的代码，控制台会输出整齐的格式：

cats        || dogs
verrylongcat|| dog
shortcat    || verrylongdog
cat         || dog

扩展说明 #

• 多列兼容：不管是3列、4列甚至更多列，这个方法都能完美适配。比如测试下面的3列数组：

  const testArr = [["a", "bb", "ccc"], ["aaaa", "b", "cc"], ["aa", "bbbb", "c"]];
  console.log(formatArrayForConsole(testArr));
  

  输出会是：

  a   || bb  || ccc
  aaaa|| b   || cc
  aa  || bbbb|| c
  

• 自定义分隔符：你可以修改separator参数，换成|、---或者任何你喜欢的分隔符号。
• 非字符串元素兼容：如果数组里有数字、布尔值这类非字符串元素，String(item)会自动把它转为字符串，不影响对齐效果。

其实类似的需求并不少见，只是换个关键词比如“JavaScript 数组对齐打印”“固定列宽输出二维数组”更容易找到相关讨论～

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