Массивы

Массив — это упорядоченная коллекция значений. Каждый элемент имеет числовой индекс, начиная с 0. Массивы используются для хранения списков: списка задач, списка пользователей, списка элементов в списке приложения.

Создание массива

Самый распространённый способ — через литерал:

const tasks = ['Почитать книгу', 'Сделать уборку', 'Написать код'];

Можно создать через конструктор, но это редко используется:

const numbers = new Array(1, 2, 3);
const empty = new Array(5); // массив из 5 пустых ячеек (не [0,0,0,0,0]!)

Литерал [] предпочтительнее: он быстрее, понятнее и безопаснее.

Доступ к элементам

Обращение по индексу:

console.log(tasks[0]); // "Почитать книгу"
console.log(tasks[2]); // "Написать код"

Если индекс не существует — вернётся undefined:

console.log(tasks[5]); // undefined

Многомерные массивов

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

Создание многомерного массива

Простейший пример — двумерный массив (матрица 3x3):

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Это массив из трёх элементов, каждый из которых — массив чисел.

Доступ к элементу осуществляется через два индекса: сначала — строка, потом — столбец:

console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][1]); // 8

Если попытаться обратиться к несуществующему индексу — получите undefined:

console.log(matrix[3][0]); // undefined
console.log(matrix[0][5]); // undefined

Методы массива

У массивов в JS существует достаточно большое количество методов для управления данными.

В рамках темы мы изучим самые часто используемые. Остальные же - вам необходимо будет изучать самостоятельно!

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

Добавить в конец — push():

tasks.push('Сделать 47 практику');
console.log(tasks.length); // 4

Удалить из конца — pop():

const lastTask = tasks.pop();
console.log(lastTask); // "Сделать 47 практику"
console.log(tasks.length); // 3

Добавить в начало — unshift():

tasks.unshift('Позавтракать');
console.log(tasks[0]); // "Позавтракать"

Удалить из начала — shift():

const firstTask = tasks.shift();
console.log(firstTask); // "Позавтракать"

Эти методы (push, pop, unshift, shift) меняют исходный массив — это мутация.

Метод splice()

Мощный метод для вставки, удаления или замены элементов по индексу.

Синтаксис: splice(начальный индекс, количество удаляемых, ...новые элементы)

Удалить 1 элемент начиная с индекса 1:

const fruits = ['яблоко', 'банан', 'апельсин'];
fruits.splice(1, 1); // удаляем "банан"
console.log(fruits); // ['яблоко', 'апельсин']

Вставить элемент:

fruits.splice(1, 0, 'груша'); // вставляем "груша" на позицию 1
console.log(fruits); // ['яблоко', 'груша', 'апельсин']

Заменить элемент:

fruits.splice(1, 1, 'киви'); // заменяем "груша" на "киви"
console.log(fruits); // ['яблоко', 'киви', 'апельсин']

Метод slice()

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

Синтаксис: slice(начало, конец) — конец не включается.

const items = ['a', 'b', 'c', 'd', 'e'];
const subset = items.slice(1, 4); // с индекса 1 до 3
console.log(subset); // ['b', 'c', 'd']
console.log(items); // ['a', 'b', 'c', 'd', 'e'] — не изменился

Поиск элемента

indexOf() — возвращает индекс первого совпадения, или -1, если не найдено:

const colors = ['красный', 'зелёный', 'синий'];
console.log(colors.indexOf('зелёный')); // 1
console.log(colors.indexOf('жёлтый')); // -1

includes() — возвращает true или false:

console.log(colors.includes('синий')); // true
console.log(colors.includes('жёлтый')); // false

includes() удобнее для проверки наличия, indexOf() — если нужно знать позицию.

Перебор массива

Цикл for — классический, с индексом:

for (let i = 0; i < tasks.length; i++) {
  console.log(`${i + 1}. ${tasks[i]}`);
}

Цикл for...of — перебирает значения, индекс не нужен:

for (const task of tasks) {
  console.log(task);
}

for...of предпочтителен, когда вам не нужен индекс — читаемо и безопасно.

Не используйте for...in для массивов — он перебирает ключи (индексы как строки), и может вести себя неожиданно с дополнительными свойствами.