関数のJavaScript配列

129 
var array_of_functions = [
    first_function('a string'),
    second_function('a string'),
    third_function('a string'),
    forth_function('a string')
]

array_of_functions[0];

配列が作成されるときに配列内の各関数が実行されるため、これは意図したとおりに機能しません。

配列内の関数を実行する適切な方法は何ですか？

array_of_functions[0];  // or, array_of_functions[1] etc.

ありがとう！

javascript  arrays  function 
— ニック
ソース
1
'a string'配列に値が入力されるときに既知である必要がありますか、それとも関数の呼び出し元がそれを渡すことができますか？
— クレセントフレッシュ
これを処理するためのより良い方法があるかもしれないので、あなたが達成しようとしていることの詳細を知りたいです。
— ジェフ
2
「関数の配列」-または、メソッド付きのオブジェクトと呼びたい
— symcbean
もっと詳しく教えてください。...これを処理するためのより良い方法があるかもしれません
— IcyFlame

回答:

234 
var array_of_functions = [
    first_function,
    second_function,
    third_function,
    forth_function
]

その後、配列内の特定の関数を実行する場合：

array_of_functions[0]('a string');
— ダリン・ディミトロフ
ソース
16
ヒント：空の場合でも、の()後に置くことを忘れないでくださいarray_of_functions[0]。私は「なぜそれがうまくいかなかったのか」を見つけるためだけに20分間費やしました。
— Horacio
魅力のように働いた！
— Moses Ndeda
「firstFunction」のような文字列値を渡して動的にすることができるように、関数のインデックスをどのように取得しますか？
— オデーンブリセット
106

私はこれが元のポスターが達成することを意図したものだと思います：

var array_of_functions = [
    function() { first_function('a string') },
    function() { second_function('a string') },
    function() { third_function('a string') },
    function() { fourth_function('a string') }
]

for (i = 0; i < array_of_functions.length; i++) {
    array_of_functions[i]();
}

うまくいけば、これが他の人（20分前の私のように:-)が配列内のJS関数を呼び出す方法についてのヒントを探すのに役立つことを願っています。

— ピカブレラ
ソース
3
これは私が必要とするものであり、私の関数がすべて同じパラメーターを取らないと仮定すると、パラメーター呼び出しを変更できるので、：P
— Jem
24

あなたが達成しようとしていることの詳細がなければ、私たちはちょっと推測しています。しかし、あなたはオブジェクト記法を使ってこのようなことをやめることができるかもしれません...

var myFuncs = {
  firstFunc: function(string) {
    // do something
  },

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}

そのうちの1人を呼び出すために...

myFuncs.firstFunc('a string')
— ジェフ
ソース
1
関数のインデックスを覚えておく必要がないため、これは開発者にとってより使いやすいと思います。また、特定のインデックスで関数をプッシュしたい場合は、その隣のすべての関数のインデックスが変更されます。これを使用する方が良い
— dd619
16

あるいは単に：

var myFuncs = {
  firstFun: function(string) {
    // do something
  },

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}
— ロビン
ソース
13

ここで最初に説明したshift()Javascriptメソッドを使用して、配列内のさまざまな関数を実行する簡単な方法を投稿して、このスレッドを補完します

  var a = function(){ console.log("this is function: a") }
  var b = function(){ console.log("this is function: b") }
  var c = function(){ console.log("this is function: c") }

  var foo = [a,b,c];

  while (foo.length){
     foo.shift().call();
  }
— ガス
ソース
7

基本的には同じDarin Dimitrov'sですが、関数と引数を動的に作成および保存する方法を示しています。それがあなたに役立つことを願っています:)

var argsContainer = ['hello', 'you', 'there'];
var functionsContainer = [];

for (var i = 0; i < argsContainer.length; i++) {
var currentArg = argsContainer[i]; 

  functionsContainer.push(function(currentArg){
    console.log(currentArg);
  });
};

for (var i = 0; i < functionsContainer.length; i++) {
  functionsContainer[i](argsContainer[i]);
}
スニペットを展開

— メンスル・グリシェビッチ
ソース
1
他にいくつあっても回答を追加してもかまいません。しかし、他のものとの違い/良い点について説明を追加することをお
— 勧め
3

上の図では、反復のあるものを見ました。forEachを使用して同じことをしましょう：

var funcs = [function () {
        console.log(1)
  },
  function () {
        console.log(2)
  }
];

funcs.forEach(function (func) {
  func(); // outputs  1, then 2
});
//for (i = 0; i < funcs.length; i++) funcs[i]();
— mlhazan
ソース
1

これは正しいです

var array_of_functions = {
            "all": function(flag) { 
                console.log(1+flag); 
              },
                "cic": function(flag) { 
                console.log(13+flag); 
              }                     
        };

array_of_functions.all(27);
array_of_functions.cic(7);
— レオナルド・チャッキオ
ソース
1
これがあなたが答えたかった質問であると確信していますか？それは関係ありません。
— ベルギ2013年
1
@Bergi実はそうです。置き換え解答者operaでarray_of_functions、あなたは同じことを持っています。今はどう？
— ジェシー
@ジェシーありがとう、コードを投稿するアイデアが出ました。これが私の最初の応答です。
— Leonardo Ciaccio 2013年
しかし、OPには配列がありましたが、これは（奇妙なプロパティ名を持つ）オブジェクトですか？そして、この答えのニュースは何ですか、なぜpjcabreraまたはRobinのそれを賛成しないのですか？
— ベルギ2013年
1
変数の紛らわしい名前。それは関数の配列ではなく、関数のオブジェクトです
— Craicerjack '21
1

コールバックを動的に渡そうとする場合、単一のオブジェクトを引数として渡すことができます。これにより、任意のパラメーターを使用して実行する関数をより詳細に制御できます。

function func_one(arg) {
    console.log(arg)
};

function func_two(arg) {
    console.log(arg+' make this different')
};

var obj = {
    callbacks: [func_one, func_two],
    params: ["something", "something else"];
};

function doSomething(obj) {
    var n = obj.counter
    for (n; n < (obj.callbacks.length - obj.len); n++) {
        obj.callbacks[n](obj.params[n]);
    }
};

obj.counter = 0;
obj.len = 0;
doSomething(obj); 

//something
//something else make this different

obj.counter = 1;
obj.len = 0;
doSomething(obj);

//something else make this different
— ダニエル・リジク
ソース
0

多分それは誰かを助けることができます。 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.manager = {
            curHandler: 0,
            handlers  : []
        };

        manager.run = function (n) {
            this.handlers[this.curHandler](n);
        };

        manager.changeHandler = function (n) {
            if (n >= this.handlers.length || n < 0) {
                throw new Error('n must be from 0 to ' + (this.handlers.length - 1), n);
            }
            this.curHandler = n;
        };

        var a = function (n) {
            console.log("Handler a. Argument value is " + n);
        };

        var b = function (n) {
            console.log("Handler b. Argument value is " + n);
        };

        var c = function foo(n) {
            for (var i=0; i<n; i++) {
                console.log(i);
            }
        };

        manager.handlers.push(a);
        manager.handlers.push(b);
        manager.handlers.push(c);
    </script>
</head>
<body>
<input type="button" onclick="window.manager.run(2)" value="Run handler with parameter 2">
<input type="button" onclick="window.manager.run(4)" value="Run handler with parameter 4">
<p>
<div>
    <select name="featured" size="1" id="item1">
        <option value="0">First handler</option>
        <option value="1">Second handler</option>
        <option value="2">Third handler</option>
    </select>
    <input type="button" onclick="manager.changeHandler(document.getElementById('item1').value);" value="Change handler">
</div>
</p>
</body>
</html>
— ホプクロフト
ソース
0

これらの関数の配列の問題は「配列形式」ではなく、これらの関数の呼び出し方法にあります...次に...これを試してください..単純なeval（）で...

array_of_function = ["fx1()","fx2()","fx3()",.."fxN()"]
var zzz=[];
for (var i=0; i<array_of_function.length; i++)
     { var zzz += eval( array_of_function[i] ); }

それはここで機能し、上層部が自宅で仕事をしていなかった...それが役立つことを願っています

— ケツァル
ソース
なぜ他の答えがうまくいかないのか、なぜあなたの答えはうまくいかないのか説明してもらえますか？ありがとうございました！
— Fabioは2016
それは私にエラー、未定義の関数を返す、またはそれらはJavaScriptによって正確に評価されない...（なぜ私は知らないが、これは私の問題を解決した）
— ケツァル
1
ひどいアドバイス。stackoverflow.com/questions/86513/...
— アンドレイサヴァン
はい、いつものように、ひどいが、シュート・ソリューション、およびとても簡単「入力」からその遠いが...ここでは、わずかな方法で、内側のJavaScript不可能を解く場合に特に使用するように...
— ケツァール
0

Function.prototype.bind（）の使用

var array_of_functions = [
        first_function.bind(null,'a string'),
        second_function.bind(null,'a string'),
        third_function.bind(null,'a string'),
        forth_function.bind(null,'a string')
    ]
— やくざ
ソース
0

私はこれを解決しようとして多くの問題を抱えています...明白なことを試みましたが、うまくいきませんでした。何とか空の関数を追加するだけです。

array_of_functions.push(function() { first_function('a string') });

文字列の配列を使用して解決し、後でevalを使用して解決しました。

array_of_functions.push("first_function('a string')");

for (var Func of array_of_functions) {
   eval(Func);
   }
— ねずみ
ソース
0

ああ男は奇妙な答えがたくさんある...

const execute = (fn) => fn()
const arrayOfFunctions = [fn1, fn2, fn3]

const results = arrayOfFunctions.map(execute)

or if you want to sequentially feed each functions result to the next:
compose(fn3, fn2, fn1)

compose はデフォルトではサポートされていませんが、このツールを提供するramda、lodash、またはreduxなどのライブラリがあります

— ダニエル・トック
ソース
-1

あなたは上記のいくつかのトップ回答を得ました。これはその別のバージョンです。

var dictFun = {
     FunOne: function(string) {
     console.log("first function");
  },

   FuncTwo: function(string) {
   console.log("second function");
 },

  FuncThree: function(string) {
   console.log("third function");
}

}

— pallimula stackoverflow
ソース
2
問題は、オブジェクトではなく関数の配列に対するものでした。
— トリンコット2017年
-4 
/* PlanetGreeter */

class PlanetGreeter {
    hello   : { () : void; } [] = [];
    planet_1 : string = "World";
    planet_2 : string = "Mars";
    planet_3 : string = "Venus";
    planet_4 : string = "Uranus";
    planet_5 : string = "Pluto";
    constructor() {
        this.hello.push( () => { this.greet(this.planet_1); } );
        this.hello.push( () => { this.greet(this.planet_2); } );
        this.hello.push( () => { this.greet(this.planet_3); } );
        this.hello.push( () => { this.greet(this.planet_4); } );
        this.hello.push( () => { this.greet(this.planet_5); } );
    } 
    greet(a: string) : void { alert("Hello " + a); }
    greetRandomPlanet() : void { 
        this.hello [ Math.floor( 5 * Math.random() ) ] (); 
    } 
} 
new PlanetGreeter().greetRandomPlanet();
— user37057
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.