Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Кажется, пришло время поговорить о массивах. Не просто поговорить, но еще и разобрать полезные примеры, которые помогут узнать о них больше. В этой статье я доступно расскажу, что такое массивы, какие у них особенности и для чего они вообще нужны. Заваривайте чай, открывайте редактор кода на своем компьютере для экспериментов — начнем разбираться!

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

Если вы начали изучать JavaScript, то наверняка уже знакомы с такими типами данных, как числа, строки, boolean, и точно знаете, что такое переменные. Эти знания отлично подходят для работы с единичными значениями. Например, числа удобно использовать для хранения возраста, стоимости, размера и так далее. Строки подойдут для имени, адреса или названия товара. Но что, если нужно создать список таких значений, например список товаров в корзине? Будет ли удобно для этого использовать обычные переменные? Давайте посмотрим пример.

let product1 = 'Кофе';
let product2 = 'Чай';
let product3 = 'Сок';
let product4 = 'Вода';
let product5 = 'Яблоки';

console.log('Товар 1', product1);
console.log('Товар 3', product3);
console.log('Товар 5', product5);

Конечно, такой подход хранения данных возможен. Но что если товаров будет 100, 1 000 или даже миллион? Будет ли удобно для каждого товара создавать отдельную переменную с порядковым номером? Конечно же нет. Такой способ крайне неудобен и избыточен. Вот здесь нам на помощь приходят массивы.

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

Создать массив очень просто. Объявите переменную и присвойте ей пустой массив, используя квадратные скобки:

let products = [];

Готово! Теперь массив можно наполнять, указывая порядковый номер элемента, который называется индексом.

Индекс — это число, обозначающее порядковый номер элемента в массиве, начиная с нуля.

Просто указываем название переменной массива и индекс элемента внутри квадратных скобок. Затем присваиваем нужное значение по этому индексу:

let products = [];

products[0] = 'Кофе';
products[1] = 'Чай';
products[2] = 'Сок';
products[3] = 'Вода';
products[4] = 'Яблоки';

Теперь массив заполнен теми же товарами, что и в примере выше. Но обратите внимание, что нумерация элементов массива начинается с нуля. Привыкайте к этому - первый элемент массива всегда имеет индекс 0.

Чтобы использовать элемент массива, обратитесь к нему по индексу, указывая название массива и индекс элемента в квадратных скобках. Элемент массива работает как обычная переменная, только с индексом:

console.log('Товар 1', products[0]);
console.log('Товар 3', products[2]);
console.log('Товар 5', products[4]);

Если нужно изменить значение уже существующего элемента, просто присвойте ему новое.

products[2] = 'Апельсиновый сок';

И еще кое-что. В примере я заполнял массив уже после его создания. Так можно делать, но чаще используется более удобный способ — заполнение массива сразу при создании:

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки'];

console.log('Товар 1', products[0]);
console.log('Товар 3', products[2]);
console.log('Товар 5', products[4]);

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

Теперь вы знаете, что такое массивы, и пришло время узнать о лучшем друге массивов — цикле!

Бесплатный базовый курс по JS

Рассказываем, как работать с переменными, типами данных, функциями и многом другом!

Начать изучение →

Массивы и циклы

Сразу перейду к проблеме. Когда в массиве всего пять элементов, то да, можно обрабатывать его элементы поочередно, обращаясь по индексам. Но что делать, если элементов будет намного больше? В таком случае понадобится более продвинутый подход, например использование цикла. Сразу посмотрим пример.

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки', 'Пирог', 'Пицца', 'Салат'];

for (let i = 0; i < 8; i++) {
    console.log(Товар ${i + 1}: ${products[i]});
}

Уже интереснее, правда? Зная количество элементов в массиве, можно обработать каждый из них с помощью цикла for. А для перемещения по элементам используется переменная-счетчик i.

Почти идеально, но есть одна проблема. В условии цикла число восемь является «магическим» (магическое число — это число, значение которого непонятно без дополнительных комментариев и которое усложняет изменение программы). Это не гибко: если в массиве будет больше или меньше элементов, нужно будет переписывать код. Но проблема решается просто: массив сам может подсказать, сколько в нем элементов, благодаря специальному свойству length.

length — это свойство массива, которое возвращает количество элементов в нем.

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки', 'Пирог', 'Пицца', 'Салат'];
console.log('Длина массива products:', products.length);

Круто, правда? А теперь давайте применим length в нашем примере. Чтобы сделать программу еще интереснее, выведем список товаров на страницу (в DOM-дерево):

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки', 'Пирог', 'Пицца', 'Салат'];
let listEl = document.createElement('ol');

for (let i = 0; i < products.length; i++) {
    let itemEl = document.createElement('li');
    itemEl.textContent = products[i];
    listEl.append(itemEl);
}

document.body.append(listEl);

Теперь массивы любой длины вам не страшны. Обязательно попробуйте использовать циклы с массивами в своем коде. Экспериментируйте! А мы идем дальше.

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

Давайте сделаем наш список товаров еще интереснее, предоставив пользователю возможность самостоятельно добавлять новые товары, кликая по кнопке и вводя названия в окно prompt. Внимательно изучите код такой программы:

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки'];

function pushItem(value) {
    products[products.length] = value;
}

let listEl = document.createElement("ol");

function renderList() {
    listEl.innerHTML = ""; // Очистка списка перед отрисовкой

    for (let i = 0; i < products.length; i++) {
        let itemEl = document.createElement("li");
        itemEl.textContent = products[i];
        listEl.append(itemEl);
    }
}

renderList();

let addItemEl = document.createElement("button");

addItemEl.textContent = "Добавить товар";

addItemEl.onclick = function () {
    let newItem = prompt("Введите название товара:");
    pushItem(newItem);
    renderList();
};

document.body.append(addItemEl, listEl);

Обратите внимание на специальную функцию pushItem, которая отвечает за добавление нового элемента в конец массива.

function pushItem(value) {
    products[products.length] = value;
}

Я специально вынес этот фрагмент кода в отдельную функцию, так как он отвечает строго за одну задачу — добавление нового элемента в конец массива products. Такая задача очень распространена, поэтому в JavaScript есть встроенный метод (функция), которая называется push.

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки'];

products.push('Пирог');
products.push('Пицца');
products.push('Салат');

console.log(products);

Отлично, правда? Вообще у массивов очень много подобных методов для различных задач. Давайте рассмотрим несколько популярных:

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки'];

products.pop(); // Удаляет последний элемент (Яблоки)
products.shift(); // Удаляет первый элемент (Кофе)
products.unshift('Пирог'); // Добавляет элементы в начало (Пирог)

Как видите, возможностей много. О других методах вы узнаете в следующих статьях, а сейчас предлагаю улучшить наш код списка товаров и заменить функцию pushItem на встроенный метод push:

let products = ['Кофе', 'Чай', 'Сок', 'Вода', 'Яблоки'];
let listEl = document.createElement("ol");

function renderList() {
    listEl.innerHTML = ""; // Очистка списка перед отрисовкой

    for (let i = 0; i < products.length; i++) {
        let itemEl = document.createElement("li");
        itemEl.textContent = products[i];
        listEl.append(itemEl);
    }

}

renderList();

let addItemEl = document.createElement("button");

addItemEl.textContent = "Добавить товар";

addItemEl.onclick = function () {
    let newItem = prompt("Введите название товара:");
    products.push(newItem);
    renderList();
};

document.body.append(addItemEl, listEl);

Теперь все будет работать так же, но код стал короче, а его реализация занимает меньше времени. Обязательно попробуйте эти методы на практике и поэкспериментируйте с кодом!

Подводим итоги

Теперь вы знаете о массивах в JavaScript достаточно, чтобы применять их на практике. Мы разобрали основы, научились работать с элементами и познакомились с полезными методами. Но не останавливайтесь на достигнутом — продолжайте изучать JavaScript, пишите собственные примеры и экспериментируйте. А подробнее о массивах я предлагаю посмотреть в моем видео. Удачи и до встречи в следующих статьях!