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

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

Проверим:

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

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

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

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

---

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

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

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»