Создание массива между числами в 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) => { /* Код полифила */ };
}
Ваš код должен стабильно работать в любых условиях.
Производительность: время — дорогой ресурс
Производительность зависит от метода и размера диапазона. Если сомневаетесь, используйте бенчмаркинг и профайлинг: они помогут измерить производительность вашего решения.
Полезные материалы
- Array.from() – JavaScript | MDN — подробное руководство по
Array.from()
в JavaScript на MDN. - Диапазоны в JavaScript: есть ли метод подобный "range()"? – Stack Overflow — обсуждения и решения по созданию числовых диапазонов на Stack Overflow.
- Синтаксис расширения (...) – JavaScript | MDN — детальное руководство по синтаксису расширения JavaScript на MDN.
- Функции высшего порядка :: Eloquent JavaScript — узнайте больше о функциях высшего порядка и их применении при работе с массивами.
- Методы массива – JavaScript.info — подробный обзор методов массивов в JavaScript.
- Учим JavaScript | Codecademy — если вы новичок в JavaScript, начните с этого интерактивного курса.
- Стрелочные функции – JavaScript | MDN — изучите стрелочные функции с помощью данного руководства для упрощения вашего синтаксиса функций.