JS: Массивы

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

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

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

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

https://repl.it/@hexlet/js-arrays-nested-arrays-multidimensional-array

Каждый элемент, являющийся массивом, рассматривается как единое целое. Это видно по размеру второго массива. Синтаксис 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

https://repl.it/@hexlet/js-arrays-nested-arrays-access

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

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]]

https://repl.it/@hexlet/js-arrays-nested-arrays-change-and-adding-elements

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

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

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

Проверим:

didPlayerMove(field, 'x'); // true
didPlayerMove(field, 'o'); // false

https://repl.it/@hexlet/js-arrays-nested-arrays-tic-tac-toe


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

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

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

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

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».