Преобразование объекта 'arguments' в массив в JavaScript
Быстрый ответ
Чтобы работать с параметрами функции как с элементами массива, воспользуйтесь конструкцией [...arguments]
.
function convertArgs() {
return [...arguments]; // выполняется преобразование в этой строке
}
Обзор объекта arguments
Объект arguments
представляет собой псевдомассив, хранящий аргументы, переданные в функцию. Отличие от обычных массивов состоит в том, что у него отсутствуют присущие им методы, что обуславливает необходимость преобразования его в настоящий массив.
Удивительные возможности остаточных параметров
Средства ES6 предоставили нам остаточные параметры — это удобный способ сгруппировать аргументы функции в массив:
function convertArgsWithRest(...args) {
return args; // Вот и всё. Просто и изящно 😎
}
Указывая ...args
, мы сообщаем, что функция может принимать неопределённое число аргументов, и одновременно преобразуем их в массив.
Преобразование с применением методов Array
Если ваша среда не поддерживает ES6, возможно использование методов Array.prototype
, например, метода "slice":
function convertArgsWithSlice() {
return Array.prototype.slice.call(arguments); // Весьма громоздко, но эффективно
}
Однако учтите, что этот метод может оказаться неоптимальным для высокопроизводительного кода, как об этом сказано в руководстве по оптимизации из библиотеки промисов Bluebird.
Практические решения: Array.from и другие хитрости
Для тех, кто высоко ценит сжатость и ясность кода, идеальным вариантом станет использование Array.from()
:
function convertArgsWithArrayFrom() {
return Array.from(arguments); // Просто и со вкусом.
}
Функция Array.from()
способна преобразовывать в массивы не только обычные объекты, но и псевдомассивы. Некоторые библиотеки, в частности, jQuery, упрощают этот процесс.
Осторожно, ловушки производительности
Некоторые приемы работы с объектом arguments
могут негативно сказаться на скорости выполнения программы:
Array.prototype.concat.apply([], arguments)
может показывать медленную работу из-за создания промежуточных массивов.- Когда требуется быстрое добавление аргументов в массив, рекомендуется использовать
Array.prototype.push.apply(array, arguments)
.
Обращайте внимание также на количество элементов в arguments
, особенно при использовании Array.apply(null, arguments)
, так как это может вызвать нежелательные эффекты.
Когда всё остальное не помогает: циклы вручную
Ручной цикл дает полный контроль над процессом преобразования:
function convertArgsManually() {
var argsArray = [];
for (var i = 0; i < arguments.length; i++) {
argsArray.push(arguments[i]); // Эффективный и отлаженный метод!
}
return argsArray;
}
Несмотря на отсутствие эстетики по сравнению с прочими методами, он обеспечивает предсказуемую производительность.
Для любителей оптимизации
Есть детальные руководства от движка V8 и библиотеки Bluebird для тех, кто ищет способы оптимизации решений, связанных с arguments
:
Написание надежного кода: несколько лучших практик
Среди прочего стоит рассмотреть следующие подходы:
- Везде, где это возможно, старайтесь использовать синтаксис ES6.
Array.from()
станет вашим выбором для написания компактного и совместимого с ES5 кода, несмотря на возможные дополнительные затраты производительности.- Предельно внимательно относитесь к анализу производительности и тестируйте свой код в различных средах для выбора наиболее оптимального способа преобразования.
Визуализация
Представьте объект "arguments" как ряд предметов на конвейере 🏭:
🏭 [Аргумент 0]--->[Аргумент 1]--->[Аргумент 2]--->...
Преобразование их в массив – это как если бы эти предметы укладывались в коробку 📦:
Array.from(arguments); // 🏭 ➡️ 📦
Теперь все аргументы аккуратно упакованы и готовы к дальнейшей обработке! 🎉
📦 [Аргумент 0, Аргумент 1, Аргумент 2, ...]
Полезные материалы
- Array.from() – JavaScript | MDN — Официальная документация MDN по методу
Array.from()
. - Как преобразовать объект "arguments" в массив в JavaScript? – Stack Overflow — Детальное обсуждение способов преобразования.
- Объект arguments – JavaScript | MDN — Энциклопедическая справка от MDN по объекту
arguments
. - Синтаксис расширения (...) – JavaScript | MDN — Здесь вы найдете всё о синтаксисе расширения в JavaScript.
- ECMAScript 2015 Language Specification – ECMA-262, 6-е издание — Официальная спецификация ECMAScript 2015.
- Подробно об ES6: Остаточные параметры и значения по умолчанию – Mozilla Hacks — Обстоятельный разбор остаточных параметров в ES6.