5 способов создания массивов с последовательными числами в JavaScript

Для кого эта статья:

• JavaScript-разработчики, начинающие и средние, желающие улучшить свои навыки
• Студенты и новички в программировании, стремящиеся понять основы работы с массивами в JavaScript

• Опытные разработчики, интересующиеся сравнениями различных подходов к созданию массивов и производительности методов

  Создание массивов с последовательными числами — задача, с которой рано или поздно сталкивается каждый JavaScript-разработчик. Необходимость заполнить массив числами от 1 до N может возникнуть при работе с пагинацией, генерации тестовых данных или визуализации диаграмм. Интересно, что для решения этой, казалось бы, простой задачи существует как минимум пять принципиально разных подходов — от классического цикла for до элегантных функциональных решений с использованием современных методов массивов. 🚀 Разберем каждый способ с кодом, сравним производительность и выясним, какой метод эффективнее в различных ситуациях.

Хотите уверенно создавать не только числовые массивы, но и полноценные веб-приложения? На курсе Обучение веб-разработке от Skypro вы пройдете путь от основ JavaScript до разработки сложных интерактивных интерфейсов. Наши студенты не просто изучают синтаксис — они решают реальные задачи под руководством действующих разработчиков. Уже через 3 месяца вы сможете создавать собственные проекты с нуля! Никаких скучных лекций — только практика и реальные навыки.

Что такое числовые массивы и зачем они нужны в JavaScript

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

Массивы с числами от 1 до N встречаются во множестве сценариев разработки:

• Создание элементов пагинации (1, 2, 3, ... N страниц)
• Генерация числовых меток для диаграмм и графиков
• Моделирование последовательностей для алгоритмов
• Создание тестовых наборов данных
• Реализация игровой логики (например, номера ячеек в играх)

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

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

Алексей Петров, ведущий JavaScript-разработчик

Помню свой первый проект — интерактивную карту с тысячами маркеров. Каждый маркер имел уникальный ID от 1 до N. Я использовал цикл for для генерации массива идентификаторов, но код быстро стал громоздким, когда потребовалось фильтровать и трансформировать эти значения. Переход на функциональные методы вроде Array.from() с маппингом не только сократил код в три раза, но и сделал его понятнее для команды. Когда новичок присоединился к проекту, он без проблем разобрался, что происходит, глядя на один-единственный метод вместо многострочной логики с циклами и временными переменными.

Создание массива с помощью цикла for в JavaScript

Классический подход к созданию массива с числами от 1 до N использует цикл for. Это наиболее понятный и универсальный метод, подходящий для разработчиков любого уровня и работающий во всех браузерах без исключения.

Базовая реализация выглядит следующим образом:

function createArrayWithFor(n) {
const result = [];
for (let i = 1; i <= n; i++) {
result.push(i);
}
return result;
}

// Пример использования:
const numbers = createArrayWithFor(5); // [1, 2, 3, 4, 5]

Этот метод интуитивно понятен даже начинающим программистам: мы создаём пустой массив, а затем последовательно добавляем в него числа от 1 до N с помощью метода push(). Преимущество такого подхода — явное управление процессом заполнения массива и возможность легко модифицировать логику генерации.

Существуют различные вариации этого метода:

• Использование цикла for с предварительным созданием массива заданного размера
• Применение цикла while вместо for
• Использование do-while для гарантированного выполнения хотя бы одной итерации

Например, вариант с предварительным созданием массива нужного размера:

function createArrayWithPreallocatedSize(n) {
const result = new Array(n);
for (let i = 0; i < n; i++) {
result[i] = i + 1;
}
return result;
}

Этот подход может быть немного эффективнее для больших массивов, так как избавляет JavaScript-движок от необходимости динамически изменять размер массива при каждом вызове push().

Преимущества и недостатки метода с использованием цикла for:

Цикл for остаётся надёжным инструментом для создания числовых массивов, особенно когда требуется максимальная производительность или когда логика формирования массива выходит за рамки простого заполнения последовательными числами. 🔄

Использование Array.from() для генерации последовательности

Array.from() — мощный метод, добавленный в ES6, специально предназначенный для создания новых массивов из итерируемых объектов или объектов, подобных массивам. Он предлагает элегантный способ создания числовых последовательностей с помощью функции маппинга.

Базовый синтаксис метода:

Array.from(arrayLike, mapFn, thisArg)

Для создания массива чисел от 1 до N мы можем использовать следующий подход:

function createArrayWithArrayFrom(n) {
return Array.from({ length: n }, (_, i) => i + 1);
}

// Пример использования:
const numbers = createArrayWithArrayFrom(5); // [1, 2, 3, 4, 5]

Здесь мы создаём объект с одним свойством length, что делает его "массивоподобным". Затем Array.from() преобразует этот объект в настоящий массив, применяя функцию маппинга к каждому элементу. Поскольку изначально элементы не определены (undefined), мы игнорируем первый параметр функции маппинга (обозначая его подчёркиванием _) и используем только индекс i, добавляя к нему 1 для получения нужной последовательности.

Этот метод особенно удобен, когда требуется не просто последовательность чисел, а некоторая трансформация каждого элемента. Например, если нам нужен массив квадратов чисел от 1 до N:

// Массив квадратов чисел от 1 до N
const squares = Array.from({ length: 5 }, (_, i) => (i + 1) ** 2);
// [1, 4, 9, 16, 25]

// Массив чётных чисел от 2 до 2N
const evenNumbers = Array.from({ length: 5 }, (_, i) => (i + 1) * 2);
// [2, 4, 6, 8, 10]

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

Мария Соколова, тимлид фронтенд-команды

В нашем проекте по визуализации данных мы часто генерировали последовательности для осей графиков. Раньше мы использовали разные подходы, и код был непоследовательным: где-то циклы for, где-то самописные функции. Когда я ввела стандарт на использование Array.from() для всех таких задач, это не только сократило объём кода, но и значительно упростило его поддержку. Новые разработчики быстро понимали закономерности и легко вносили изменения. А когда потребовалось добавить кастомную логику генерации меток — например, пропускать определённые значения или добавлять префиксы — функция маппинга в Array.from() позволила сделать это элегантно, без дублирования кода.

Преимущества Array.from() особенно заметны при работе в функциональном стиле программирования, когда мы стремимся избегать изменяемого состояния и побочных эффектов. 🌟 Метод создаёт новый массив без изменения существующих данных, что делает код более предсказуемым и тестируемым.

Обратите внимание на совместимость: Array.from() доступен во всех современных браузерах, но может потребоваться полифилл для поддержки IE11 и более ранних версий.

Применение Array.fill().map() для числового массива

Еще один популярный функциональный подход к созданию массива с числами от 1 до N — использование комбинации методов fill() и map(). Этот метод появился благодаря введению новых функций массива в ES6 и представляет элегантное цепочное решение.

Базовая реализация выглядит так:

function createArrayWithFillMap(n) {
return new Array(n).fill(0).map((_, index) => index + 1);
}

// Пример использования:
const numbers = createArrayWithFillMap(5); // [1, 2, 3, 4, 5]

Процесс создания массива происходит в три этапа:

1. Создаем новый массив заданной длины с помощью конструктора Array(n)
2. Заполняем его начальными значениями с помощью метода fill() — обычно используется 0 или null
3. Трансформируем каждый элемент с помощью map(), преобразуя в нужное значение на основе индекса

Этот подход особенно интересен тем, что демонстрирует цепочку методов (method chaining) — популярную технику в современном JavaScript. Вместо сохранения промежуточных результатов в переменных, мы последовательно применяем методы, что делает код более компактным.

Важно понимать, почему шаг с fill() необходим: когда мы создаем массив с помощью new Array(n), мы получаем массив с пустыми слотами (empty slots), а не с элементами undefined. Метод map() пропускает пустые слоты, поэтому без предварительного заполнения с помощью fill() трансформация не сработает как ожидается.

Этот метод можно легко модифицировать для более сложных последовательностей:

// Создание массива с числами от 5 до N+5
const startFrom5 = new Array(5).fill(0).map((_, i) => i + 5);
// [5, 6, 7, 8, 9]

// Создание массива со значениями, кратными 10
const multiplesOf10 = new Array(5).fill(0).map((_, i) => (i + 1) * 10);
// [10, 20, 30, 40, 50]

Сравнение метода fill().map() с другими подходами:

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

Продвинутые методы работы с массивами от 1 до N в JavaScript

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

1. Использование метода keys() с spread-оператором:

function createArrayWithKeys(n) {
return [...Array(n).keys()].map(x => x + 1);
}

// Пример использования:
const numbers = createArrayWithKeys(5); // [1, 2, 3, 4, 5]

Метод keys() возвращает итератор по ключам массива (то есть индексам), а spread-оператор (...) преобразует итератор в массив. Так мы получаем массив с числами от 0 до n-1, который затем трансформируем с помощью map() для получения последовательности от 1 до n.

2. Использование рекурсии для создания массива:

function createArrayRecursive(n, acc = []) {
if (n <= 0) return acc;
return createArrayRecursive(n – 1, [n, ...acc]);
}

// Пример использования:
const numbers = createArrayRecursive(5); // [1, 2, 3, 4, 5]

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

3. Использование генератора и spread-оператора:

function* rangeGenerator(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}

function createArrayWithGenerator(n) {
return [...rangeGenerator(1, n)];
}

// Пример использования:
const numbers = createArrayWithGenerator(5); // [1, 2, 3, 4, 5]

Генераторы — мощный инструмент для работы с последовательностями в JavaScript. Они позволяют "лениво" вычислять значения, что может быть полезно при работе с большими диапазонами. Spread-оператор преобразует генератор в массив со всеми значениями.

4. Использование метода reduce() для построения массива:

function createArrayWithReduce(n) {
return Array(n).fill(0).reduce((acc, _, i) => [...acc, i + 1], []);
}

// Пример использования:
const numbers = createArrayWithReduce(5); // [1, 2, 3, 4, 5]

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

5. Использование Array.prototype для создания пользовательского метода:

// Расширение прототипа Array (используйте с осторожностью)
Array.prototype.range = function(start, end) {
return Array.from({ length: end – start + 1 }, (_, i) => i + start);
};

// Пример использования:
const numbers = Array.range(1, 5); // [1, 2, 3, 4, 5]

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

• Для небольших массивов (до 100 элементов) разница в производительности между методами незначительна
• При работе с большими массивами (10,000+ элементов) цикл for обычно самый быстрый
• Функциональные методы часто предпочтительнее из-за читаемости и выразительности
• При расширении прототипов будьте осторожны с именованием, чтобы избежать конфликтов
• Выбирайте метод, который лучше всего подходит для конкретной задачи и стиля кодирования вашей команды

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

Выбор метода создания массива чисел от 1 до N зависит от контекста и личных предпочтений. Для небольших проектов подойдет любой способ, но в крупных командных разработках стоит придерживаться консистентности. Классический цикл for предлагает максимальную производительность, Array.from() обеспечивает лучшую читаемость, а fill().map() хорошо интегрируется с цепочками методов. Важнее всего — понимать принципы работы каждого метода и осознанно делать выбор, учитывая требования проекта. Какой бы подход вы ни выбрали, помните: хороший код — тот, который решает задачу и остается понятным для других разработчиков.