関数のすべての引数をその関数内の単一のオブジェクトとして取得することは可能ですか?


回答:


346

を使用しargumentsます。配列のようにアクセスできます。arguments.length引数の数に使用します。


46
これは従来のJavaScript functionでのみ機能し、ES2015 +ファットアロー=>機能では機能しません。それらについては、次の...argsように関数定義で使用します(...args) => console.log(args)
Sawtaytoes 2017

141

引数があるアレイ状のオブジェクト(ない実際の配列)。関数の例...

function testArguments () // <-- notice no arguments specified
{
    console.log(arguments); // outputs the arguments to the console
    var htmlOutput = "";
    for (var i=0; i < arguments.length; i++) {
        htmlOutput += '<li>' + arguments[i] + '</li>';
    }
    document.write('<ul>' + htmlOutput + '</ul>');
}

やってみよう...

testArguments("This", "is", "a", "test");  // outputs ["This","is","a","test"]
testArguments(1,2,3,4,5,6,7,8,9);          // outputs [1,2,3,4,5,6,7,8,9]

詳細:https : //developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments


3
ここにも結果を投稿してみませんか?:)
ジョナサンアズレイ2013

2
有効なコードスニペットが含まれ、出力が表示されるため、これは承認された回答よりもはるかに優れています。受け入れられた答えはまばらです。
Mac

良い答え...「実際の配列ではない」を拡張すると良い答えになります
terpinmd

簡単な説明へのリンクを追加しました。「配列のようなオブジェクト」は、単に「負でない整数の長さプロパティと、通常いくつかのインデックス付きプロパティを持つオブジェクト」です。mozillaリンクから:「これは配列に似ていますが、長さを除いて配列プロパティはありません。」
ルーク

31

ES6では、関数の引数が次のような「...」表記で指定されている構文を使用できます。

function testArgs (...args) {
 // Where you can test picking the first element
 console.log(args[0]); 
}

3
これは、矢印関数を使用する場合の唯一の方法のようです。a = () => {console.log(arguments);}; a('foo');与え-- Uncaught ReferenceError: arguments is not defined しかしa = (...args) => {console.log(args);}; a('foo');与えます["foo"]
デヴィッドBaucum

1
正しい@DavidBaucum。アロー関数は新しいスコープを作成せず、「引数」はスコープから収集されるためです。ただし、最悪のシナリオはReferenceErrorではありません。「引数」は外部スコープから収集されるということです。その後、例外は発生せず、アプリケーションに奇妙なバグが発生する可能性があります。
pgsandstrom

1
これは「レストパラメータ」とも呼ばれます。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…を参照してください。
デニス

21

arguments関数の引数が格納される場所を目的とします。

引数オブジェクトは配列のように機能し、見えますが、基本的には、配列が行うメソッドがないだけです。次に例を示します。

Array.forEach(callback[, thisArg]);

Array.map(callback[, thisArg])

Array.filter(callback[, thisArg]);

Array.slice(begin[, end])

Array.indexOf(searchElement[, fromIndex])

argumentsオブジェクトを実際の配列に変換する最良の方法は次のようになると思います:

argumentsArray = [].slice.apply(arguments);

これで配列になります。

再利用可能:

function ArgumentsToArray(args) {
    return [].slice.apply(args);
}

(function() {
   args = ArgumentsToArray(arguments);

   args.forEach(function(value) {
      console.log('value ===', value);
   });

})('name', 1, {}, 'two', 3)

結果:

> value === name
> value === 1
> value === Object {}
> value === two
>value === 3


1
[].slice.apply(arguments);不要な空の配列割り当てが発生するため、最善の方法ではありません。
Thomas Eding 2017年

10

必要に応じて、配列に変換することもできます。ジェネリック配列が利用可能な場合:

var args = Array.slice(arguments)

さもないと:

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

Mozilla MDNから:

JavaScriptエンジン(V8など)での最適化が妨げられるため、引数をスライスしないでください。


2
更新していただきありがとうございます。代わりにJSON.stringifyとJSON.parseをfunction foo() { foo.bar = JSON.stringify(arguments); foo.baz = JSON.parse(foo.bar); } 使用します。文字列化の代わりに保存が必要な場合は、内部構造化クローニングアルゴリズムを使用します。DOMノードが渡される場合は、無関係な質問のようにXMLSerializerを使用します。with (new XMLSerializer()) {serializeToString(document.documentElement) }
Paul Sweatte、2015

7

他の多くの人が指摘したように、 argumentsように、関数に渡されるすべての引数が含まれています。

同じ引数で別の関数を呼び出したい場合は、 apply

例:

var is_debug = true;
var debug = function() {
  if (is_debug) {
    console.log.apply(console, arguments);
  }
}

debug("message", "another argument")

4

Gunnarへの同様の回答、より完全な例:すべてを透過的に返すこともできます。

function dumpArguments(...args) {
  for (var i = 0; i < args.length; i++)
    console.log(args[i]);
  return args;
}

dumpArguments("foo", "bar", true, 42, ["yes", "no"], { 'banana': true });

出力:

foo
bar
true
42
["yes","no"]
{"banana":true}

https://codepen.io/fnocke/pen/mmoxOr?editors=0010


3

はい、関数宣言時にいくつの引数が可能であるかわからない場合は、パラメーターなしで関数を宣言でき、関数呼び出し時に渡される引数配列によってすべての変数にアクセスできます。


2

ES6では、次のようなことができます。

function foo(...args) 
{
   let [a,b,...c] = args;

   console.log(a,b,c);
}


foo(1, null,"x",true, undefined);


1
`` `関数foo(a、b、... c){console.log(a、b、c);も実行できます。} `` `
TitouanT

-11

ES6では、次を使用しますArray.from

function foo()
  {
  foo.bar = Array.from(arguments);
  foo.baz = foo.bar.join();
  }

foo(1,2,3,4,5,6,7);
foo.bar // Array [1, 2, 3, 4, 5, 6, 7]
foo.baz // "1,2,3,4,5,6,7"

ES6以外のコードの場合は、JSON.stringifyおよびJSON.parseを使用します。

function foo()
  {
  foo.bar = JSON.stringify(arguments); 
  foo.baz = JSON.parse(foo.bar); 
  }

/* Atomic Data */
foo(1,2,3,4,5,6,7);
foo.bar // "{"0":1,"1":2,"2":3,"3":4,"4":5,"5":6,"6":7}"
foo.baz // [object Object]

/* Structured Data */
foo({1:2},[3,4],/5,6/,Date())
foo.bar //"{"0":{"1":2},"1":[3,4],"2":{},"3":"Tue Dec 17 2013 16:25:44 GMT-0800 (Pacific Standard Time)"}"
foo.baz // [object Object]

文字列化ではなく保存が必要な場合は、内部構造化クローニングアルゴリズムを使用します

DOMノードが渡される場合は、無関係な質問と同様にXMLSerializerを使用します。

with (new XMLSerializer()) {serializeToString(document.documentElement) }

ブックマークレットとして実行する場合、がJSON.stringify正しく機能するように、各構造化データ引数をErrorコンストラクターでラップする必要がある場合があります。

参考文献


3
1つ目は、渡されたオブジェクトを複製します。2つ目は、すべてをJSONに文字列化できるわけではありません。つまり、関数、DOMオブジェクト、日付は文字列として文字列化されます...
John Dvorak

@JanDvorak DOMオブジェクト、関数、日付を処理する関数で私の回答を編集できますか?
Paul Sweatte、2014

1
+1、エラー報告の引数を文字列として渡そうとすると、オブジェクトは文字列 '[object Arguments]'になり、それをコンソールに記録しても値は表示されません。それはOPに答えていないようですが、私の質問には答えます、ありがとう!
ジョン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.