Теория: Вложенные массивы

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

const arr1 = [[3]]
arr1.length // 1

const arr2 = [1, [3, 2], [3, [4]]]
arr2.length // 3

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

const arr2 = [
  1, // первый элемент (число)
  [3, 2], // второй элемент (массив)
  [3, [4]], // третий элемент (массив)
]
arr2.length // 3

Вложенность никак не ограничивается. Можно создавать массив массивов массивов и так далее.

Обращение ко вложенным массивам выглядит немного необычно, хотя и логично:

const arr1 = [[3]]
arr1[0][0] // 3

const arr2 = [1, [3, 2], [3, [4]]]
arr2[2][1][0] // 4

Возможно, с непривычки вы не всегда сразу точно увидите, как добраться до нужного элемента, но это всего лишь вопрос тренировок:

const arr2 = [
  1,
  [3, 2],
  [3, [4]],
]

arr2[2] // [3, [4]]
arr2[2][1] // [4]
arr2[2][1][0] // 4

Изменение и добавление массивов в массив:

const arr1 = [[3]]
arr1[0] = [2, 10]
arr1.push([3, 4, 5])

// [[2, 10], [3, 4, 5]]

Вложенные массивы можно изменять напрямую, просто обратившись к нужному элементу:

const arr1 = [[3]]
arr1[0][0] = 5
// [[5]]

То же самое касается и добавления нового элемента:

const arr1 = [[3]]
arr1[0].push(10)
// [[3, 10]]

Для чего же могут понадобиться вложенные массивы? Таких примеров довольно много: начиная от математических концепций, например, матриц, заканчивая представлением игровых полей. Помните игру крестики-нолики? Это как раз тот самый случай.

Разберем такую задачку: дано игровое поле для крестиков-ноликов. Нужно написать функцию, которая проверяет, есть ли на этом поле хотя бы один крестик или нолик, в зависимости от того, что попросят проверить.

// Инициализируем поле
const field = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
]

// Делаем ход:
field[1][2] = 'x'
// [
//     [null, null, null],
//     [null, null, 'x'],
//     [null, null, null],
// ]

Теперь реализуем функцию, которая выполняет проверку:

const hasPlayerMoved = (field, symbol) => {
  // Обходим поле. Каждый элемент — это строчка в игровом поле.
  for (const row of field) {
    // метод includes проверяет присутствует ли элемент в массиве,
    if (row.includes(symbol)) { // Если присутствует, значит мы нашли то, что искали.
      return true
    }
  }

  // Если поле было просмотрено, но ничего не нашли,
  // значит ходов не было.
  return false
}

Проверим:

hasPlayerMoved(field, 'x') // true
hasPlayerMoved(field, 'o') // false