Как работать с вложенными (многомерными) массивами в JS? Как пушить в массив массивов?
Делаю что-то вроде игрового поля и не понимаю, как правильно хранить данные таблицей. Завёл let board = [], но как добавить в него строку, а потом значение в конкретную ячейку? И как потом всё это обойти и собрать в один плоский список? Заранее спасибо, в массивах массивов путаюсь.
2 ответа
Многомерный массив в JS — это просто массив, элементы которого тоже массивы. Никакой магии, разберём по шагам.
1. Создание. Литералом:
const board = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
2. Доступ к ячейке — двойной индекс arr[строка][столбец]:
console.log(board[0][2]); // 3 (первая строка, третий столбец)
board[1][1] = 50; // меняем центр
3. Push. Чтобы добавить целую строку — пушим массив в внешний. Чтобы добавить значение в строку — пушим во вложенный:
board.push([10, 11, 12]); // новая строка
board[0].push(99); // добавили в первую строку
4. Обход. Вложенные циклы дают доступ к индексам:
for (let i = 0; i < board.length; i++) {
for (let j = 0; j < board[i].length; j++) {
console.log(`board[${i}][${j}] = ${board[i][j]}`);
}
}
Или функционально — flat() схлопывает на один уровень, flatMap() мапит и схлопывает сразу:
const flat = board.flat(); // [1,2,...]
const doubled = board.flatMap(row => row.map(x => x * 2));
Почему именно так: board[i] возвращает ссылку на вложенный массив, и .push() уже работает с ним как с обычным массивом. Главное помнить, что строки — отдельные объекты в памяти.
Дополню про очень частую ловушку при создании пустой сетки. Соблазнительно написать так:
const grid = Array(3).fill([]);
grid[0].push(1);
console.log(grid); // [[1],[1],[1]] — сюрприз!
Все три «строки» — это одна и та же ссылка на один массив, потому что fill([]) кладёт во все ячейки один объект. Правильно — создавать новый массив для каждой строки:
const grid = Array.from({ length: 3 }, () => []);
grid[0].push(1);
console.log(grid); // [[1],[],[]] — то, что нужно
То же касается чисел: Array.from({length: 3}, () => Array(4).fill(0)) для сетки 3×4 нулей.
