Создание массива между числами в JavaScript и jQuery

Быстрый ответ: самый эффективный вариант

Используйте спред-оператор (оператор расширения) и Array.keys. Это просто и быстро:

const range = (start, end) => [...Array(end – start + 1).keys()].map(n => n + start);
const result = range(3, 8); // [3, 4, 5, 6, 7, 8]

Функция range работает очень быстро!

Альтернативные подходы

Lodash и Underscore: помощники в написании кода

Воспользуйтесь lodash или underscore для более лаконичного и удобного кода, как если бы вы работали с опытным коллегой:

// Lodash
const lodashRange = _.range(5, 11); // Lodash передаёт все числа от 5 до 11

// Underscore
const underscoreRange = _.range(5, 11); // Underscore умеет то же самое

Эти инструменты предлагают дополнительное удобство, например, создание диапазонов с фиксированным шагом.

Подробнее об этом расскажет наш спикер на видео

Работа с большими диапазонами: обработка больших массивов

Если вам приходится работать с большими диапазонами, цикл while поможет обработать нагрузку без создания излишнего объёма в памяти:

const rangeLarge = (start, end) => {
  let result = [];
  let num = start;
  while (num <= end) {
    result.push(num++);
  }
  return result;
};

Хороший вариант, чтобы не перегружать память.

Диапазоны в обратном порядке и с шагом

Используйте npm-пакет range-inclusive, чтобы расширить ваш набор инструментов для решения разной сложности задач:

const inclusiveRange = require('range-inclusive');
// Формирование диапазона в обратном порядке
const backward = inclusiveRange(10, 5); // [10, 9, 8, 7, 6, 5]
// Формирование диапазона с шагом
const steps = inclusiveRange(2, 10, 2); // [2, 4, 6, 8, 10]

Эти инструменты значительно облегчают процесс разработки.

Визуализация: пример создания массива

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

Начало: 🏝️ (5)
Конец: 🏝️ (10)

Можно визуализировать каждый шаг:

🏝️ [5]⬜[6]⬜[7]⬜[8]⬜[9]⬜[10] 🏝️

Так формируется массив:

const createRange = (start, end) => Array.from({ length: (end – start + 1) }, (_, i) => start + i);

В итоге мы получаем готовый к использованию массив!

Мост: [5, 6, 7, 8, 9, 10] // Путь проложен

Теперь этот массив готов к дальнейшему использованию.

Письмо безупречного кода: что следует учесть

Обработка ошибок: предохранитель вашего кода

Мы должны предусмотреть обработку ошибок, если начальное число больше конечного:

if (start > end) {
  // Коду нужна инструкция, как действовать!
  throw new RangeError("Начальное значение должно быть меньше или равно конечному");
}

Полифилы: внимание на поддержку браузерами

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

// Например, простой полифил
if (!Array.from) {
  Array.from = (arr) => { /* Код полифила */ };
}

Ваš код должен стабильно работать в любых условиях.

Производительность: время — дорогой ресурс

Производительность зависит от метода и размера диапазона. Если сомневаетесь, используйте бенчмаркинг и профайлинг: они помогут измерить производительность вашего решения.

Полезные материалы

1. Array.from() – JavaScript | MDN — подробное руководство по Array.from() в JavaScript на MDN.
2. Диапазоны в JavaScript: есть ли метод подобный "range()"? – Stack Overflow — обсуждения и решения по созданию числовых диапазонов на Stack Overflow.
3. Синтаксис расширения (...) – JavaScript | MDN — детальное руководство по синтаксису расширения JavaScript на MDN.
4. Функции высшего порядка :: Eloquent JavaScript — узнайте больше о функциях высшего порядка и их применении при работе с массивами.
5. Методы массива – JavaScript.info — подробный обзор методов массивов в JavaScript.
6. Учим JavaScript | Codecademy — если вы новичок в JavaScript, начните с этого интерактивного курса.
7. Стрелочные функции – JavaScript | MDN — изучите стрелочные функции с помощью данного руководства для упрощения вашего синтаксиса функций.