Vue muss Wissenspunkte lernen: die Verwendung von forEach()

Vorwort

Bei der Frontend-Entwicklung stoßen wir häufig auf Situationen, in denen wir Schleifen durchlaufen müssen, um den gewünschten Inhalt zu erhalten. Diese Situation ist in der Entwicklung allgegenwärtig. In diesem Blogbeitrag wird ein allgemeinerer und klassischerer Wissenspunkt behandelt: die Verwendung von forEach().

forEach() ist eine Methode zum Bedienen von Arrays in der Front-End-Entwicklung. Ihre Hauptfunktion besteht darin, das Array zu durchlaufen. Tatsächlich handelt es sich um eine verbesserte Version der for-Schleife. Diese Anweisung erfordert eine Rückruffunktion als Parameter. Die Parameter der Rückruffunktion sind: 1. Wert: Durchlaufen des Inhalts des Arrays; 2. Index: Der Index des entsprechenden Arrays; 3. Array: Das Array selbst.

In Vue-Projekten wird v-for für Schleifen in Tags und forEach für Schleifen in Methoden verwendet.

1. Prinzip von forEach()

Die Methode forEach() wird hauptsächlich verwendet, um jedes Element eines Arrays aufzurufen und das Element an eine Rückruffunktion zu übergeben. Es ist zu beachten, dass die Methode forEach() die Rückruffunktion für ein leeres Array nicht ausführt.

forEach: Array.prototype.forEach, eine Methode, die nur in Arrays existiert, entspricht einer for-Schleife, die das Array durchläuft. Verwendung: arr.forEach(function(item,index,array){...}), wobei die Rückruffunktion 3 Parameter hat: „item“ ist das aktuell durchlaufene Element, „index“ ist der Index des aktuell durchlaufenen Elements und „array“ ist das Array selbst. Die forEach-Methode überspringt keine Null- und undefinierten Elemente. Beispielsweise werden alle vier Elemente im Array [1, undefine, null, , 2] durchlaufen. Beachten Sie den Unterschied zur Map.

2. forEach() Syntax

array.forEach(Funktion(aktuellerWert, Index, Array), dieserWert)

Beispiel:

array.forEach(Funktion(Element,Index,Array){ ... })

3. forEach() Andere verwandte Inhalte

1. continue und break von forEach():

forEach() selbst unterstützt keine continue- und break-Anweisungen, kann aber durch some und every implementiert werden.

2. Der Unterschied zwischen forEach() und map:

forEach() hat keinen Rückgabewert und ist im Wesentlichen dasselbe wie eine For-Schleife, die die Funktion für jedes Element ausführt. Das heißt, map gibt ein neues Array zurück und lässt das ursprüngliche Array unverändert, während forEach das ursprüngliche Array ändert.

3. Vergleich zwischen forEach() und for-Schleife:

Die for-Schleife hat viele Schritte und ist relativ kompliziert, während die forEach-Schleife relativ einfach, leicht zu verwenden und weniger fehleranfällig ist.

4. forEach() Beispiel:

Beispiel 1:

lass Array = [1, 2, 3, 4, 5, 6, 7];
array.forEach(Funktion (Element, Index) {
    console.log(item); //jedes Element des Arrays ausgeben});

Beispiel 2:

var-Array = [1, 2, 3, 4, 5];
array.forEach(Funktion(Element, Index, Array){
    Array[Index]=4 * Element;
});
console.log(array); //Ausgabeergebnis: Die ursprünglichen Array-Elemente werden geändert und jedes Element wird mit 4 multipliziert

Beispiel 3:

 <el-checkbox v-for="(Element) im Suchinhalt"
                       :label="Artikel-ID"
                       :Schlüssel="Artikel-ID"
                       Klasse="Kontrollkästchen">
            <span>{{item.value}}{{item.checked}}</span>
          </el-checkbox>
  handle(Index, Zeile) {
        diese.selectedCheck=[];
        sei a = dies;
        diese.Gerichtsbarkeit = wahr;
        diese.Rollen-ID = Zeilen-ID;
        dies.$http.get("/user/resources", {
            Parameter: {Benutzer-ID: diese.Benutzer-ID}
          }).dann((Antwort) => {
          a.Suchinhalt = Antwort.Text;
          a.searchContent.forEach(Funktion (b) {
            wenn(b['geprüft']){
              a.selectedCheck.push(b.id);
            }
          })
        })

Beispiel 4:

var Benutzerliste = neues Array();
        var Daten = {};
        wenn (response.data.userList != null und response.data.userList.length > 0) {
          Antwort.data.userList.forEach((Element, Index) => {

            Daten.a = Element.a;
            Daten.b = Element.b;
            data.arr1 = neues Array();
            Daten.arr1[0] = Element.c;
            Daten.arr1[1] = Element.d;
            Daten.e = Element.e;
            Daten.f = Element.f;
            data.arr2 = neues Array();
            Daten.arr2[0] = Element.j;
            data.arr2[1] = item.h;
            Benutzerliste.push(Daten);
          });
        }

Beispiel 5:

Suchabteilung(Schlüsselwort, Rückruf) {
       if (Schlüsselwort) {
        dies.$service.data
          .searchDepts({ data: { full_name: keyWord } })
          .then(r => {
            wenn (r.Erfolg) {
              sei arr = [];
              r.Data.Result.forEach(element => {
                arr.push({
                  ID: Element.work_id,
                  Wert: element.vollständiger_name,
                  Abteilung: Element
                });
              });
              Rückruf(arr);
            }
         });
      }
    },

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von forEach(), einem unverzichtbaren Wissenspunkt in Vue. Weitere relevante Inhalte zur Verwendung von Vue forEach() finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!