Карта сайта

Урок 11: Массивы в JavaScript’е (создание, доступ, методы push, pop, shift, unshift)

/Уроки по JavaScript/Урок 11: Массивы в JavaScript’е (создание, доступ, методы push, pop, shift, unshift)
Урок 11: Массивы в JavaScript’е (создание, доступ, методы push, pop, shift, unshift)
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы погрузимся в одну из самых важных тем в JavaScript, это массивы. Если вы раньше работали со списками или коллекциями данных в других языках, то здесь многое покажется знакомым. Я подробно объясню каждую деталь, приведу примеры и задачи, чтобы вы точно разобрались.

Массивы это структуры данных, которые позволяют хранить множество значений в одной переменной. Представьте, что у вас есть список покупок: вместо создания 10 отдельных переменных для каждого продукта вы можете объединить их в один массив. Удобно, правда?

Давайте начнём с основ.

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

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

Массив это упорядоченная коллекция элементов. Каждый элемент имеет свой индекс (порядковый номер), который начинается с 0. Элементами массива могут быть любые типы данных: числа, строки, объекты, другие массивы и даже функции.

Как создать массив?

Есть два основных способа:

1. Литеральная нотация (рекомендуется)

let fruits = ['Яблоко', 'Банан', 'Апельсин'];

2. Конструктор new Array()

let numbers = new Array(1, 2, 3, 4, 5);

Если передать в new Array() одно число (например, new Array(5)), создастся пустой массив с длиной 5. Это может привести к ошибкам, поэтому лучше использовать литеральную нотацию.

Заполнение массивов

Вы можете добавлять элементы при создании или позже:

let colors = []; // Пустой массив  
colors[0] = 'Красный';  
colors[1] = 'Зелёный';

Массивы также могут содержать разные типы данных:

let mixed = [42, 'Привет', true, { name: 'Максим' }, [1, 2, 3]];

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

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

let fruits = ['Яблоко', 'Банан', 'Апельсин'];  
console.log(fruits[0]); // 'Яблоко'  
console.log(fruits[2]); // 'Апельсин'

Изменение элементов

Массивы изменяемы, вы можете обновлять их элементы:

fruits[1] = 'Груша';  
console.log(fruits); // ['Яблоко', 'Груша', 'Апельсин']

Длина массива

Свойство length возвращает количество элементов:

console.log(fruits.length); // 3

Последний элемент массива всегда имеет индекс length - 1.

Основные методы массивов

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

1. .push()

Добавляет элемент в конец массива. Возвращает новую длину массива.

let animals = ['Кот', 'Собака'];  
animals.push('Попугай');  
console.log(animals); // ['Кот', 'Собака', 'Попугай']

2. .pop()

Удаляет последний элемент массива. Возвращает удалённый элемент.

let removedAnimal = animals.pop();  
console.log(removedAnimal); // 'Попугай'  
console.log(animals); // ['Кот', 'Собака']

3. .unshift()

Добавляет элемент в начало массива. Возвращает новую длину.

animals.unshift('Хомяк');  
console.log(animals); // ['Хомяк', 'Кот', 'Собака']

4. .shift()

Удаляет первый элемент массива. Возвращает удалённый элемент.

let firstAnimal = animals.shift();  
console.log(firstAnimal); // 'Хомяк'  
console.log(animals); // ['Кот', 'Собака']

Аналогия:
Представьте массив как стопку книг.

  • .push() — кладёте книгу сверху.
  • .pop() — забираете верхнюю книгу.
  • .unshift() — подкладываете книгу снизу (редко используется).
  • .shift() — забираете нижнюю книгу.

Практические задачи

Задача 1: Создание и модификация массива

  1. Создайте массив cars с элементами: ‘BMW’, ‘Audi’, ‘Tesla’.
  2. Добавьте в конец ‘Mercedes’ с помощью .push().
  3. Удалите первый элемент с помощью .shift().
  4. Добавьте ‘Volvo’ в начало массива с помощью .unshift().
  5. Выведите итоговый массив в консоль.

Решение:

let cars = ['BMW', 'Audi', 'Tesla'];  
cars.push('Mercedes');  
cars.shift();  
cars.unshift('Volvo');  
console.log(cars); // ['Volvo', 'Audi', 'Tesla', 'Mercedes']

Задача 2: Управление списком задач

Создайте массив tasks и реализуйте функции:

  • addTask(task) — добавляет задачу в конец.
  • completeLastTask() — удаляет последнюю задачу и возвращает её.
  • urgentTask(task) — добавляет задачу в начало.

Пример использования:

let tasks = ['Полить цветы', 'Купить хлеб'];  
addTask('Позвонить маме');  
urgentTask('Срочно: оплатить счёт');  
console.log(completeLastTask()); // 'Позвонить маме'  
console.log(tasks); // ['Срочно: оплатить счёт', 'Полить цветы', 'Купить хлеб']

Решение:

function addTask(task) {  
  tasks.push(task);  
}  

function completeLastTask() {  
  return tasks.pop();  
}  

function urgentTask(task) {  
  tasks.unshift(task);  
}

Частые вопросы

Почему индексы начинаются с нуля?

Это историческое решение, связанное с работой с памятью в низкоуровневых языках. В JavaScript это стандарт, к которому просто нужно привыкнуть.

Что вернёт pop(), если массив пуст?

Он вернёт undefined. Всегда проверяйте длину массива перед использованием методов удаления!

Заключение

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

Если что-то осталось непонятным, перечитайте примеры или напишите вопрос в комментариях. Даже опытные разработчики иногда путают push и unshift!

Полный курс по JavaScript для начинающих доступен здесь: JavaScript для начинающих