Javascript Funktionsfeld


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

Dies funktioniert nicht wie beabsichtigt, da jede Funktion im Array beim Erstellen des Arrays ausgeführt wird.

Wie kann eine Funktion im Array ordnungsgemäß ausgeführt werden?

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

Vielen Dank!


1
Muss 'a string'zum Zeitpunkt des Auffüllens des Arrays bekannt sein, oder kann der Aufrufer der Funktion es übergeben?
Crescent Fresh

Ich würde gerne mehr Details darüber erfahren, was Sie erreichen möchten, da es möglicherweise eine bessere Möglichkeit gibt, damit umzugehen.
Jeff

2
"Array of Functions" - oder wie wir es gerne ein Objekt mit Methoden nennen
Symcbean

Denkst du nicht, du solltest mehr Details geben? Es könnte einen besseren Weg geben, damit
umzugehen

Antworten:


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

und dann, wenn Sie eine bestimmte Funktion im Array ausführen möchten:

array_of_functions[0]('a string');

16
Tipp: Denken Sie daran, ()danach zu setzen array_of_functions[0], auch wenn es leer ist. Ich verbringe ungefähr 20 Minuten damit, herauszufinden, warum das nicht funktioniert hat.
Horacio

Arbeitete wie Charme!
Moses Ndeda

Wie würden Sie den Index einer Funktion erhalten, indem Sie einen Zeichenfolgenwert wie 'firstFunction' übergeben, damit er dynamisch sein kann?
O'Dane Brissett

106

Ich denke, das wollte das Originalplakat erreichen:

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

Hoffentlich hilft dies anderen (wie mir vor 20 Minuten :-) bei der Suche nach Hinweisen zum Aufrufen von JS-Funktionen in einem Array.


3
Dies ist genau das, was ich brauchte, da es mir ermöglicht, die Parameteraufrufe zu ändern, vorausgesetzt, meine Funktionen nehmen nicht alle die gleichen Parameter an: P
Jem

24

Ohne mehr Details darüber, was Sie erreichen wollen, raten wir ein bisschen. Aber vielleicht können Sie mit der Objektnotation davonkommen, um so etwas zu tun ...

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

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

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

und einen von ihnen anzurufen ...

myFuncs.firstFunc('a string')

1
Ich denke, dies ist entwicklerfreundlicher, da wir uns nicht an den Funktionsindex erinnern müssen. Wenn wir eine Funktion auf den spezifischen Index übertragen möchten, ändert sich der Index aller daneben liegenden Funktionen. Also besser nutzen
dd619

16

Oder nur:

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

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

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

13

Ich würde diesen Thread ergänzen, indem ich eine einfachere Möglichkeit zur Ausführung verschiedener Funktionen innerhalb eines Arrays mit der ursprünglich hier beschriebenenshift() Javascript-Methode veröffentliche

  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

Es ist im Grunde dasselbe wie, Darin Dimitrov'saber es zeigt, wie Sie es verwenden können, um dynamisch Funktionen und Argumente zu erstellen und zu speichern. Ich hoffe es ist nützlich für dich :)

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
Es ist in Ordnung, Ihre Antwort hinzuzufügen, egal wie viele andere es gibt. Aber es ist vorzuziehen, eine Erklärung hinzuzufügen, was anders / besser ist als die anderen
Bowdzone

3

oben sahen wir einige mit Iteration. Machen wir dasselbe mit 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]();

1

Das ist richtig

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
Sind Sie sicher, dass dies die Frage ist, auf die Sie antworten wollten? Es ist nicht verwandt.
Bergi

1
@Bergi Eigentlich ist es. Ersetzen Sie die Antwort operadurch array_of_functionsund Sie haben das Gleiche. Wie wäre es jetzt?
Jesse

@ Jesse danke, jetzt habe ich eine Idee mit dem Code zu posten, dies ist meine erste Antwort.
Leonardo Ciaccio

Aber OP hatte ein Array, während dies ein Objekt ist (mit ungeraden Eigenschaftsnamen)? Und was ist die Neuigkeit dieser Antwort? Warum nicht einfach die von pjcabrera oder Robin verbessern?
Bergi

1
verwirrender Name der Variablen. Das ist kein Array von Funktionen, sondern ein Objekt von Funktionen
Craicerjack

1

Wenn Sie beispielsweise versuchen, Rückrufe dynamisch zu übergeben, können Sie ein einzelnes Objekt als Argument übergeben. Auf diese Weise können Sie viel besser steuern, welche Funktionen Sie mit einem Parameter ausführen möchten.

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

Ausführung vieler Funktionen über einen ES6-Rückruf 🤗

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

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


0

Vielleicht kann es jemandem helfen.

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

Ein kurzer Weg, um sie alle zu führen:

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

0

Das Problem dieser Funktionsfelder liegt nicht in der "Array-Form", sondern in der Art und Weise, wie diese Funktionen aufgerufen werden ... dann ... versuchen Sie dies ... mit einem einfachen 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] ); }

Es funktioniert hier, wo nichts Oberes die Arbeit zu Hause erledigt hat ... hofft, dass es helfen wird


Können Sie erklären, warum andere Antworten bei Ihnen nicht funktionieren und warum Ihre? Danke dir!
Fabio sagt Reinstate Monica

es gibt mir jemals Fehler, undefinierte Funktion zurück, oder sie werden nicht genau durch Javascript bewertet ... (warum ich nicht weiß, aber dies löste mein Problem)
Quetzal


Ja, schrecklich, wie immer, aber Schusslösung, und ziemlich einfach zu bedienen, besonders wenn es weit von einer "Eingabe" entfernt ist ... hier hat es nur eine innere Unmöglichkeit von Javascript auf kurze Weise gelöst ...
Quetzal

0

Verwenden von 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

Ich habe viele Probleme beim Versuch, dieses Problem zu lösen ... habe das Offensichtliche versucht, aber es hat nicht funktioniert. Es wird nur irgendwie eine leere Funktion angehängt.

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

Ich habe es mit einer Reihe von Zeichenfolgen und später mit eval gelöst:

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

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

-1

Sie haben oben einige Top-Antworten erhalten. Dies ist nur eine andere Version davon.

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

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

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

}}


2
Die Frage betraf eine Reihe von Funktionen, kein Objekt.
Trincot

-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();
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.