Массивы в JavaScript

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Массивы в JavaScript — это фундаментальные структуры данных, которые представляют собой упорядоченные коллекции элементов, где каждый элемент имеет числовой индекс, начиная с нуля, и которые предоставляют разработчику богатый набор методов для манипуляции данными, включая добавление, удаление, поиск, сортировку, фильтрацию, преобразование и агрегацию элементов. Массивы в JavaScript являются динамическими, то есть их размер может изменяться автоматически при добавлении или удалении элементов, и они могут содержать элементы любых типов одновременно, включая числа, строки, булевы значения, объекты, функции и даже другие массивы, что делает их невероятно гибкими для решения широкого спектра задач. В основе реализации массивов лежат объекты с особым поведением, где ключи являются числовыми индексами, а также присутствует специальное свойство length, которое автоматически обновляется при изменении содержимого массива и всегда равно количеству элементов плюс единица для самого большого числового индекса. Массивы поддерживают итеративные методы, такие как forEach для выполнения действий над каждым элементом, map для преобразования всех элементов в новый массив, filter для создания нового массива с элементами, прошедшими проверку, reduce для свертки массива к одному значению, и многие другие, что делает работу с массивами декларативной и выразительной. В дополнение к этим методам, массивы предоставляют стековые операции push и pop для работы с концом массива, а также shift и unshift для работы с началом, что позволяет использовать массивы как очереди или стеки в зависимости от потребностей приложения. Понимание массивов и их методов является краеугольным камнем эффективного программирования на JavaScript, поскольку они используются повсеместно для хранения списков данных, обработки результатов запросов, управления состояниями и множества других задач в любом приложении, от простых скриптов до сложных фронтенд- и бэкенд-систем.

Сначала — теория (раздел 3 "Данные")

Структуры данных — о разделе → реализация и псевдокод операций → Коллекции в контексте ООП.

Ниже — Array, Map, Set в JavaScript.

массив.push(x)              // в конец, как динамический массив
элемент := массив[i]        // O(1) по индексу

карта.set(ключ, значение)   // Map — хеш-таблица
значение := карта.get(ключ)

Разбор:

• Первая строка показывает добавление в конец массива через push, это базовая операция роста коллекции.
• элемент := массив[i] подчёркивает доступ по индексу за константное время O(1) для плотных массивов.
• карта.set(ключ, значение) демонстрирует API структуры Map для записи пары ключ-значение.
• карта.get(ключ) симметрично извлекает значение по ключу и обычно работает быстрее линейного поиска по массиву.
• В блоке сопоставлены две модели данных: индексная (Array) и ключевая (Map).
• Такой контраст помогает сразу выбрать подходящую структуру под задачу: порядок/позиция против быстрого поиска по ключу.
• Здесь нет исполняемого JS-кода, это концептуальный псевдокод с фокусом на типовых операциях.

Play ITЗагрузка интерактивного демо…

Play ITЗагрузка интерактивного демо…

---

Массивы в JavaScript

В JavaScript коллекциями являются массивы.

Пример:

let collection = [1, 2, 3];

Разбор:

• Объявляется переменная collection со ссылкой на массив из трёх чисел.
• Литерал массива [] сразу задаёт порядок элементов и их индексы — 0, 1, 2.
• Тип элементов в примере однородный (number), что обычно выгодно для производительности движка.
• Поскольку используется let, переменной можно присвоить другой массив позже.
• Массив в JavaScript остаётся объектом, поэтому поддерживает методы push, map, filter и другие.
• Этот пример задаёт базовую отправную точку для всех последующих операций с коллекцией.
• Минимальный фрагмент полезен как "скелет" перед демонстрацией мутаций и итераций.

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

В контексте веб-разработки, создания интерактивных интерфейсов и обработки данных на стороне сервера (Node.js), массивы играют ключевую роль в организации информации. Понимание их внутреннего устройства, возможностей манипулирования и ограничений необходимо для написания эффективного и надежного кода.

---

Природа и устройство массивов

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

Основной признак массива - наличие квадратных скобок []. Прямое обращение к ним происходит по формуле array[index].

Особенностью массивов в JavaScript является их динамический характер. Размер массива не фиксирован при его создании. Вы можете добавить новый элемент в конец массива, удалить существующий или изменить его значение в любой момент времени без необходимости пересоздания структуры или изменения выделения памяти вручную, как это требовалось бы в языках со статической типизацией (например, C++ или Java). Движок браузера или среда выполнения автоматически управляет выделением памяти, расширяя или сжимая пространство под данные по мере необходимости.

Элементы внутри массива нумеруются начиная с нуля. Это называется нулевой базой индексации. Первый элемент имеет индекс 0, второй — индекс 1 и так далее. Если массив содержит N элементов, последний элемент будет иметь индекс N минус 1. Такой подход позволяет легко вычислять адрес любого элемента в памяти, зная смещение относительно начала массива. Отсутствие элемента в массиве приводит к появлению значения undefined при обращении к несуществующему индексу, а не к ошибке выполнения, хотя попытка чтения несуществующего элемента может привести к неожиданным результатам в логике программы.

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

С точки зрения реализации, массивы в современных движках (таких как V8 в Chrome или SpiderMonkey в Firefox) оптимизированы для работы с определенными паттернами доступа. Если массив содержит только числа, движок может использовать специализированные представления данных для ускорения операций. Однако при смешивании типов или добавлении свойств, напоминающих обычные объекты, производительность может снижаться, так как движку приходится переходить к более универсальным механизмам хранения.

---

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

Существует несколько способов создания массивов в JavaScript, каждый из которых имеет свои особенности и области применения.

const config = Object.freeze({
    apiUrl: process.env.API_URL || 'https://api.example.com',
    timeout: parseInt(process.env.TIMEOUT || '5000', 10),
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
    },
    retryCount: maxRetries > 0 ? Math.min(maxRetries, 5) : 0
});

Первый и наиболее распространенный способ — использование литерала массива. Синтаксис этого метода заключается в записи списка значений, разделенных запятыми, внутри квадратных скобок. Этот подход является декларативным, понятным и предпочтительным для большинства случаев. Пример создания массива чисел выглядит следующим образом — [1, 2, 3]. Можно создать массив строк, объектов или смешанных типов — ["apple", "banana", {id: 1}]. Литералы позволяют создавать пустые массивы простым способом [], что часто используется для последующего наполнения данными.

Второй метод — конструктор Array. Он вызывается через оператор new: new Array(). Без аргументов этот конструктор создает пустой массив. Однако использование конструктора с одним числовым аргументом ведет к созданию массива заданной длины, заполненного элементами undefined. Например, new Array(5) создаст массив длиной 5, где все элементы пусты, а не массив [5]. Эта особенность часто становится источником ошибок, поэтому разработчики рекомендуют избегать использования конструктора с единственным числовым параметром и отдавать предпочтение литералам. Конструктор new Array() с несколькими аргументами работает аналогично литералу — new Array(1, 2, 3) создаст массив из трех элементов.

Третий метод — использование статического метода Array.from(). Этот метод преобразует итерируемые объекты (строки, Set, Map) или массивоподобные объекты (объекты с свойством length) в настоящий массив. Это особенно полезно при работе с DOM-элементами, результатами запросов или строками, которые нужно разбить на символы. Например, Array.from("hello") вернет массив ['h', 'e', 'l', 'l', 'o']. Метод также принимает необязательный второй аргумент — функцию маппинга, которая применяется к каждому элементу при создании массива.

Четвертый метод — статический метод Array.of(). Он предназначен для создания массивов из переданных аргументов, избегая неоднозначности конструктора new Array(). Если передать одно число, Array.of(5) создаст массив [5], а не массив длиной 5. Это решение проблемы с конструктором и делает код более предсказуемым.

Пятый метод — использование методов fill() и copyWithin(). Метод fill(value, start, end) заполняет часть массива указанным значением. Это удобно для инициализации массивов одинаковыми элементами. Например, Array(5).fill(0) создаст массив [0, 0, 0, 0, 0]. Метод copyWithin(target, start, end) копирует последовательность элементов внутри самого массива, что позволяет дублировать данные без создания новых структур.

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

---

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

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

---

Сводка операций по типам

Array — упорядоченный список

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

Действие	Метод / синтаксис
Добавить в конец	push(...items)
Добавить в начало	unshift(...items)
Вставить / удалить в середине	splice(start, deleteCount, ...items)
Прочитать	arr[index]
Заменить	arr[index] = value
Удалить с конца	pop()
Удалить с начала	shift()
Копия (поверхностная)	[...arr], arr.slice()
Объединить	arr.concat(other) или [...a, ...b]
Длина	arr.length
Поиск	indexOf, includes, find, findIndex
Фильтр / преобразование	filter, map, reduce
Сортировка / reverse	sort, reverse (мутируют); toSorted, toReversed (ES2023+)

Map — словарь с любыми ключами

Map как словарь с любыми ключами — это встроенная коллекция в JavaScript, которая представляет собой структуру данных, ассоциирующую ключи с соответствующими значениями и позволяющую использовать ключи любого типа, включая объекты, функции, примитивы и даже специальные значения, в отличие от обычных объектов, где ключи могут быть только строками или символами. Map хранит пары ключ-значение в порядке их добавления, что гарантирует детерминированный порядок итерации, который соответствует порядку вставки, и предоставляет удобные методы для работы с этими парами, включая set для добавления или обновления записи, get для получения значения по ключу, has для проверки существования ключа, delete для удаления записи и clear для полной очистки коллекции. Ключевым преимуществом Map является возможность использовать объекты в качестве ключей, что открывает широкие возможности для построения сложных структур данных, например, кешей с ключами в виде сложных объектов, или для связывания данных с DOM-элементами без необходимости хранить идентификаторы или использовать строковые ключи. Map также оптимизирован для частых операций поиска и вставки, обеспечивая предсказуемую производительность, которая не зависит от количества хранимых записей, что делает его предпочтительным выбором для больших коллекций по сравнению с обычными объектами, особенно когда требуется частое добавление и удаление элементов. В отличие от объектов, Map поддерживает итерацию напрямую через встроенные итераторы, такие как entries, keys и values, что позволяет легко перебирать все записи в цикле или преобразовывать их в другие структуры данных, а также свойство size, которое возвращает точное количество записей без необходимости вычислений. Map является неотъемлемой частью современного JavaScript и широко используется в ситуациях, где требуется гибкая и эффективная ассоциативная структура данных с ключами любого типа, особенно в сложных приложениях с динамическими данными, требующих быстрого доступа и манипуляции.

Действие	API
Добавить или заменить	map.set(key, value)
Прочитать	map.get(key)
Удалить	map.delete(key)
Проверить наличие ключа	map.has(key)
Число записей	map.size
Очистить	map.clear()
Перебор	for (const [k, v] of map), map.forEach((v, k) => …)

const usersById = new Map([
  [1, { name: 'Анна' }],
  [2, { name: 'Борис' }],
]);
usersById.set(3, { name: 'Вика' });
console.log(usersById.get(2)?.name); // Борис

Подробнее о выборе Map против объекта — типы данных, Map.

Set — множество уникальных значений

Set как множество уникальных значений — это встроенная коллекция в JavaScript, которая представляет собой структуру данных, предназначенную для хранения уникальных значений любого типа, где каждый элемент может встречаться только один раз, и которая автоматически обеспечивает эту уникальность при добавлении новых элементов, игнорируя дубликаты. Set хранит элементы в порядке их добавления, что гарантирует детерминированный порядок итерации, и предоставляет простой и эффективный набор методов для управления множеством, включая add для добавления нового элемента, has для проверки наличия элемента, delete для удаления элемента и clear для полной очистки коллекции. Основное назначение Set — решение задач, требующих уникальности элементов, таких как удаление дубликатов из массива, проверка наличия элемента в коллекции, вычисление пересечения или разности множеств, и отслеживание уникальных значений в потоке данных, причем все эти операции выполняются с высокой производительностью благодаря внутренней оптимизации хэш-таблиц. В отличие от массивов, где поиск элемента требует перебора всех элементов и имеет линейную сложность, Set обеспечивает поиск с почти константной временной сложностью, что делает его гораздо более эффективным для операций проверки принадлежности в больших коллекциях. Set также поддерживает итерацию через встроенный итератор, позволяя использовать его в циклах for of и преобразовывать обратно в массив с помощью оператора распространения или метода Array.from, что делает его идеальным промежуточным звеном для обработки данных. Set является мощным и часто недооцененным инструментом в арсенале разработчика, который помогает писать более чистый и производительный код при работе с коллекциями, где важна уникальность элементов, и его использование становится все более распространенным в современной практике разработки на JavaScript.

Действие	API
Добавить	set.add(value)
Удалить	set.delete(value)
Проверить наличие	set.has(value)
Число элементов	set.size
Очистить	set.clear()
Перебор	for (const x of set), [...set]

const tags = new Set(['js', 'node', 'js']);
tags.add('web');
console.log(tags.has('node')); // true

Операции над двумя множествами

Операции над двумя множествами — это совокупность математических и теоретико-множественных операций, которые могут быть выполнены над двумя экземплярами Set в JavaScript для получения новых множеств или логических результатов, включая объединение, пересечение, разность, симметричную разность и проверку на подмножество, что позволяет эффективно работать с наборами данных и анализировать их взаимосвязи. Объединение двух множеств представляет собой создание нового множества, которое содержит все уникальные элементы, присутствующие хотя бы в одном из исходных множеств, и может быть реализовано путем добавления всех элементов из обоих множеств в новый Set с использованием оператора распространения или цикла. Пересечение двух множеств создает новое множество, содержащее только те элементы, которые присутствуют одновременно в обоих исходных множествах, и для его построения необходимо перебрать меньшее множество и проверить наличие каждого элемента в большем с использованием метода has. Разность множеств, часто обозначаемая как A без B, создает множество элементов, которые присутствуют в первом множестве, но отсутствуют во втором, и для ее получения следует перебрать первое множество и проверить, не содержит ли второе множество текущий элемент. Симметричная разность представляет собой множество элементов, которые присутствуют ровно в одном из двух множеств, но не в обоих одновременно, и для ее вычисления необходимо объединить две разности или использовать комбинацию операций объединения и пересечения с последующим вычитанием. Проверка на подмножество определяет, все ли элементы одного множества содержатся в другом, и является логической операцией, которая часто используется для валидации данных или проверки соответствия набора требований. Эти операции над множествами являются мощными инструментами для работы с данными в JavaScript, особенно в задачах анализа данных, обработки тегов, фильтрации по набору критериев, управления правами доступа и в любых других сценариях, где требуется сравнение наборов значений без дубликатов.

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);

const union = new Set([...a, ...b]);
const intersection = new Set([...a].filter(x => b.has(x)));
const difference = new Set([...a].filter(x => !b.has(x)));

Задача	Структура
Порядок и индекс	Array
Уникальные значения	Set
Поиск по ключу (строка, число, объект)	Map
Фиксированная запись JSON { id, name }	литерал объекта

"Ассоциативный массив" и объект

Ассоциативный массив — это термин, который в историческом контексте программирования обозначает структуру данных, где элементы доступны не по числовым индексам, а по произвольным ключам, представляющим собой строки или другие значения, что позволяет создавать пары ключ-значение для хранения и извлечения данных, причем в JavaScript эту роль долгое время выполняли обычные объекты, а в современных версиях языка эту функциональность дополняет и улучшает структура Map. Термин ассоциативный массив часто используется как синоним словаря или хэш-таблицы, и его основное отличие от обычного массива заключается в том, что ключи не ограничены числами и не обязаны быть последовательными, что дает разработчику возможность хранить данные в структуре, аналогичной словарю в реальной жизни, где каждому слову соответствует его определение. В JavaScript традиционные объекты с момента появления языка служили реализацией ассоциативных массивов, поскольку они позволяли использовать строковые ключи для доступа к значениям через точечную нотацию или квадратные скобки, однако объекты имели ряд ограничений, таких как наследование свойств из прототипа и невозможность использования нестроковых ключей, что ограничивало их гибкость. С введением Map в стандарт ECMAScript 2015 концепция ассоциативного массива в JavaScript получила полноценную и оптимизированную реализацию, которая лишена недостатков объектов и предоставляет предсказуемое поведение, эффективное использование памяти и строгую семантику для работы с парами ключ-значение. Несмотря на наличие Map, термин ассоциативный массив по-прежнему используется разработчиками для описания любой структуры данных, которая сопоставляет ключи и значения, и часто встречается в учебной литературе и технических обсуждениях, особенно когда речь идет о переносе знаний из других языков программирования, где эта концепция имеет более явное выражение. В повседневной практике разработки на JavaScript разработчики выбирают между объектами и Map в зависимости от конкретных требований, используя объекты для простых случаев с небольшими данными и строковыми ключами, и Map для более сложных сценариев, где требуются ключи любого типа, большое количество данных или частые операции изменения коллекции.

Объект — это фундаментальная структура данных в JavaScript, которая представляет собой коллекцию свойств, где каждое свойство является парой ключ-значение, причем ключи могут быть строками или символами, а значения могут быть любыми типами данных, включая примитивы, функции, другие объекты или массивы, что делает объекты универсальным контейнером для хранения и организации данных в программе. Объекты являются основой объектно-ориентированного программирования в JavaScript и служат строительными блоками для создания сложных структур данных, моделирования реальных сущностей, реализации классов и прототипного наследования, причем каждый объект имеет внутреннюю ссылку на свой прототип, которая позволяет наследовать свойства и методы от других объектов. Свойства объектов могут быть как собственными, определенными непосредственно на самом объекте, так и унаследованными из цепочки прототипов, причем для управления свойствами существует множество встроенных методов, таких как Object.keys для получения списка ключей, Object.values для получения списка значений, Object.entries для получения пар ключ-значение, а также Object.assign и оператор распространения для копирования и слияния объектов. В отличие от Map, объекты оптимизированы для доступа к свойствам по строковым ключам и в большинстве случаев обеспечивают высокую производительность для операций чтения и записи, особенно когда структура данных известна заранее и не изменяется динамически, однако объекты имеют ряд особенностей и ограничений, таких как наследование свойств из прототипа, невозможность использования нестроковых ключей без преобразования и отсутствие гарантированного порядка итерации в старых версиях. Объекты являются сердцем языка JavaScript и используются практически в каждой строке кода, от простых конфигурационных объектов до сложных моделей данных, и понимание их устройства и поведения является обязательным для любого разработчика, работающего с этим языком, независимо от уровня и специализации.

Исторически словарь имитировали обычным объектом или массивом со строковыми ключами. Для динамических ключей и подсчёта записей предпочитают Map — ключом может быть объект, порядок вставки сохраняется, size читается за O(1).

const user = { id: 1, name: 'Анна' };           // фиксированные поля
const cache = new Map();                          // произвольные ключи
cache.set(requestObject, responseData);

Справочник встроенных методов — 251.md#map.

Код ITЗагрузка примера кода…

Доступ к элементу осуществляется путем указания его индекса в квадратных скобках после имени переменной массива. Синтаксис выглядит как array[index]. Если индекс находится в допустимых пределах (от 0 до длины массива минус 1), возвращается значение элемента. Если индекс равен длине массива, доступ возвращает undefined. Отрицательные индексы также поддерживаются и интерпретируются как отсчет с конца массива: -1 указывает на последний элемент, -2 — на предпоследний и так далее. Это удобная возможность для быстрого доступа к концам массива без вычисления индекса вручную.

Запись нового значения производится тем же синтаксисом, но с присваиванием: array[index] = newValue. Если индекс находится в пределах текущего размера массива, старое значение заменяется новым. Если индекс равен длине массива, это эквивалентно добавлению элемента в конец. Если индекс больше длины массива, массив автоматически расширяется, а промежуточные элементы заполняются undefined. Важно помнить, что присвоение значения несуществующему индексу не вызывает ошибку, но может привести к непредвиденному поведению логики программы, если не проверять наличие элемента.

Изменение данных в массиве можно выполнять и с помощью методов, которые модифицируют исходный массив (мутация). Метод push() добавляет один или несколько элементов в конец массива и возвращает новую длину массива. Метод pop() удаляет последний элемент и возвращает его значение. Метод unshift() добавляет элементы в начало массива, сдвигая остальные индексы, и возвращает новую длину. Метод shift() удаляет первый элемент и возвращает его значение. Эти методы изменяют структуру массива непосредственно, что важно учитывать при передаче массивов в функции, так как изменения будут видны во всех ссылках на этот массив. Для UI и state (React и аналоги) чаще берут иммутабельные варианты — [...array, item], slice, toSorted, toSpliced и др.; сводная таблица из девяти пар — в типах данных JS.

Для вставки или удаления элементов в середине массива используются методы splice() и slice(). Метод splice(start, deleteCount, ...items) удаляет элементы, начиная с позиции start, удаляя deleteCount элементов, и затем вставляет новые элементы items. Он возвращает массив удаленных элементов. Метод slice(begin, end) создает новый массив, содержащий часть исходного массива от индекса begin до end (не включая end). В отличие от splice, метод slice не изменяет исходный массив, а возвращает копию. Это полезно для получения срезов данных без риска мутации оригинала.

Также существуют методы для поиска элементов. Метод indexOf(value) возвращает индекс первого вхождения элемента или -1, если элемент не найден. Метод lastIndexOf(value) ищет с конца массива. Метод includes(value) возвращает булево значение, указывающее, присутствует ли элемент в массиве. Метод find(callback) возвращает первое значение, удовлетворяющее условию функции обратного вызова, а findIndex(callback) возвращает его индекс. Метод some(callback) проверяет, выполняется ли условие хотя бы для одного элемента, а every(callback) — для всех элементов.

Прямое изменение длины массива через свойство length также возможно. Установка length в меньшее значение обрезает массив, удаляя элементы с конца. Увеличение length добавляет пустые элементы (undefined) в конец. Это мощный инструмент, но его использование должно быть обосновано, так как оно может привести к потере данных или созданию разреженных массивов.

---

Итерация и обработка коллекций

Итерация — это процесс последовательного перебора элементов коллекции или структуры данных, при котором на каждом шаге выполняется определенная операция над текущим элементом, позволяя программе обрабатывать все элементы по порядку без необходимости знать их количество или внутреннее устройство коллекции. В JavaScript итерация реализована через протоколы итерации, включая итерируемый протокол, который определяет стандартный способ возврата итератора для объекта через метод Symbol.iterator, и протокол итератора, который определяет объект с методом next, возвращающим объект со свойствами value и done, что создает единый универсальный интерфейс для перебора любых структур данных. Множество встроенных структур в JavaScript являются итерируемыми, включая массивы, строки, Map, Set, а также аргументы функций и NodeList в браузере, что позволяет использовать их в циклах for of, операторе распространения, деструктурировании и многих других конструкциях языка, работающих с последовательностями. Для массивов помимо общей итерации через for of или классического цикла for существуют специализированные методы итерации, такие как forEach, который выполняет функцию для каждого элемента, но не возвращает новое значение, и методы map, filter, reduce, которые строят новые структуры данных на основе результатов итерации. Итерация в JavaScript может быть как синхронной, когда каждый следующий элемент получается и обрабатывается последовательно, так и асинхронной, когда в работу вступают асинхронные итераторы и циклы for await of, позволяя перебирать потоки данных, генерируемые асинхронно, например, при работе с сетевыми запросами или файловыми системами. Понимание механизмов итерации является критически важным для эффективной работы с коллекциями данных в JavaScript, поскольку правильный выбор способа итерации влияет на производительность, читаемость кода и его устойчивость к ошибкам, а также позволяет использовать все богатство встроенных методов и операторов языка.

Обработка массивов — это широкий спектр операций и методов, применяемых к массивам в JavaScript для преобразования, фильтрации, агрегации, поиска и модификации их содержимого, что позволяет разработчику эффективно управлять коллекциями данных и выполнять сложные вычисления декларативным и читаемым способом без необходимости писать явные циклы. Обработка массивов основывается на богатом наборе встроенных методов, каждый из которых решает определенную задачу: метод map создает новый массив, применяя заданную функцию к каждому элементу исходного массива, метод filter создает новый массив, содержащий только элементы, удовлетворяющие условию, метод reduce сводит весь массив к одному значению, последовательно применяя функцию свертки, а метод forEach выполняет функцию для каждого элемента, не возвращая нового значения. Для поиска в массивах существуют методы find, который возвращает первый элемент, удовлетворяющий условию, findIndex, возвращающий индекс такого элемента, и includes, проверяющий наличие значения, а также методы indexOf и lastIndexOf для поиска индексов в массивах примитивов. Сортировка и реверсирование массивов выполняется методами sort, который по умолчанию сортирует элементы как строки, но может принимать пользовательскую функцию сравнения для более точного контроля, и reverse, который изменяет порядок элементов на противоположный. Важной частью обработки массивов является их изменение, которое может быть как мутирующим, то есть изменяющим исходный массив, например, push, pop, shift, unshift, splice, sort и reverse, так и немутирующим, создающим новый массив и оставляющим исходный неизменным, что является предпочтительным в функциональном программировании и особенно важно при работе с неизменяемыми состояниями в таких фреймворках, как React. Современные практики обработки массивов делают акцент на использование немутирующих методов и цепочек вызовов, что позволяет строить выразительные пайплайны преобразований, где данные проходят через последовательность операций фильтрации, трансформации и агрегации, превращая необработанные данные в готовый для использования результат с минимальным количеством промежуточных переменных и побочных эффектов.

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

Код ITЗагрузка примера кода…

Метод forEach(callback) выполняет указанную функцию обратного вызова для каждого элемента массива. Функция принимает три аргумента: текущее значение, индекс и сам массив. Этот метод подходит для выполнения побочных эффектов, таких как вывод данных в консоль, обновление DOM или запись в базу данных. Однако forEach не возвращает нового массива и не поддерживает остановку цикла с помощью break или return (возврат из коллбека просто пропускает следующий элемент). Для условий, требующих возврата результата или раннего выхода, лучше использовать другие методы.

Метод map(callback) создает новый массив, заполненный результатами вызова функции обратного вызова для каждого элемента исходного массива. Длина нового массива совпадает с длиной исходного. Этот метод идеален для трансформации данных — например, преобразования списка строк в список чисел, извлечения конкретного поля из объекта или умножения всех элементов на коэффициент. Функция обратного вызова должна возвращать значение, которое попадет в новый массив. Если функция ничего не возвращает, новый массив будет заполнен значениями undefined.

Метод filter(callback) создает новый массив, содержащий только те элементы исходного массива, для которых функция обратного вызова возвращает истинное значение. Это мощный инструмент для фильтрации данных — поиск элементов, соответствующих определенному критерию, исключение дубликатов или выбор записей по состоянию. Как и map, метод filter не изменяет исходный массив.

Метод reduce(callback, initialValue) сводит массив к одному значению. Функция обратного вызова принимает четыре аргумента — накопитель, текущее значение, индекс и массив. На каждой итерации результат предыдущего вызова передается как накопитель для следующего. Начальное значение накопителя можно задать вторым аргументом; если оно не указано, первым элементом массива становится начальное значение, а итерация начинается со второго элемента. Этот метод используется для суммирования чисел, подсчета частоты элементов, построения объектов из массива или создания сложных агрегатов.

Метод reduceRight() работает аналогично reduce, но проходит по массиву справа налево, начиная с последнего элемента. Это полезно, когда порядок обработки влияет на результат, например, при оценке математических выражений или обработке стеков.

Метод some(callback) возвращает true, если хотя бы один элемент массива удовлетворяет условию функции обратного вызова. Метод every(callback) возвращает true, только если все элементы удовлетворяют условию. Эти методы часто используются для валидации данных или проверки состояний.

Метод find(callback) возвращает первое значение, для которого функция обратного вызова возвращает true. Если ни один элемент не подходит, возвращается undefined. Метод findIndex(callback) возвращает индекс такого элемента или -1. Эти методы полезны для поиска конкретных записей без полного прохода по всему массиву, если условие выполняется рано.

Метод flat(depth) создает новый массив с вложенными подмассивами, сплющенными до указанного уровня глубины. По умолчанию глубина равна 1. Это удобно для работы с многомерными массивами, которые могут возникать при сложной структуре данных. Метод flatMap() объединяет map и flat в одном шаге: сначала применяется функция маппинга, затем результат сплющивается на глубину 1.

Метод entries() возвращает итератор, содержащий пары [ключ, значение] для каждого элемента массива. Это позволяет использовать цикл for...of для одновременного доступа к индексу и значению. Метод keys() возвращает итератор ключей (индексов), а values() — итератор значений. Эти методы полезны для продвинутой итерации и совместимости с другими итерируемыми объектами.

---

Работа с сортировкой и поиском

Сортировка элементов массива — частая задача в обработке данных. Метод sort(compareFunction) сортирует элементы массива на месте и возвращает тот же массив. По умолчанию метод сортирует элементы как строки в лексикографическом порядке. Это означает, что числа будут отсортированы неправильно: 10 окажется перед 2, так как сравниваются их строковые представления '10' и '2'. Чтобы обеспечить корректную сортировку чисел, необходимо передать функцию сравнения.

Функция сравнения принимает два аргумента: a и b. Она должна возвращать отрицательное значение, если a должен идти перед b, положительное — если после, и ноль — если они равны. Для сортировки чисел по возрастанию используется функция (a, b) => a - b. Для убывания — (a, b) => b - a. Сортировка строк с учетом регистра также требует настройки: стандартная сортировка учитывает ASCII-коды, где заглавные буквы идут перед строчными. Для игнорирования регистра можно использовать localeCompare.

Метод reverse() разворачивает массив в обратном порядке, меняя местами первый и последний элементы, второй и предпоследний и так далее. Этот метод также изменяет исходный массив.

Поиск элементов в массиве был рассмотрен ранее, но стоит отметить специфику бинарного поиска. Стандартные методы indexOf и includes используют линейный поиск, который проверяет каждый элемент последовательно. Время выполнения составляет O(n). Для больших отсортированных массивов можно реализовать бинарный поиск вручную или использовать библиотеки, но встроенных методов бинарного поиска в стандартной библиотеке JavaScript нет.

Метод toSorted() (ES2023) возвращает новый отсортированный массив, не изменяя исходный. Аналогично, toReversed() разворачивает копию, а toSpliced() заменяет мутационный splice. Полный список пар "мутирующий метод → иммутабельный аналог" — в типах данных JS.

---

Многомерные массивы и структура данных

Многомерные массивы — это структуры данных в JavaScript, которые представляют собой массивы, элементами которых являются другие массивы, создавая тем самым вложенную иерархическую структуру, которая может иметь два, три или более измерений, и которая используется для представления табличных данных, матриц, сеток, координатных систем и любых других данных, требующих организации в виде сетки или более сложной пространственной структуры. Двумерный массив, часто называемый матрицей, представляет собой массив строк, каждая из которых является массивом столбцов, и доступ к элементу осуществляется через два индекса, например, первый индекс указывает на строку, а второй на столбец, что позволяет моделировать таблицы, игровые поля, изображения в оттенках серого и другие структуры данных с двумя измерениями. Трехмерные массивы, расширяющие эту концепцию, добавляют третье измерение, например, глубину или временной слой, и доступ к элементу осуществляется через три индекса, что полезно для представления цветных изображений с каналами RGB, трехмерных игровых миров или серий данных с временной размерностью. В JavaScript многомерные массивы не имеют специального синтаксиса или встроенных методов для своей обработки, и все операции, такие как создание, обход, преобразование и модификация, выполняются с использованием стандартных методов массивов, но с учетом вложенной структуры, что требует использования вложенных циклов или рекурсивных подходов для обхода всех уровней вложенности. Обработка многомерных массивов часто включает операции транспонирования, когда строки и столбцы меняются местами, умножения матриц, поиска путей в сетке, обработки изображений и многих других вычислительных задач, причем для сложных операций разработчики часто прибегают к использованию специализированных библиотек, таких как Math.js или ndarray, которые предоставляют эффективные реализации матричных операций. Несмотря на отсутствие встроенной поддержки, многомерные массивы являются важным инструментом в арсенале JavaScript-разработчика, поскольку они позволяют структурировать и обрабатывать сложные данные естественным образом, а с использованием современных возможностей языка, таких как методы map и reduce с функциями высшего порядка, работа с многомерными массивами может быть выполнена элегантно и декларативно.

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

Код ITЗагрузка примера кода…

Одномерный массив имеет одну размерность и доступен по одному индексу. Двумерный массив — это массив массивов, где каждый элемент является массивом. Доступ к элементу осуществляется двумя индексами: matrix[row][column]. Трехмерные и более высокие измерения возможны аналогичным образом. Однако многомерные массивы в JavaScript не имеют специальной оптимизации для таких структур, и память выделяется разрозненно. Каждый вложенный массив — это отдельный объект с собственным заголовком и выделением памяти.

Использование многомерных массивов требует внимательности при копировании. Операция присваивания массива b = a создает только ссылку на тот же объект. Изменения в b повлияют на a. Для глубокого копирования многомерных массивов требуется рекурсивное копирование или использование методов вроде JSON.parse(JSON.stringify(array)), хотя этот способ имеет ограничения (не работает с функциями, циклическими ссылками, undefined и специальными типами данных). Современные методы, такие как structuredClone(), позволяют безопасно клонировать сложные структуры данных, включая многомерные массивы, сохраняя типы и структуру.

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

---

Производительность и оптимизация

Производительность работы с массивами зависит от типа операций и объема данных. Линейные операции, такие как push, pop, shift, unshift, имеют различную временную сложность. Добавление и удаление в конце массива (push, pop) происходит за O(1), так как не требуется перемещение других элементов. Добавление и удаление в начале массива (unshift, shift) требуют сдвига всех остальных элементов, что занимает O(n).

Итерация по массиву с помощью forEach, map, filter и других методов высокого порядка обычно выполняется быстро, так как они реализованы на уровне движка и оптимизированы. Однако создание новых массивов на каждом шаге (например, цепочка map + filter) может приводить к увеличению нагрузки на сборщик мусора, особенно при работе с большими данными. В таких случаях рекомендуется комбинировать операции или использовать reduce для однократного прохода.

Память, выделяемая для массивов, динамически управляется. При удалении элементов из середины или начала массива освободившаяся память не всегда немедленно возвращается системе, а может оставаться в виде "дыр" (holes). Это не критично для большинства приложений, но может влиять на производительность при частом изменении структуры. Использование методов, которые создают новые массивы (например, filter), также требует дополнительного выделения памяти.

Для оптимизации работы с большими массивами следует избегать вложенных циклов, если это возможно, и использовать встроенные методы. Если требуется частый поиск по элементам, целесообразно использовать структуры данных с быстрым поиском, такие как Set или Map, вместо массива. Метод includes в массиве имеет сложность O(n), тогда как Set.has — O(1).

Также важно учитывать, что массивы в JavaScript — это объекты, и добавление произвольных свойств может замедлить работу движка, так как он переходит от оптимизированных представлений (например, плотных массивов) к общим объектам. Поэтому рекомендуется хранить только числовые индексы в массивах и использовать объекты для хранения дополнительных метаданных.

---

Практическое применение и примеры

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

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

Код ITЗагрузка примера кода…

Пример работы с многомерным массивом для представления игровой карты:

Код ITЗагрузка примера кода…

Пример использования reduce для подсчета суммы зарплат:

const salaries = [3000, 4500, 6000, 7500];
const totalSalary = salaries.reduce((sum, salary) => sum + salary, 0);
console.log(totalSalary); // 21000

---

Практика выбора цикла

Удобное правило выбора (полная шпаргалка — Циклы в JavaScript):

• for — когда нужен индекс и полный контроль, или заранее известно число итераций;
• for...of — когда важны значения массива, строки, Map, Set;
• for...in — только для ключей объекта (для массивов — for...of или методы массива);
• while — когда число итераций заранее неизвестно;
• do...while — когда тело должно выполниться хотя бы один раз.

for (const user of users) {
  if (!user.isActive) {
    continue;
  }
  console.log(user.name);
}

Типичные ошибки:

• бесконечный while из-за забытого изменения счетчика;
• for...in по массиву (можно получить неожиданные ключи);
• await внутри обычного forEach (он не ждет промисы).

См. также:

• Циклы в JavaScript
• Асинхронное программирование в JavaScript
• Выражения и операторы в JavaScript