Урок 6 из 8 · 25 мин · обновлено

Массивы и мутирующие методы

Что такое массив, как обращаться к элементам и перебирать их, и какие методы меняют исходный массив: push, pop, shift, unshift, splice, sort и reverse.

Что такое массив

Массив — это упорядоченный список значений. Товары в корзине, задачи на день, сообщения в чате — всё это обычно хранят в массивах:

JavaScript
const tasks = ["купить хлеб", "позвонить маме", "оплатить интернет"];

console.log(tasks[0]);         // "купить хлеб" — нумерация с нуля
console.log(tasks.at(-1));     // "оплатить интернет" — последний
console.log(tasks.length);     // 3

Перебирать массив удобно циклом for...of из урока 3:

JavaScript
for (const task of tasks) {
  console.log(`— ${task}`);
}

Проверить, есть ли элемент в массиве, помогает includes():

JavaScript
console.log(tasks.includes("позвонить маме"));   // true

Мутирующие методы

Методы массивов делятся на две группы. Мутирующие меняют сам массив — исходные данные после них уже другие. Неизменяемые оставляют исходный массив как был и возвращают новый — о них следующий урок.

Различать их важно: если вы случайно измените массив, которым пользуется другая часть программы, ошибка всплывёт совсем в другом месте, и искать её будет трудно.

Добавить и удалить с краёв

JavaScript
const queue = ["Анна", "Иван"];

queue.push("Мария");      // в конец:   ["Анна", "Иван", "Мария"]
queue.unshift("Пётр");    // в начало:  ["Пётр", "Анна", "Иван", "Мария"]

const last = queue.pop();     // убрать последний — вернёт "Мария"
const first = queue.shift();  // убрать первый — вернёт "Пётр"

console.log(queue);   // ["Анна", "Иван"]

Запомнить легко: push и pop — про конец массива, unshift и shift — про начало.

splice: удалить или вставить в середине

JavaScript
const tasks = ["почта", "звонок", "отчёт", "зал"];

tasks.splice(1, 2);             // с индекса 1 удалить 2 элемента
console.log(tasks);             // ["почта", "зал"]

tasks.splice(1, 0, "обед");     // с индекса 1 ничего не удалять, вставить "обед"
console.log(tasks);             // ["почта", "обед", "зал"]

sort и reverse

JavaScript
const names = ["Иван", "Анна", "Мария"];
names.sort();       // ["Анна", "Иван", "Мария"]
names.reverse();    // ["Мария", "Иван", "Анна"]

Осторожно с числами: без дополнительных настроек sort() сравнивает элементы как строки.

JavaScript
const prices = [450, 1200, 90];
prices.sort();
console.log(prices);   // [1200, 450, 90] — как строки: «1» меньше «4», а «4» меньше «9»

Как сортировать числа правильно, разберём в следующем уроке.

const и массивы

Вы могли заметить, что массивы объявлены через const, но мы их меняем. Противоречия нет: const запрещает заменить массив другим, но не запрещает менять его содержимое.

JavaScript
const cart = ["чай"];
cart.push("кофе");    // можно — меняем содержимое
cart = ["сок"];       // ошибка — заменить массив целиком нельзя

Попробуйте сами. Есть список дел const todo = ["почта", "звонок", "отчёт"]. Добавьте в конец «зал», в начало — «зарядка», удалите «звонок» с помощью splice и выведите результат.

Решение
JavaScript
const todo = ["почта", "звонок", "отчёт"];

todo.push("зал");
todo.unshift("зарядка");   // ["зарядка", "почта", "звонок", "отчёт", "зал"]

const index = todo.indexOf("звонок");   // 2
todo.splice(index, 1);

console.log(todo);   // ["зарядка", "почта", "отчёт", "зал"]

indexOf() находит индекс элемента. Так не нужно считать позицию вручную — особенно если массив менялся по ходу программы.

Мини-тест: проверьте себя

Закрепите урок: несколько вопросов, разбор ответов — в конце.

  1. Что будет в массиве после const tasks = ['почта']; tasks.push('звонок');?

  2. Что делает tasks.splice(1, 1)?

  3. Что вернёт [10, 9, 1].sort()?

  4. Чем pop() отличается от shift()?