Коллекции данных в JavaScript: массивы и объекты

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

Это означает, что первый элемент массива хранится под индексом 0, второй — под индексом 1, третий — под индексом 2, и так далее. Такая система, называемая «zero-based indexing» (индексация с нуля), является стандартом в большинстве языков программирования, включая JavaScript, C++, Java и Python.

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

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

let fruits = ['Яблоко', 'Апельсин', 'Груша'];
let mixedData = ['Текст', 42, true, null];

Использование конструктора new Array() — это еще один способ создания массива, но он может привести к неожиданностям, особенно с одним числовым аргументом, поэтому его лучше избегать.

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

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

let colors = ['Красный', 'Зеленый', 'Синий'];
console.log(colors[0]); // Выведет: Красный
console.log(colors[2]); // Выведет: Синий

// Изменение элемента
colors[1] = 'Желтый';
console.log(colors); // Выведет: ['Красный', 'Желтый', 'Синий']

Свойство length указывает на количество элементов в массиве и часто используется для доступа к последнему элементу.

let scores = [98, 75, 85];
let lastScore = scores[scores.length - 1]; // Получим 85

Добавление и удаление элементов

Для работы с концом массива предназначены методы push() и pop(), а для работы с началом массива методы shift() и unshift().

let taskList = ['Позвонить', 'Написать отчет'];
taskList.push('Отправить письмо'); // Добавит в конец
console.log(taskList); // ['Позвонить', 'Написать отчет', 'Отправить письмо']

let lastTask = taskList.pop(); // Удалит последний элемент и вернет его
console.log(lastTask); // 'Отправить письмо'
console.log(taskList); // ['Позвонить', 'Написать отчет']

// Удаление первого элемента массива
let firstTask = taskList.shift(); // Удалит первый элемент и вернет его
console.log(firstTask); // 'Позвонить'
console.log(taskList); // ['Написать отчет']

// Добавление элементов в начало массива
taskList.unshift('Подготовить презентацию', 'Созвониться с командой');
console.log(taskList); // ['Подготовить презентацию', 'Созвониться с командой', 'Написать отчет']

// Методы для работы с началом и концом массива:
// push() - добавляет элемент(ы) в конец
// pop() - удаляет последний элемент
// unshift() - добавляет элемент(ы) в начало
// shift() - удаляет первый элемент

Для вставки или удаления элементов в любом месте массива используется мощный метод splice().

let numbers = [10, 20, 40, 50];
// Начиная с индекса 2, удалить 0 элементов и вставить 30
numbers.splice(2, 0, 30);
console.log(numbers); // [10, 20, 30, 40, 50]

Поиск и сортировка

Найти элемент или его индекс помогают методы find(), indexOf() и lastIndexOf().

let products = ['Хлеб', 'Молоко', 'Сыр', 'Молоко'];
let milkIndex = products.indexOf('Молоко'); // 1
let lastMilkIndex = products.lastIndexOf('Молоко'); // 3

let found = products.find(item => item === 'Сыр'); // 'Сыр'

Методы sort() и reverse() меняют порядок элементов в массиве.

let letters = ['d', 'a', 'c', 'b'];
letters.sort();
console.log(letters); // ['a', 'b', 'c', 'd']
letters.reverse();
console.log(letters); // ['d', 'c', 'b', 'a']

Их удобно представлять в виде таблицы или матрицы, где первый индекс — это строка, а второй — столбец.

// Двумерный массив (матрица 3x3)
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Получить элемент из второй строки, третьего столбца
let value = matrix[1][2]; // 6
console.log(value);

Они идеально подходят для описания сущностей из реального мира, у которых есть набор характеристик (свойств).

let book = {
    title: 'Гарри Поттер',
    author: 'Дж. К. Роулинг',
    year: 1997,
    isAvailable: true
};

Доступ к свойствам

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

console.log(book.title); // 'Гарри Поттер'
console.log(book['author']); // 'Дж. К. Роулинг'

// Квадратные скобки полезны, когда имя свойства хранится в переменной
let propName = 'year';
console.log(book[propName]); // 1997

Свойства можно изменять, добавлять и удалять динамически.

book.year = 1998; // Изменение свойства
book.pages = 320; // Добавление нового свойства
delete book.isAvailable; // Удаление свойства

Массивы объектов

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

let users = [
    { id: 1, name: 'Анна', role: 'admin' },
    { id: 2, name: 'Иван', role: 'user' },
    { id: 3, name: 'Мария', role: 'editor' }
];

// Получить имя второго пользователя
console.log(users[1].name); // 'Иван'

Объекты с массивами и вложенными объектами

Объект может содержать массивы в качестве значений свойств, а также другие объекты.

let company = {
    name: 'ТехноПрогресс',
    departments: ['Разработка', 'Маркетинг', 'Поддержка'],
    address: {
        city: 'Москва',
        street: 'Ленина',
        building: 15
    }
};

// Доступ к данным
console.log(company.departments[0]); // 'Разработка'
console.log(company.address.city); // 'Москва'

Такая гибкость позволяет строить деревья данных любой сложности, что является основой для работы с JSON, API и состоянием современных веб-приложений.

Работа с коллекцией данных

Дан следующий массив:

const itemList = ['Алиса', 'Боб', false, 42, null, undefined, {key: 'value', points: 75}, ['яблоко', 'банан']];

Задача

Используя методы массива, включая pop(), push(), shift(), unshift(), а также прямой доступ к элементам по индексу, преобразуйте исходный массив в следующий вид:

["НАЧАЛО", "Боб", "ЦЕНТР", "Приветствия!", "КОНЕЦ"]

Алгоритм преобразования

1. Удалите первый элемент и последний элемент из массива.
2. Добавьте "НАЧАЛО" в начало массива.
3. Присвойте "Приветствия!" четвертой позиции в новом массиве.
4. Присвойте "ЦЕНТР" третьему индексу массива.
5. Добавьте "КОНЕЦ" в конец массива.
6. Выведите финальный массив в консоль.

Готовы превратить теорию в практику? Знание массивов и объектов — это мощный фундамент, но JavaScript таит в себе гораздо больше возможностей. Если вы хотите не просто изучать фрагменты, а освоить язык комплексно — от основ до продвинутых концепций вроде асинхронного программирования и работы с фреймворками — приглашаем на наш онлайн-курс «Обучение JavaScript с нуля до профи». Под руководством опытных разработчиков вы создадите реальные проекты для портфолио и систематизируете знания, которые сразу можно применять в работе. А если вам нужен не просто навык, а готовый, современный и эффективный сайт для бизнеса — наша веб-студия готова воплотить ваши идеи. Оставьте заявку, нажав кнопку ниже, и мы разработаем решение, которое будет решать ваши задачи и радовать пользователей.