Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Двовимірний масив». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Двовимірний масив (або масив масивів) це структура даних, у якій кожен елемент сам є масивом.** Простіше кажучи, це таблиця: рядки і стовпці, як в 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]`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати662 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.