Многомерные массивы в JavaScript

• Что такое многомерный массив
• Двумерный массив
• Получить элемент
• Изменить элемент
• Добавить строку
• Перебор многомерного массива
• Неровные массивы
• Где использовать
• Итого

В JavaScript нет отдельного типа данных для многомерных массивов. Обычно так называют массивы, внутри которых лежат другие массивы.

let numbers = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

Такую структуру удобно представлять как таблицу.

Что такое многомерный массив

Обычный массив хранит значения в один ряд.

let numbers = [1, 2, 3];

Многомерный массив хранит массивы внутри массива.

let numbers = [
  [1, 2, 3],
  [4, 5, 6],
];

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

Двумерный массив

Самый частый вариант многомерного массива - двумерный массив. Его можно представить как таблицу со строками и столбцами.

let table = [
  ['Имя', 'Возраст', 'Город'],
  ['Анна', 25, 'Москва'],
  ['Олег', 31, 'Казань'],
];

Здесь внешний массив table содержит три внутренних массива. Каждый внутренний массив - это строка таблицы.

['Имя',  'Возраст', 'Город']
['Анна', 25,        'Москва']
['Олег', 31,        'Казань']

Получить элемент

Чтобы получить элемент из двумерного массива, используют два индекса.

let table = [
  ['Имя', 'Возраст', 'Город'],
  ['Анна', 25, 'Москва'],
  ['Олег', 31, 'Казань'],
];

console.log(table[1][0]); // Анна
console.log(table[1][2]); // Москва

Первый индекс выбирает внутренний массив, второй индекс выбирает элемент внутри него.

table[1][0]

В этой записи table[1] возвращает строку [‘Анна’, 25, ‘Москва’], а [0] берет из нее первый элемент.

Изменить элемент

Элемент внутри многомерного массива можно изменить так же, как и в обычном массиве, только индексов будет два.

let table = [
  ['Имя', 'Возраст', 'Город'],
  ['Анна', 25, 'Москва'],
  ['Олег', 31, 'Казань'],
];

table[2][2] = 'Самара';

console.log(table[2]); // ['Олег', 31, 'Самара']

Мы выбрали строку с индексом 2 и заменили в ней элемент с индексом 2.

Добавить строку

Так как внешний массив - обычный массив, в него можно добавлять новые внутренние массивы.

let table = [
  ['Имя', 'Возраст', 'Город'],
  ['Анна', 25, 'Москва'],
];

table.push(['Олег', 31, 'Казань']);

console.log(table);

Новая строка добавится в конец массива.

Если нужно добавить значение внутрь конкретной строки, сначала выбирают эту строку, а потом используют обычные методы массива.

let row = ['Анна', 25];

row.push('Москва');

console.log(row); // ['Анна', 25, 'Москва']

Перебор многомерного массива

Чтобы перебрать двумерный массив, часто используют вложенный цикл.

let numbers = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

for (let row of numbers) {
  for (let number of row) {
    console.log(number);
  }
}

Внешний цикл перебирает строки, внутренний цикл перебирает элементы внутри каждой строки.

Если нужно работать именно со строкой целиком, достаточно одного цикла.

let table = [
  ['Анна', 25],
  ['Олег', 31],
];

for (let row of table) {
  console.log(row);
}

Неровные массивы

Внутренние массивы не обязаны быть одинаковой длины.

let groups = [
  ['Анна', 'Олег'],
  ['Мария'],
  ['Иван', 'Света', 'Петр'],
];

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

console.log(groups[0].length); // 2
console.log(groups[1].length); // 1
console.log(groups[2].length); // 3

Где использовать

Многомерные массивы используют, когда данные удобно представить в виде строк и столбцов.

• таблица с данными;
• игровое поле;
• матрица чисел;
• список групп, где в каждой группе свой список элементов.

Например, простое игровое поле можно записать так:

let board = [
  ['x', '', 'o'],
  ['', 'x', ''],
  ['o', '', 'x'],
];

console.log(board[0][0]); // x
console.log(board[2][2]); // x

Итого

Многомерный массив в JavaScript - это массив, внутри которого лежат другие массивы.

• Двумерный массив удобно представлять как таблицу.
• Первый индекс выбирает внутренний массив.
• Второй индекс выбирает элемент внутри внутреннего массива.
• array[row][column] - обычная запись для доступа к элементу.
• Для перебора двумерного массива часто используют вложенный цикл.
• Внутренние массивы могут быть разной длины, но с такими структурами легче запутаться.