Двумерный массив в JavaScript: создание, доступ и примеры кода

hannadev

Двумерный массив в JavaScript - это массив, который содержит другие массивы. Он полезен для представления таблиц, матриц или сеток данных, таких как игровые поля или карты.

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

Как создать двумерный массив

Двумерный массив формируется как массив массивов. Базовый способ - объявить его литералом с вложенными массивами. Например, для таблицы 3x3: const matrix = [[1,2,3], [4,5,6], [7,8,9]]. Это просто и читаемо для небольших структур.

Для динамического создания подойдут методы вроде Array.from. Они позволяют задать размеры и заполнить значениями автоматически. Такой подход экономит время при работе с большими матрицами, избегая ручного ввода. Переходим к конкретным методам.

Литерал массива: let arr = [['a','b'], ['c','d']] - быстрый способ для статических данных.
Array.from: Array.from({length: 3}, () => Array(3).fill(0)) - создает матрицу 3x3 с нулями.
Цикл for: Инициализация через вложенные циклы для произвольных размеров и значений.

Метод	Преимущества	Когда использовать
Литерал	Простота, читаемость	Маленькие фиксированные массивы
Array.from	Автоматическое заполнение	Матрицы с повторяющимися значениями
Циклы	Гибкость	Динамические размеры, сложная логика

Важно: Всегда проверяйте границы, чтобы избежать ошибок undefined.

Доступ к элементам и их изменение

Доступ к элементу идет через двойную индексацию: matrix[row][col]. Первый индекс - строка, второй - столбец. Например, в [[1,2],[3,4]] значение matrix равно 3. Это работает как для чтения, так и для записи.

Изменение простое: matrix= 10. Массив мутирует на месте, что удобно для игр или таблиц. Но будьте осторожны с ссылками - копирование требует slice или map, иначе изменения затронут оригинал. Рассмотрим циклы для обхода.

Один элемент: console.log(matrix) - прямой доступ.
Цикл по строкам: for(let i=0; i<rows; i++) { for(let j=0; j<cols; j++) { console.log(matrix[i][j]); } } - полный обход.
forEach: matrix.forEach(row => row.forEach(cell => console.log(cell))) - функциональный стиль.

Операция	Код	Результат
Чтение	matrix	6
Запись	matrix = 99	Изменяет первый элемент
Обход	Двойной for	Вывод всех элементов

Ключевой момент: Индексы начинаются с 0, проверяйте matrix.length и matrix.length.

Практические примеры использования

Двумерные массивы идеальны для шахматной доски или таблицы умножения. Возьмем шахматную доску: создаем 8x8 с чередованием цветов. Код: Array.from({length:8}, (_,i) => Array.from({length:8}, (_,j) => (i+j)%2 ? 'black' : 'white')). Это генерирует сетку автоматически.

Другой пример - спиральная матрица. Заполняем числами по спирали от 1 до n*n. Алгоритм использует четыре цикла для краев, сужая границы. Такой подход применяется в задачах на LeetCode. Он демонстрирует сложную логику с двумерными структурами.

const createSpiral = (n) => {
  const matrix = Array(n).fill().map(() => Array(n).fill(0));
  let counter = 1, startRow=0, endRow=n-1, startCol=0, endCol=n-1;
  while(startRow <= endRow && startCol <= endCol) {
    for(let i=startCol; i<=endCol; i++) matrix[startRow][i] = counter++;
    startRow++;
    for(let i=startRow; i<=endRow; i++) matrix[i][endCol] = counter++;
    endCol--;
    if(startRow <= endRow) for(let i=endCol; i>=startCol; i--) matrix[endRow][i] = counter++;
    endRow--;
    if(startCol <= endCol) for(let i=endRow; i>=startRow; i--) matrix[i][startCol] = counter++;
    startCol++;
  }
  return matrix;
};

Таблица умножения: Генерация 10x10 с Array.from({length:10}, (_,i) => Array.from({length:10}, (_,j) => (i+1)*(j+1))).
Игровое поле: Тик-так-то для 3x3, проверка победы через обход строк, столбцов и диагоналей.
Карта уровня: Хранение стенок и проходов в 2D для простых игр.

Нюанс: Для больших массивов используйте typed arrays вроде Float32Array для производительности.

Методы и продвинутые техники

JavaScript предлагает методы для трансформации: map, flat, reduce. Например, matrix.flat() превращает двумерный в одномерный. matrix.map(row => row.map(cell => cell * 2)) умножает все элементы на 2.

Для поиска максимума: Math.max(...matrix.flat()). Это упрощает операции. В реальных проектах комбинируйте с filter для выборки строк. Такие техники ускоряют код в веб-приложениях.

Транспонирование: matrix.map((_, col) => matrix.map(row => row[col])) - меняет строки на столбцы.
Сумма элементов: matrix.reduce((acc, row) => acc + row.reduce((a,b)=>a+b,0), 0).
Проверка прямоугольности: Все строки одинаковой длины через matrix.every(row => row.length === matrix.length).

Метод	Применение	Эффективность
flat()	Развертка	O(n)
map	Трансформация	Функциональный, читаемый
reduce	Агрегация	Гибкий для сложных вычислений

Совет: Избегайте мутации, возвращайте новые массивы для иммутабельности.

Работа с двумерными массивами в проектах

Двумерные массивы упрощают рендеринг таблиц в Canvas или React. В играх они хранят состояние поля, в чартах - данные сетки. Мы разобрали основы, но есть нюансы вроде производительности при больших размерах или интеграции с WebGL.

Для сложных случаев подойдут библиотеки вроде math.js. Подумайте о трехмерных массивах, если нужны объемные данные. Это расширит возможности в визуализациях и симуляциях.