Gruppieren von Array-Elementen mit Funktionen

JavaScriptJavaScriptBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir lernen, wie man mit JavaScript Elemente eines Arrays basierend auf einer angegebenen Funktion gruppiert. Wir werden Array.prototype.map() und Array.prototype.reduce() verwenden, um ein Objekt zu erstellen, dessen Schlüssel aus den gemappten Ergebnissen erzeugt werden. Am Ende dieses Labs werden Sie eine solide Vorstellung davon haben, wie man in JavaScript Daten gruppiert und kategorisiert.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} javascript/data_types -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} javascript/arith_ops -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} javascript/comp_ops -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} javascript/array_methods -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} javascript/higher_funcs -.-> lab-28325{{"Gruppieren von Array-Elementen mit Funktionen"}} end

Wie man Arrayelemente gruppiert

Wenn Sie sich an das Programmieren üben möchten, können Sie beginnen, indem Sie das Terminal/SSH öffnen und node eingeben. Wenn Sie bereit sind, können Sie die Elemente eines Arrays basierend auf einer angegebenen Funktion gruppieren, indem Sie die folgenden Schritte ausführen:

  1. Verwenden Sie Array.prototype.map(), um die Werte des Arrays auf eine Funktion oder eine Eigenschaftsname abzubilden.
  2. Verwenden Sie Array.prototype.reduce(), um ein Objekt zu erstellen, dessen Schlüssel aus den gemappten Ergebnissen erzeugt werden.

Hier ist ein Beispielcodeausschnitt:

const groupBy = (arr, fn) =>
  arr
    .map(typeof fn === "function" ? fn : (val) => val[fn])
    .reduce((acc, val, i) => {
      acc[val] = (acc[val] || []).concat(arr[i]);
      return acc;
    }, {});

Um den Code zu testen, können Sie die folgenden Beispiele verwenden:

groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]}
groupBy(["one", "two", "three"], "length"); // {3: ['one', 'two'], 5: ['three']}

Diese werden Objekte zurückgeben, deren Schlüssel basierend auf der angegebenen Funktion und deren Werte Arrays der ursprünglichen Elemente sind, die der Funktion entsprechen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Gruppieren von Array-Elementen" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.