Tableau de fonctions Javascript

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

array_of_functions[0];

Cela ne fonctionne pas comme prévu car chaque fonction du tableau est exécutée lorsque le tableau est créé.

Quelle est la bonne façon d'exécuter une fonction du tableau en faisant:

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

Merci!

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

et ensuite lorsque vous souhaitez exécuter une fonction donnée dans le tableau:

array_of_functions[0]('a string');

Je pense que c'est ce que l'affiche originale voulait accomplir:

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]();
}

J'espère que cela aidera les autres (comme moi il y a 20 minutes :-) à la recherche d'un indice sur la façon d'appeler des fonctions JS dans un tableau.

Sans plus de détails sur ce que vous essayez d'accomplir, nous devinons un peu. Mais vous pourrez peut-être vous en sortir en utilisant la notation objet pour faire quelque chose comme ça ...

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

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

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

et d'appeler l'un d'entre eux ...

myFuncs.firstFunc('a string')

Ou juste:

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

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

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

Je voudrais compléter ce fil en publiant un moyen plus simple d'exécuter diverses fonctions dans un tableau en utilisant la shift()méthode Javascript décrite à l'origine ici

  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();
  }

C'est fondamentalement le même que, Darin Dimitrov'smais cela montre comment vous pouvez l'utiliser pour créer et stocker dynamiquement des fonctions et des arguments. J'espère que cela vous sera utile :)

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]);
}

au-dessus, nous en avons vu avec itération. Faisons la même chose en utilisant 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]();

C'est correct

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);

Si vous faites quelque chose comme essayer de passer dynamiquement des rappels, vous pouvez passer un seul objet comme argument. Cela vous donne un meilleur contrôle sur les fonctions que vous souhaitez exécuter avec n'importe quel paramètre.

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

Exécution de nombreuses fonctions via un callback ES6 🤗

const f = (funs) => {
  funs().forEach((fun) => fun)
}

f(() => [
  console.log(1),
  console.log(2),
  console.log(3)
])

Peut-être que cela peut aider quelqu'un.

<!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>

Un court moyen de les exécuter tous:

[first_function, ..., nth_function].forEach (function(f) {
    f('a string');
}); 

les problèmes de ces tableaux de fonctions ne sont pas sous la forme d'un "tableau" mais de la façon dont ces fonctions sont appelées ... alors ... essayez ceci ... avec un simple 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] ); }

ça marche ici, là où rien de haut ne faisait le travail à la maison ... j'espère que ça aidera

Utilisation de 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')
    ]

J'ai beaucoup de problèmes à essayer de résoudre celui-ci ... j'ai essayé l'évidence, mais cela n'a pas fonctionné. Il ajoute simplement une fonction vide.

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

Je l'ai résolu en utilisant un tableau de chaînes, et plus tard avec eval:

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

for (var Func of array_of_functions) {
   eval(Func);
   }

Ah mec, il y a tellement de réponses étranges ...

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 n'est pas pris en charge par défaut, mais il existe des bibliothèques comme ramda, lodash ou même redux qui fournissent cet outil

vous avez les meilleures réponses ci-dessus. Ceci est juste une autre version de cela.

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

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

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

}

/* 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();