Преобразование объекта '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:

• Препятствия на пути оптимизации – Bluebird
• Советы по оптимизации от V8 – Документация V8

Написание надежного кода: несколько лучших практик

Среди прочего стоит рассмотреть следующие подходы:

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

Визуализация

Представьте объект "arguments" как ряд предметов на конвейере 🏭:

🏭 [Аргумент 0]--->[Аргумент 1]--->[Аргумент 2]--->...

Преобразование их в массив – это как если бы эти предметы укладывались в коробку 📦:

Array.from(arguments); // 🏭 ➡️ 📦

Теперь все аргументы аккуратно упакованы и готовы к дальнейшей обработке! 🎉

📦 [Аргумент 0, Аргумент 1, Аргумент 2, ...]

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

1. Array.from() – JavaScript | MDN — Официальная документация MDN по методу Array.from().
2. Как преобразовать объект "arguments" в массив в JavaScript? – Stack Overflow — Детальное обсуждение способов преобразования.
3. Объект arguments – JavaScript | MDN — Энциклопедическая справка от MDN по объекту arguments.
4. Синтаксис расширения (...) – JavaScript | MDN — Здесь вы найдете всё о синтаксисе расширения в JavaScript.
5. ECMAScript 2015 Language Specification – ECMA-262, 6-е издание — Официальная спецификация ECMAScript 2015.
6. Подробно об ES6: Остаточные параметры и значения по умолчанию – Mozilla Hacks — Обстоятельный разбор остаточных параметров в ES6.