Führen Sie die gleiche Funktion für jedes Element in einer Liste / einem Array aus.

Question

Ziel

Ich habe eine funktionierende Funktion (JSFiddle). In zahlreichen Situationen im Skript wird die Funktion nacheinander ausgeführt. In diesen Fällen gibt es viel sich wiederholenden Code, den ich gerne konsolidieren möchte.

Ideal wäre eine Änderung des Codes wie folgt:

functionName("Erstes_element") + 
functionName("Zweites_element") + 
functionName("Drittes_element") + 

Zu etwas wie diesem:

functionName("Erstes_element", "Zweites_element", "Drittes_element");

Die Funktion wird für jedes Element in der Liste ausgeführt, sodass das Ergebnis dasselbe ist, aber der Code eleganter und wartungsfreundlicher ist.

Hinweise:

• Ich möchte keine Bibliotheken (z.B. jQuery) verwenden, um das Ziel zu erreichen.

Lösung

1. Amit Jokis Antwort bemerkte freundlicherweise, dass ich arguments verwenden könnte. Als ich den Code implementierte, die modifizierte Funktion (JSFiddle) gab nur den output-String für das erste Argument / Element zurück.

2. Vanices Antwort wies auf die schließlich Lösung hin.

   • Erstellen Sie eine Zeichenfolge aus dem Output aller Argumente / Elemente, indem Sie die output-Zeichenfolgen innerhalb der Schleife konkatenieren (verbinden) (mit Verwendung von +=).
   • Geben Sie den konkatenierten Output zurück, indem Sie das return außerhalb der Schleife platzieren.

Beispiel

Lösung (JSFiddle).

---

Danke

Vielen Dank an alle für ihre Zeit und Hilfe dabei. Ich schätze es wirklich!

Answer 1

Die Nutzung von Javascript's Prototype OOP: Sie können eine each-Funktion zu den Arrays selbst hinzufügen, sodass jedes Array in Ihrem Code automatisch eine geerbte each-Funktion hat.

Array.prototype.each = function(callback){
    for (var i =  0; i < this.length; i++){
        callback(this[i]);
    }
}

Verwendung:

myArray.each(myCoolFunction) ['something','somethingelse',somethingother'].each(myCoolFunction)

myArray.each( function (item) {
 // Wenn Ihr Element eine Methode hat
 item.Something();
 // Wenn Sie eine Funktion auf dem Element aufrufen möchten:
 doSomething(item);
});

Vorsichtsmaßnahmen:

Weil Javascript eine asynchrone Sprache ist, die in verschiedenen Browsern unterschiedlich interpretiert wird und primitive Objekte und komplexe Objekte inhärent unterschiedlich verarbeitet, wird dringend empfohlen, underscore oder lodash zu verwenden. Sie können auch Ihre eigenen erstellen, aber Sie müssen sicherstellen, dass die durchgegebenen Objekte von den Funktionen ordnungsgemäß behandelt werden. Dies kann Workarounds oder das Erstellen spezieller Callback-Funktionen für verschiedene Objekttypen erfordern, die durch Ihre each-Funktion übergeben werden.

Weitere Informationen: Ist Javascript eine Referenz- oder Wertübergabe-Sprache?

Bibliotheken, die Sie ernsthaft in Betracht ziehen sollten:

lodash: https://lodash.com/docs#forEach

_([1, 2, 3]).forEach(function(num) { console.log(num); }).join(',');
//  gibt jede Zahl aus und gibt '1,2,3' zurück

_.forEach({ 'one': 1, 'two': 2, 'three': 3 }, function(num) { console.log(num); });
//  gibt jede Zahl aus und gibt das Objekt zurück (Reihenfolge der Eigenschaften ist in verschiedenen Umgebungen nicht garantiert)

underscore: http://underscorejs.org/#each

_.each([1, 2, 3], alert);
=> zeigt jede Zahl nacheinander an...

Answer 2

Du brauchst kein Array. Verwende einfach arguments

function functionName(){
   for(var i = 0; i < arguments.length; i++){
      // mache etwas mit arguments[i];
   }
}

und dann kannst du machen

functionName("shot_type","shot_height","shot_angle","framed","scene_depth");

P.S @codebox's Lösung funktioniert, wenn die Unterstützung von alten IE-Versionen kein Problem ist. Ich weiß nicht, warum er sie gelöscht hat... also stelle ich sie hier ein, damit sie hilft. Seine Antwort verwendet forEach

["shot_type","shot_height","shot_angle","framed","scene_depth"].forEach(FunctionName);

Answer 3

BEARBEITEN: Wenn Sie sich Ihren Fiddle ansehen, haben Sie ein return innerhalb der for-Schleife - daher wird die Funktion nach der ersten Iteration zurückgegeben. Setzen Sie das return nach der for-Schleife und konkatenieren Sie den Ausgabetext zu einem String.

var output = "";
for(...){
    output += Beschreibung_des_Objekts + ": " + zufällig_ausgewähltes_Element_von_Objekt + ".\n";
}   
// return es
return output;

Mit nur Javascript:

var actions = ["shot_type","shot_height","shot_angle","framed","scene_depth"];
for (var i = 0; i < actions.length; i++){
  Funktionsname(actions[i]);
}

Mit JQuery:

$.each(["shot_type","shot_height","shot_angle","framed","scene_depth"], function(index,value){
  Funktionsname(value);
});

Ich habe es nicht getestet, aber es sollte funktionieren.

Answer 4

Um Redundanz im Code zu vermeiden, verwenden Sie ein Array mit den Werten, die Sie an die Funktion übergeben möchten, und rufen Sie die Funktion in einer Schleife auf.

var vals=["shot_type","shot_height","shot_angle","framed","scene_depth"];
for(var i=0; i

`

Wenn Sie die Funktion erweitern möchten (einen weiteren Parameter hinzufügen), können Sie einfach die Schleife und die Array-Struktur erweitern.

Alternativ könnten Sie ein Objekt mit den Werten füllen und diese Logik in einem Objekt behandeln. Aber das würde nur einen Unterschied beim Aufrufen der Funktion machen.

`