Зарегистрируйтесь, чтобы продолжить обучение

Вложенные массивы JS: Массивы

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

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

Дополнительные материалы

  1. Метод массива includes

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff