Question

我具有以下数据结构：

const myMatrix = [[1,2], [3,4]];

现在，我想修改该数据结构，以便可以拥有行标题和列标题。因此，例如，如果我要渲染此矩阵，它将看起来像：

-- Column1, Column2
Row1 1        2
Row2 3        4

Column1和Column2是列标题，Row1和Row2是行标题。

最合适的JS结构是什么？

Answer 1

我将对象作为包装器，并将矩阵作为原始数据，例如

{
    cols: ['', 'Column1', 'Column2'],
    rows: ['Row1', 'Row2'],
    data: [[1, 2], [3, 4]]
}

因为这允许寻址矩阵并进行一些计算，而无需转换和使用cols和行描述作为单独的数据。

Answer 2

我不知道您所说的渲染是什么意思，但是假设您想在HTML中显示它，您只需要编写一些代码即可。我不知道最佳做法，但这是我想出的，请告诉我是否需要解释：

const myMatrix = [[1, 2], [3, 4]];
const anotherMatrix = [[1, 2], [3, 4, 5, 6], [7]];

function matrixToSuperString(myMatrix) {
  let bodyString = "";
  let maxRowLength = 0;
  
  for (let i = 0; i < myMatrix.length; i++) {
    if (myMatrix[i].length > maxRowLength) {
      maxRowLength = myMatrix[i].length;
    }
    let subArrayToString = `Row${i + 1}&#9;`;
    for (let elem of myMatrix[i]) {
      subArrayToString += `${elem}&#9;`;
    }
    bodyString += subArrayToString + "</br>";
  }
  
  let headerString = `--&#9;`;
  
  for (let i = 0; i < maxRowLength; i++) {
    headerString += `Column${i + 1}&#9;`;
  }
  
  return `<pre>${headerString}</br>${bodyString}</pre>`;
}

document.getElementById("app").innerHTML =
  matrixToSuperString(myMatrix) + matrixToSuperString(anotherMatrix);

<div id="app"></div>

在这里检查： https://codesandbox.io/s/w06m3vxnp7

Answer 3

我会设置

const myMatrix = [ 
[row1col1,row2col1,rowNcolN],
[row1col2,row2col2,rowNcolN],
...
 ]

应翻译为您的代码

const myMatrix = [[1,3], [2,4]];

在查询cols的情况下，这种数据结构会更有效，因为您必须“遍历”所有数组，因此您的实际代码可能会更复杂。

JS中具有行和列名称的2D矩阵

3 个答案: