web-dev-qa-db-fra.com

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 lors de la création du tableau.

Quelle est la bonne manière d’exécuter une fonction du tableau en faisant:

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

Merci!

javascriptarraysfunction
111
Nick
var array_of_functions = [
    first_function,
    second_function,
    third_function,
    forth_function
]

et puis quand vous voulez exécuter une fonction donnée dans le tableau:

array_of_functions[0]('a string');
211
Darin Dimitrov

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) à rechercher n'importe quel indice sur la façon d'appeler les fonctions JS dans un tableau.

96
pjcabrera

Sans plus de détails sur ce que vous essayez d'accomplir, nous devinons un peu. Mais vous pourrez peut-être vous en tirer 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'eux ...

myFuncs.firstFunc('a string')
21
Jeff

Ou juste:

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

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

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

Je voudrais compléter ce fil en publiant un moyen plus simple d’exécuter diverses fonctions dans un tableau à l’aide de la méthode Javascript shift()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();
  }
10
Gus

C'est fondamentalement la même chose que Darin Dimitrov's mais 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]);
}

6
Mensur Grišević

en haut 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]();
2
mlhazan

Si vous essayez de passer des rappels de manière dynamique, vous pouvez passer un seul objet en argument. Cela vous donne beaucoup plus de contrôle sur les fonctions que vous voulez 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
1
Daniel Lizik

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);
1
Leonardo Ciaccio

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

0
Thomas Gotwig

les probleme de ces tableaux de fonctions ne sont pas sous la forme "tableau" mais dans 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, où rien en haut ne faisait le boulot à la maison ... espère que ça va aider

0
Quetzal

Un court chemin à parcourir:

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

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')
    ]
0
YakuZa

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

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);
   }
0
Nezumi

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>
0
Hopkroft