Question

我有一个Javascript数组：

animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
]

我想在控制台中很好地展示它。是否有一种简单的方法可以使柱子固定宽度，所以我得到这样的东西：

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

animals只是一个例子，我的数组也可能有3列，4列甚至更多。

顺便说一句 - 我很震惊这个问题没有被问过，但我到处寻找，我找不到它。我基本上问的问题与this question相同，但是对于JavaScript / JS。

Answer 1

如果您只是在控制台中查找表格，可以使用console.table()。

Node.js支持：

v10 - native console.table
在v10之前 - 使用console.table npm module

<强>演示：

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

console.table(animals); // look in the browser's console

要在HTML网页上创建表格，请使用嵌套Array.map()和template literals以及Array.join()来创建表格的行。使用Element.innerHTML将其分配给表格的正文：

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

const rows = animals.map((r) => `
  <tr>
    ${r.map((c) => `<td>${c}</td>`).join('')}
  </tr>
`).join('');

target.innerHTML = rows;

td {
  padding: 0.2em 0.5em;
}

td:nth-child(2) {
  border-left: 3px double;
}

<table>
  <tbody id="target"></tbody>
</table>

Answer 2

如果您只想将其登录到NodeJS中的控制台（除非您使用v10.0 +，否则它本身不支持console.table(animals)），请执行以下操作：

＆＃13;

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

for (const animal of animals) {
    console.log(animal.map(data => data.padEnd(20)).join(" || "));
}

＆＃13;

如果您发现数据实际上是这样的，请使用以下代码将其打印出来：

＆＃13;

const animals = [
  {
    name: "dog",
    tail: true
  },
  {
    name: "cat",
    tail: true
  }];

console.log(Object.keys(animals[0]).map(data => data.padEnd(20)).join(" || "));
for (const animal of animals) {
  console.log(Object.values(animal).map(data => data.toString().padEnd(20)).join(" || "));
}

＆＃13;

Answer 3

首先，您需要定义第一列的最大宽度：要到达那里，您需要迭代数组并保存第一个元素的最大长度（建议的解决方案使用reduce()这样做）

然后，您可以再次遍历数组并使用适当数量的填充打印每一行（建议的解决方案使用map()执行此操作，以及repeat()方法重现空间字符所需的次数。

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

const maxLength = animals.reduce((currMax,el) => el[0].length > currMax ? el[0].length : currMax, 0) + 5;
animals.map(el => console.log(el[0] + " ".repeat(maxLength - el[0].length) + "|| " + el[1]));

编辑：如果列数是>如图2所示，那么maxLength可以变成与已经显示的类似地填充的最大长度的数组（即，通过减小初始矩阵）。然后，需要更新映射，以便相应地应用列之间的间距。

如何在javascript中打印具有固定列宽的2D数组？

3 个答案: