2D матрица в JS с именами строк и столбцов

Question

У меня есть следующая структура данных:

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

Теперь я хотел бы изменить эту структуру данных, чтобы иметь заголовки строк и столбцов. Так, например, если бы я рендерил эту матрицу, она бы выглядела так:

-- Column1, Column2
Row1 1        2
Row2 3        4

Столбец1 и Столбец2 - заголовки столбцов, а Строка1 и Строка2 - заголовки строк.

Какая структура JS лучше всего подходит для этого?

Answer 1

Я бы взял объект в качестве обертки, а матрицу - в качестве необработанных данных, например

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

, поскольку это позволяет обращаться к матрице и выполнять некоторые вычисления без преобразования и использования столбцов и описания строк в качестве отдельных данных..

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}	`;
    for (let elem of myMatrix[i]) {
      subArrayToString += `${elem}	`;
    }
    bodyString += subArrayToString + "";
  }
  
  let headerString = `--	`;
  
  for (let i = 0; i < maxRowLength; i++) {
    headerString += `Column${i + 1}	`;
  }
  
  return `${headerString}${bodyString}

`; } 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]];

эта структура данных будет более эффективной в случае запроса столбцов, ваш фактический код может быть более сложнымпотому что вы должны "пройтись" по всем массивам.