Двовимірний масив

JavaScriptJunior~2 хв читання

Двовимірний масив (або масив масивів) це структура даних, у якій кожен елемент сам є масивом. Простіше кажучи, це таблиця: рядки і стовпці, як в Excel або в математичній матриці. У JavaScript немає окремого типу «матриця», двовимірний масив це звичайний Array, усередині якого лежать інші Array.

Теорія

TL;DR

Двовимірний масив це звичайний масив, елементами якого є масиви.
Звернення до елемента йде через два індекси: matrix[рядок][стовпець].
Перший індекс це рядок, другий це стовпець.
Щоб пройтися по всіх елементах, використовують вкладені цикли.
Порожню матрицю створюють через Array.from, бо Array(n).fill(Array(m)) дає n посилань на один і той самий рядок.
Рядки можуть мати різну довжину: JavaScript не вимагає прямокутної форми.

Швидкий приклад

javascript

const matrix = [
  [1, 2, 3],   // row 0
  [4, 5, 6],   // row 1
  [7, 8, 9]    // row 2
];

console.log(matrix[0]);     // [1, 2, 3] - перший рядок
console.log(matrix[1][2]);  // 6 - другий рядок, третій стовпець

Тут matrix[0] повертає цілий рядок [1, 2, 3], а matrix[1][2] повертає конкретне число з другого рядка і третього стовпця.

Як це виглядає таблицею

Той самий масив зручно уявляти як сітку:

javascript

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

	0	1	2
0	1	2	3
1	4	5	6
2	7	8	9

Заголовки рядків це перший індекс, заголовки стовпців це другий.

Доступ до елементів

javascript

console.log(matrix[0][0]); // 1
console.log(matrix[2][1]); // 8

Перший індекс це рядок, другий це стовпець. Порядок важливий: matrix[2][1] і matrix[1][2] це різні комірки. Якщо звернутися до неіснуючого рядка, отримаєте undefined, а спроба одразу взяти з нього другий індекс (matrix[9][0]) кине TypeError.

Обхід усіх елементів

Класичний спосіб це вкладені цикли:

javascript

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

i це номер рядка,
j це номер стовпця.

Зверніть увагу: внутрішній цикл обмежений matrix[i].length, а не якоюсь спільною шириною. Саме так обхід залишається коректним і для «рваних» масивів, де рядки різної довжини.

Те саме через for...of виглядає компактніше:

javascript

for (const row of matrix) {
  for (const value of row) {
    console.log(value);
  }
}

Створення порожньої матриці

javascript

const rows = 3;
const cols = 4;
const matrix = Array.from({ length: rows }, () => Array(cols).fill(0));

console.log(matrix);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

Array.from викликає функцію-фабрику для кожного рядка окремо, тому кожен рядок це новий масив.

Де застосовують і коротка таблиця

Двовимірні масиви часто використовують для:

зберігання таблиць і матриць чисел;
представлення ігрових полів (наприклад, шахи, хрестики-нулики);
зберігання пар координат (x, y);
роботи із зображеннями, пікселями, сітками тощо.

Термін	Значення
Двовимірний масив	Масив, де кожен елемент це масив
Індексація	`[рядок][стовпець]`
Приклад	`matrix[1][2]` повертає `6`
Часто використовують для	Таблиць, сіток, координат, матриць

Підсумок: двовимірний масив це «таблиця в коді»: масив, що складається з інших масивів. Він дозволяє зручно зберігати дані у вигляді рядків і стовпців.

Типові помилки

Array(3).fill(Array(3).fill(0)). Усі три «рядки» це одне й те саме посилання, тому запис matrix[0][0] = 1 змінить перший стовпець у всіх рядках. Використовуйте Array.from({ length: 3 }, () => Array(3).fill(0)).
Переплутані індекси. matrix[стовпець][рядок] замість matrix[рядок][стовпець] дає або інше значення, або вихід за межі.
Жорстко зашита ширина. Умова j < matrix[0].length ламається, якщо рядки різної довжини; беріть matrix[i].length.
matrix.length як кількість комірок. Це кількість рядків, а не загальна кількість елементів.
Копіювання через spread. [...matrix] копіює лише зовнішній масив, вкладені рядки залишаються спільними. Для незалежної копії потрібно matrix.map(row => [...row]).
Спроба взяти елемент з неіснуючого рядка. matrix[99][0] кине TypeError, бо matrix[99] це undefined; перевіряйте межі або використовуйте matrix[99]?.[0].

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.