JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでargumentsオブジェクトを配列に変換する方法｜Array.from()の使い方を解説

JavaScriptの関数内で利用できるargumentsオブジェクトは、関数に渡されたすべての引数を格納する「配列風（array-like）」のオブジェクトです。しかし、これは本物の配列ではないため、sort()やmap()といった配列メソッドをそのまま呼び出すことはできません。

そこで活躍するのがArray.from()メソッドです。Array.from()を使えば、配列風オブジェクトであるargumentsを、簡単に本物の配列へと変換できます。

Array.from()でargumentsを配列に変換する

基本的な使い方は非常にシンプルで、次の1行だけで変換が完了します。

var args = Array.from(arguments);

変換後は通常の配列として扱えるため、sort()をはじめとするあらゆる配列メソッドを自由に利用できるようになります。

コード例

次の例では、関数に渡した複数の引数をArray.from()で配列化し、sort()メソッドで並べ替えて画面に出力しています。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function sortArg() {
            var args = Array.from(arguments);
            return args.sort();
         }
         document.write(sortArg('x', 'y', 'z', '20', '66', '35','john', 'david'));
      </script>
   </body>
</html>

実行結果

20,35,66,david,john,x,y,z

文字列として渡された数値も含め、すべての引数が辞書順（文字コード順）にソートされて出力されます。なお、sort()はデフォルトでは要素を文字列として比較するため、数値を数値の大小で並べ替えたい場合は、args.sort((a, b) => a - b)のように比較関数を指定するとよいでしょう。

その他の変換方法

スプレッド構文を使う（ES2015以降）

モダンなJavaScript環境では、スプレッド構文（...）を使うことで、より簡潔に記述できます。

function sortArg() {
  var args = [...arguments];
  return args.sort();
}

Array.prototype.slice.call()を使う

古いブラウザもサポート対象に含めたい場合は、従来から広く使われている次の書き方が有効です。

var args = Array.prototype.slice.call(arguments);

まとめ

argumentsオブジェクトを配列に変換するには、現在のJavaScriptではArray.from(arguments)またはスプレッド構文[...arguments]を使うのがおすすめです。配列に変換しておけば、sort()・map()・filter()などの便利な配列メソッドをフルに活用でき、引数を柔軟に処理できるようになります。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum