Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

1. Häufig verwendete höherwertige Funktionen von Arrays

Angenommen, es gibt jetzt ein Array, und wir möchten die folgenden Operationen auf dem Array ausführen

Finden Sie die Zahl kleiner als 100:
Multiplizieren Sie alle Zahlen kleiner als 100 mit 2:
Summieren Sie alle Zahlen auf der Basis von 2:

Was machen wir normalerweise?

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <p>Finden Sie eine Zahl kleiner als 100:</p>
 <p>Multiplizieren Sie alle Zahlen kleiner als 100 mit 2: </p>
 <p>Alle Zahlen summieren:</p>

 <button @click="getNum()">Berechnen</button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 const app = new Vue({
  el: "#app",
  Daten: {
   Zahlen: [10, 20, 100, 30, 320, 55, 80, 210],
   Zahl1:0,
   Zahl2:0,
   Zahl3:0
  },
  Methoden: {
   getNum(){
    // 1. Suche eine Zahl < 100 let newNum1 = []
    für(let num von diesem.nums) {
     wenn (Zahl < 100) {
      newNum1.push(Zahl)
     }
    }
    this.num1=neueNummer1
    console.log(neueNummer1)


    // 2. Für Zahlen kleiner als 100 * 2
    lass neueZahl2 = []
    für(let num von newNum1) {
     neueZahl2.push(Zahl * 2)
    }
    diese.Zahl2 = neueZahl2
    console.log(neueNummer2)

    // 3. Summiere die Zahlen kleiner als 100 * 2 let newNum3 = 0;
    für(let num von newNum2) {
     neueZahl3 += Zahl
    }
    diese.Zahl3 = neueZahl3
    console.log(neueNummer3)
   }
  }
 })
</Skript>
</body>
</html>

In der obigen Demo verwenden wir alle Schleifen, um Berechnungen durchzuführen und schließlich den gewünschten Effekt zu erzielen. Klicken Sie auf die Berechnungsschaltfläche, um die Berechnungsergebnisse anzuzeigen:

In den hochrangigen Funktionen von js können einige hochrangige Funktionen die oben genannten Effekte direkt berechnen. Im Folgenden werden hauptsächlich drei hochrangige Funktionen vorgestellt

Filter
Karte
reduzieren

1. Filterfunktion

Die Methode filter() erstellt ein neues Array. Jedes Element des ursprünglichen Arrays wird an die Callback-Funktion übergeben. Die Callback-Funktion hat einen Rückgabewert. Wenn der Rückgabewert true ist, wird das Element im neuen Array gespeichert. Wenn der Rückgabewert false ist, wird das Element nicht im neuen Array gespeichert. Das ursprüngliche Array ändert sich nicht.

Syntax: array.filter(Funktion(aktuellerWert,Index,arr), dieserWert)
Parameter

Beispiel 1: Gibt die Elemente im Array zurück, die kleiner als 100 sind

getNums() {
 // Sehen wir uns an, wie der Filter verwendet wird: let num1 = [10, 20, 100, 30, 320, 55. 80, 210]
 let newNum1 = this.nums.filter(function (num) {
  Rückgabewert: Num < 100;
 })
 console.log(neueNummer1)
}

Der Eingabeparameter der Funktion filter() ist eine Funktion und der Ausgabeparameter ist ein neues Array
Die Funktion hat auch Parameter, und hier wird nur der erste Parameter übergeben, was bedeutet: das Array-Element beim Durchlaufen einer Schleife.
Der Rückgabewerttyp der Funktion ist true oder false. Wenn das Rückgabeergebnis true ist, bedeutet dies, dass sich das Element im neuen Array befindet. Wenn das Rückgabeergebnis false ist, bedeutet dies, dass sich das Element nicht im neuen Array befindet.

Beispiel 2: Mithilfe von Filtern können Sie doppelte Elemente geschickt aus einem Array entfernen:

Die von filter() empfangene Rückruffunktion kann tatsächlich mehrere Parameter haben. Normalerweise verwenden wir nur den ersten Parameter, der ein Element des Arrays darstellt. Die Rückruffunktion kann außerdem zwei zusätzliche Parameter empfangen, die die Position des Elements und des Arrays selbst angeben:

lass Nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum2 = this.nums.filter(Funktion(Element, Index, selbst) {
 return self.indexOf(Element) == Index
})

Ergebnisse der Operation

[10, 20, 100, 30, 320, 55, 80, 210]

Das Entfernen doppelter Elemente beruht auf der Tatsache, dass indexOf immer die Position des ersten Elements zurückgibt. Die Positionen nachfolgender doppelter Elemente sind nicht gleich der von indexOf zurückgegebenen Position und werden daher vom Filter herausgefiltert.

2. Kartenfunktion

Die Methode gibt ein neues Array zurück, dessen jedes Element dem Wert des ursprünglichen Arrays entspricht, nachdem die Funktion für jedes Element aufgerufen wurde. Das leere Array wird nicht bearbeitet und das ursprüngliche Array wird nicht geändert.

Syntax: array.every(Funktion(Element,Index,Array）{})
Parameter:

Beispiel 1: Finden Sie das Array, nachdem alle Elemente im Array mit 2 multipliziert wurden

lass Nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
lass newNum1 = this.nums.map(function (num) {
 Rückgabewert: Num * 2;
})

console.log(neueNummer1)

Ausgabe:

[20, 40, 200, 60, 640, 110, 160, 420, 40, 110, 640]

3. Reduzieren Sie die Funktion

Die Methode „reduce()“ erhält eine Funktion als Akkumulator. Reduce führt die Callback-Funktion nacheinander für jedes Element im Array aus. Elemente im Array, die gelöscht wurden oder denen nie ein Wert zugewiesen wurde, werden nicht verarbeitet.

Syntax: arr.reduce(callback,[initialValue])
Parameter

Beispiel 1: Finden Sie die Summe eines Arrays

// Verwendung von Reduce let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
lass newNum1 = this.nums.reduce(Funktion (total, num) {
 gib Num + Gesamtsumme zurück;
}, 0)
console.log(neueNummer1)

2. Umfassender Fall 1

Kombinieren Sie die drei Funktionen Filter, Map und Reduce, um die Elemente im Array zu erhalten, die kleiner als 100 sind, multiplizieren Sie diese Elemente dann mit *5 und ermitteln Sie schließlich die Summe aller Elemente nach *5.

// Verwendung von Reduce let nums = [10, 20, 100, 30, 320, 55, 80, 210, 20, 55, 320]
let newNum1 = this.nums.filter(Funktion (Zahl) {
 Rückgabewert < 100
}).map(Funktion (Zahl) {
 Rücksendenummer * 5
}).reduce(Funktion (Gesamt, Anzahl) {
 gib Num + Gesamtsumme zurück;
}, 0)
console.log(neueNummer1)

Ausgabe: 1220

Tatsächlich gibt es einen einfacheren Algorithmus, den Lambda-Ausdruck

// Verwendung von Reduce let nums = [10, 20, 320]
lass newNum11 =
nums.filter(num => num < 100).map(num => num * 5, dies).reduce((gesamt, num) => gesamt + num)
console.log(neueNummer11)

Ausführungsergebnis: 150

3. Umfassender Fall 2

Zeigen Sie eine Liste an, wählen Sie die Liste aus, die die Farbe ändert, und verwenden Sie Vue zur Implementierung

Denken Sie zwei Minuten darüber nach und überlegen Sie, wie Sie es gestalten könnten.

In Vue ist dieser Prozess sehr einfach

Schritt 1: Definieren Sie einen isCurrentIndex, um den Index des aktuell ausgewählten Elements aufzuzeichnen.
Schritt 2: Setzen Sie im Klassenattribut isCurrentIndex == index. Dies bedeutet, dass der Index des ausgewählten Elements rot angezeigt wird und die anderen nicht rot angezeigt werden.
Schritt 3: Definieren Sie ein Klickereignis und ändern Sie den ausgewählten Indexwert bei jedem Klick auf das Ereignis.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
 <Stil>
  .Aktion {
   Farbe: rot;
  }
 </Stil>
</Kopf>
<Text>
<div id="app">
 <ul>
  <li v-for="(Element, Index) in Sprachen" :class="{action:isCurrentIndex == index}" @click="changeCurrentIndex(index)"> {{index}}--{{Element}}</li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Sprachen: ["Java", "PHP", "Python", "Go", "C-Sprache"],
   ist aktuellerIndex:0
  },
  Methoden: {
   ändereAktuellenIndex(index) {
    this.isCurrentIndex = Index
   }
  }
 });
</Skript>
</body>
</html>

IV. Umfassender Fall 3

Wir müssen eine Tabelle mit folgendem Inhalt erstellen:

Was sind die wichtigsten Dinge?

Es gibt n Bücher, jedes Buch hat einen Titel, ein Veröffentlichungsdatum, einen Preis, eine Menge und eine Funktion.
Der Preis wird auf zwei Dezimalstellen gerundet, die Menge kann erhöht oder verringert werden, die maximale Reduzierung beträgt 0.
Der Vorgang kann die Tabelle löschen. Wenn die Tabelle keine Daten enthält, wird „Keine Daten“ angezeigt.
Gesamtpreis jederzeit berechnen.

Schauen wir uns an, wie dieser Code implementiert wird, kombiniert mit den js-High-Order-Funktionen, die wir zuvor gelernt haben

Schritt 1: Definieren Sie n Bücher und fügen Sie sie in das Datenattribut von vue ein

Daten: {
 Bücher:
  {name:"java design pattern", Veröffentlichungsdatum:"1998-10-21", Preis: 58.00, Anzahl: 1},
  {name:"Praktische Analyse der Go-Sprache", Veröffentlichungsdatum:"2018-5-12", Preis: 70,00, Anzahl: 1},
  {name:"vue ist leicht zu verstehen", publishDate:"2019-08-09", price: 46.89, count: 1},
  {name:"jquery in Aktion", Veröffentlichungsdatum:"2014-02-29", Preis: 39,98, Anzahl: 1}
 ],
 gesamt: 0
},

Definiert einen Gesamtpreis, um den berechneten Gesamtpreis zu speichern

Schritt 2: Zeichnen Sie die Tabelle

<div id="app">
 <Tabellengrenze="1">
  <Kopf>
   <tr>
    <td>Seriennummer</td>
    <td>Buchtitel</td>
    <td>Veröffentlichungsdatum</td>
    <td>Preis</td>
    <td>Kaufmenge</td>
    <td>Betrieb</td>
   </tr>
  </thead>

  <tbody v-if="Bücher.length==0">
   <tr>
    <td colspan="6" >Keine Daten</td>
   </tr>
  </tbody>

  <tbody v-else>
   <tr v-for="(Artikel, Index) in Büchern" >
    <td>{{index+1}}</td>
    <td>{{Artikelname}}</td>
    <td>{{item.publishDate}}</td>
    <td>{{item.price| Preiseinheit}} </td>
    <td>
     <button @click="sub(index)">-</button>
     {{item.count}}
     <button @click="Hinzufügen(index)">+</button>
    </td>
    <td>
     <button @click="del(index)">Löschen</button>
   </tr>
  </tbody>
 </Tabelle>
 <label id="sum">Gesamtpreis: {{getTotal() | priceUnit}} </label>
</div>

Hier durchlaufen wir die Daten, verarbeiten den Preis, fügen Einheiten hinzu und fügen Schaltflächen zum Erhöhen und Verringern der Menge hinzu. Abschließend definieren wir eine Löschfunktion.

Schritt 3. Formatieren Sie den Preis mithilfe von Filtern

Beim Formatieren des Preises wird das Pipe-Zeichen verwendet. So wird der Filter geschrieben. Vor dem Filter ist der Preis 58. Nach dem Hinzufügen des Filters lautet er: 58,00 $, wobei ein Dollarzeichen hinzugefügt und der Preis auf zwei Dezimalstellen gerundet wird.

Da das Hinzufügen von Einheiten an mehr als einer Stelle verwendet wird, definieren wir es als Methode.

Filter:
 Preiseinheit(Preis) {
  returniere "$" + Preis.toFixed(2)
 }
}

Hier ist die Definition, wie ein Filter geschrieben wird. Es ist Methoden ähnlich. Darin ist eine Methode definiert. Kann diese Methode tatsächlich in Methoden platziert werden? Ja, aber es hat einen Vorteil, sie in Filter zu platzieren. Sie können das Pipe-Zeichen verwenden, um sie zu schreiben.

<td>{{item.price | Preiseinheit}} </td>

Bei Verwendung des Filters wird der Wert vor | automatisch als Parameter an priceUnit übergeben.

Schritt 4: Definieren Sie Methoden zum Erhöhen oder Verringern der Anzahl der Bücher. Die Anzahl darf nicht kleiner als 0 sein.

Unterindex {
 wenn (diese.Bücher[index].Anzahl <= 0) {
  diese.Bücher[index].Anzahl = 0;
 } anders {
  diese.Bücher[index].Anzahl --;
 }
},
hinzufügen(index) {
 diese.Bücher[index].Anzahl++;
},

Ich werde nicht viel dazu sagen, normales Funktionsschreiben

Schritt 5: Berechnen Sie den Gesamtbetrag

Es gibt viele Möglichkeiten, den Gesamtbetrag zu berechnen. Der herkömmliche Weg ist

getTotal() {
 sei Gesamtpreis = 0;
 für(lass i = 0; i < this.books.length; i++) {

  Gesamtpreis += diese.Bücher[i].Preis * diese.Bücher[i].Anzahl;
 }
 
 Gesamtpreis zurückgeben;
},

Schleife durch Bücher, Summe aus Preis und Menge multipliziert mit

Es wird empfohlen, die High-Order-Funktionen von js zu verwenden

getTotal() {
 // Verwenden Sie höherwertige Funktionen auf Arrays, um den Gesamtpreis jedes Buches zu berechnen. return this.books.map((book)=>book.price * book.count).reduce((total,num) => total + num)
},

Im Rückblick

Map führt eine Operation an jedem Element eines Arrays aus.

Reduzieren bedeutet, alle Elemente im Array zu summieren

Schritt 6: Tabellenzeilen löschen

del(index){
 dies.books.splice(index,1)
}

Um eine Zeile zu löschen, verwenden Sie splice, um die Elemente in den angegebenen Daten zu löschen.

Dies ist das Ende dieses Artikels über häufig verwendete High-Order-Funktionen und umfassende Fälle von Vue. Weitere relevante häufig verwendete High-Order-Funktionen und Beispiele von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Erläuterung der Vue-Array-Responsive-Operationen und des Verwendungscodes für höherwertige Funktionen
Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung
So verwenden Sie vite zum Erstellen einer Vue3-Anwendung
Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

<<: Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

>>: Allgemeiner Hinweis zum MySQL-Ereignisplaner (unbedingt lesen)

So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu

Häufig verwendete höherwertige Funktionen und umfassende Beispiele in Vue

1. Häufig verwendete höherwertige Funktionen von Arrays

1. Filterfunktion

2. Kartenfunktion

3. Reduzieren Sie die Funktion

2. Umfassender Fall 1

3. Umfassender Fall 2

IV. Umfassender Fall 3

Schritt 1: Definieren Sie n Bücher und fügen Sie sie in das Datenattribut von vue ein

Schritt 2: Zeichnen Sie die Tabelle

Schritt 3. Formatieren Sie den Preis mithilfe von Filtern

Schritt 4: Definieren Sie Methoden zum Erhöhen oder Verringern der Anzahl der Bücher. Die Anzahl darf nicht kleiner als 0 sein.

Schritt 5: Berechnen Sie den Gesamtbetrag

Schritt 6: Tabellenzeilen löschen

So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu

Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung

So implementieren Sie Bildmapping mit CSS

Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19

Implementierung der Nginx-Konfiguration und des Zugriffs auf lokale statische Ressourcen in der Mac-Umgebung

Detaillierte Erklärung der Lösung für verweigerte Berechtigungen in Linux

Praktische Fähigkeiten zur Entwicklung von WeChat-Applets: Datenübertragung und -speicherung

Spezifische Verwendung der MySQL-Vorbereitungsvorverarbeitung

Ein zeitaufwändiger Fehlerbehebungsprozess für einen Docker-Fehler

Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren der neuesten Version von MySQL 8.0.21

Artikel empfehlen

Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)

Grafisches Tutorial zur Offline-Installation und Konfiguration von MySQL 8.0.2

Detaillierte Erklärung der JavaScript-Fehlererfassung

Vue implementiert ein verschiebbares Baumstrukturdiagramm

W3C Tutorial (9): W3C XPath Aktivitäten

Seriennummer des Aktivierungsschlüssels für Windows Server 2016 Standard Key

Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine

Unicode-Signatur-BOM-Problem (Byte Order Mark) für UTF-8-Dateien

Installation und Überprüfung von PyTorch in einer Linux- oder Windows-Umgebung (Lösung des Laufzeitfehlerproblems)

Detaillierte Erklärung zur Verwendung des MySQL-Datentyps DECIMAL

Ein Beispiel für die Ausführungsreihenfolge zwischen dem href-Sprung und dem onclick des HTML-Hyperlinks a-Tag

Einfache Implementierungsmethode zur Linux-Prozessüberwachung und zum automatischen Neustart

Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente

So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

Tutorial-Diagramm zur Installation von CentOS 7.3 auf einer virtuellen VMware-Maschine