Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels "Fünf interessante Möglichkeiten zur Verwendung von Array.reduce () (und ein langweiliger Weg)" von Chris Ferdinandi.
Von allen modernen Methoden zum Arbeiten mit Arrays war Array.reduce () die schwierigste, die ich verwenden musste.
Auf den ersten Blick scheint es eine einfache, langweilige Methode zu sein, die wenig bewirkt. Trotz seines bescheidenen Erscheinungsbilds ist Array.reduce () eine leistungsstarke und flexible Erweiterung Ihrer Entwicklerwerkzeuge.
Sehen wir uns heute einige interessante Dinge an, die Sie mit Array.reduce () tun können.
So funktioniert Array.reduce ()
Die meisten modernen Array-Methoden geben ein neues Array zurück. Die Methode Array.reduce () ist etwas flexibler. Er kann alles zurückgeben. Sein Zweck ist es, ein Array zu nehmen und seinen Inhalt auf einen Wert zu komprimieren.
Dieser Wert kann eine Zahl, eine Zeichenfolge oder sogar ein Objekt oder ein neues Array sein. Dies ist der Teil, der mich immer verblüfft hat - ich habe nicht verstanden, wie flexibel es ist!
Syntax
Array.reduce () akzeptiert zwei Argumente: die Rückrufmethode, die ausgeführt wird, um jedes Element im Array zu starten, und den Anfangswert initialValue.
Der Rückruf akzeptiert auch zwei Argumente: den Akkumulator, der der aktuelle kombinierte Wert ist, und das aktuelle Element in der currentValue-Schleife. Alles, was Sie zurückgeben, wird als Akkumulator für das nächste Element in der Schleife verwendet. Die allererste Schleife verwendet stattdessen den Anfangswert.
var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting); }, starting);
Schauen wir uns einige Beispiele an.
var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting);
1. Summation von Zahlen
Angenommen, Sie haben ein Array von Zahlen, die Sie zusammenfassen möchten. Mit Array.forEach () können wir so etwas tun:
var total = 0; [1, 2, 3].forEach(function (num) { total += num; });
Dies ist ein Beispielklischee für die Verwendung von Array.reduce (). Das Wort "Akkumulator" ist verwirrend. In diesem Beispiel werden wir es "Summe" nennen, weil es das ist, was es von Natur aus ist.
var total = [1, 2, 3].reduce(function (sum, current) { return sum + current; }, 0); 0 .
Im Rückruf addieren wir den aktuellen Wert zu dem Betrag, der im ersten Zyklus einen Anfangswert von 0 hat, dann 1 (Anfangswert 0 plus Elementwert 1), dann 3 (Gesamtwert 1 plus Elementwert 2) und so weiter.
Ein Beispiel.
2. Eine Alternative zur Kombination der Array-Methoden Array.map () und Array.filter () in einem Schritt
Stellen Sie sich vor, es gibt viele Zauberer in Hogwarts.
var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }];
Wir möchten ein neues Array erstellen, das nur die Namen der Master von Hufflepuff enthält. Eine Möglichkeit, dies zu tun, besteht darin, die Array.filter () - Methode zu verwenden, um nur die Assistenten zurückzugewinnen, die zu Hause über eine Hufflepuff-Eigenschaft verfügen. Anschließend erstellen wir mit der Array.map () -Methode ein neues Array, das nur die Namenseigenschaft für die verbleibenden Master enthält.
// var hufflepuff = wizards.filter(function (wizard) { return wizard.house === 'Hufflepuff'; }).map(function (wizard) { return wizard.name; });
Mit der Array.reduce () -Methode können Sie dasselbe Array in einem Durchgang erhalten, wodurch unsere Leistung verbessert wird. Wir übergeben ein leeres Array ([]) als Anfangswert. Bei jedem Durchgang prüfen wir, ob es sich bei wizard.house um einen Hufflepuff handelt. Wenn ja, senden Sie es an newArr (unseren Akku in diesem Beispiel). Wenn nicht, nichts tun.
Geben Sie in jedem Fall newArr zurück, um den Akku im nächsten Durchgang abzurufen.
// var hufflepuff = wizards.reduce(function (newArr, wizard) { if (wizard.house === 'Hufflepuff') { newArr.push(wizard.name); } return newArr; }, []);
Ein Beispiel.
3.Erstellen Sie ein Markup aus einem Array
Was ist, wenn wir in Hufflepuff eine ungeordnete Liste von Mastern erstellen möchten, anstatt eine Reihe von Namen zu erstellen? Übergeben Sie anstelle eines leeren Arrays in Array.reduce () als Anfangswert einen leeren String ('') und nennen Sie ihn html.
Wenn wizard.house gleich Hufflepuff ist, kombinieren wir unseren HTML-String mit wizard.name, der in die öffnenden und schließenden Listenelemente (li) eingeschlossen ist. Dann geben Sie HTML als Akkumulator in der nächsten Schleife zurück.
// var hufflepuffList = wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, '');
Fügen Sie das öffnende und schließende ungeordnete Listenelement vor und nach Array.reduce () hinzu. Jetzt können Sie dem DOM Markups hinzufügen.
// var hufflepuffList = '<ul>' + wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, '') + '</ul>';
Ein Beispiel.
4. Gruppieren ähnlicher Elemente in einem Array
Die lodash- Bibliothek verfügt über eine groupBy () -Methode, die eine Auflistung von Elementen als Array verwendet und diese anhand einiger Kriterien zu einem Objekt gruppiert.
Nehmen wir an, wir brauchen eine Reihe von Zahlen.
Wenn wir alle Elemente nach ihrem ganzzahligen Wert in Zahlen gruppieren möchten, sollte dies mit lodash geschehen.
var numbers = [6.1, 4.2, 6.3]; // returns {'4': [4.2], '6': [6.1, 6.3]} _.groupBy(numbers, Math.floor);
Wenn es eine Reihe von Wörtern gibt und Sie die Elemente in den Wörtern nach ihrer Länge gruppieren müssen, würden wir das tun.
var words = ['one', 'two', 'three']; // returns {'3': ['one', 'two'], '5': ['three']} _.groupBy(words, 'length');
Erstellen einer groupBy () -Funktion mit Array.reduce ()
Sie können dieselbe Funktionalität mithilfe der Array.reduce () -Methode neu erstellen.
Wir erstellen eine Hilfsfunktion groupBy (), die ein Array und Kriterien für die Sortierung als Argumente verwendet. In groupBy () führen wir Array.reduce () für unser Array aus, übergeben ein leeres Objekt ({}) als Startpunkt und geben das Ergebnis zurück.
var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { // Some code will go here... }, {}); };
In Array.reduce () rufen wir die Rückruffunktion auf, um zu prüfen, ob das Kriterium eine auf ein Element angewendete Funktion oder eine Eigenschaft eines Elements ist. Dann erhalten wir seinen Wert aus dem aktuellen Element.
Wenn das Objekt noch keine Eigenschaft mit diesem Wert hat, erstellen Sie sie [Eigenschaft] und weisen Sie ein leeres Array als Wert zu. Fügen Sie dieser Eigenschaft schließlich ein Element hinzu und geben Sie das Objekt als Akkumulator für den nächsten Zyklus zurück.
var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { // , // var key = typeof criteria === 'function' ? criteria(item) : item[criteria]; // , . if (!obj.hasOwnProperty(key)) { obj[key] = []; } // obj[key].push(item); // return obj; }, {});};
Demonstration einer abgeschlossenen Hilfsfunktion.
Besonderer Dank geht an Tom Bremer für seine Hilfe. Diese Hilfsfunktion und vieles mehr finden Sie im Vanilla JS Toolkit .
5. Kombinieren von Daten aus zwei Quellen zu einem Array
Erinnern Sie sich an unsere Liste der Assistenten.
var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }];
Was wäre, wenn es einen anderen Datensatz gäbe - ein Objekt mit einem Haus und Punkten, die jeder Magier verdient hat?
var points = { HarryPotter: 500, CedricDiggory: 750, RonaldWeasley: 100, HermioneGranger: 1270 };
Stellen Sie sich vor, wir möchten beide Datensätze in einem Array mit der Anzahl der Punkte kombinieren, die zu den Daten jedes Assistenten im Assistentenarray hinzugefügt werden. Wie kann man das machen?
Die Array.reduce () Methode ist dafür perfekt!
var wizardsWithPoints = wizards.reduce(function (arr, wizard) { // points, // var key = wizard.name.replace(' ', ' '); // , , // 0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } // wizard . arr.push(wizard); // . return arr; }, []);
Ein Beispiel für das Kombinieren von Daten aus zwei Quellen zu einem Array .
6. Kombinieren von Daten aus zwei Quellen zu einem Objekt
Was ist, wenn stattdessen die beiden Datenquellen zu einem Objekt kombiniert werden müssen, in dem der Name jedes Assistenten der Schlüssel ist und dessen Haus und Gläser Eigenschaften sind? Auch hierfür ist die Array.reduce () -Methode perfekt.
var wizardsAsAnObject = wizards.reduce(function (obj, wizard) { // points, // var key = wizard.name.replace(' ', ' '); // , , // 0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } // name delete wizard.name; // wizard obj[key] = wizard; // return obj; }, {});
Ein Beispiel für das Kombinieren von Daten aus zwei Quellen zu einem Objekt .
Soll ich Array.reduce () verwenden?
Die Array.reduce () -Methode hat sich von einer bedeutungslosen zu meiner bevorzugten JavaScript-Methode entwickelt. Lohnt es sich also, es zu benutzen? Und wann?
Die Array.reduce () -Methode bietet fantastische Browserunterstützung. Es funktioniert in allen modernen Browsern und im IE9. Es wird seit langem von mobilen Browsern unterstützt. Wenn Sie noch mehr benötigen, können Sie eine Polyfüllung hinzufügen, um die Unterstützung in IE6 zurückzugeben.
Das schwerwiegendste Problem kann sein, dass Array.reduce () für Leute verwirrend ist, die es noch nie [Methode] angetroffen haben. Die Kombination der Array.filter () -Methoden mit Array.map () ist langsamer und erfordert zusätzliche Schritte, ist jedoch einfacher zu lesen. Die Namen der Methoden geben an, was sie tun sollen.
Wie bereits erwähnt, vereinfacht die Array.reduce () -Methode im Allgemeinen komplexere Dinge. Ein gutes Beispiel ist die Hilfsfunktion groupBy ().
Letztendlich ist dies ein weiteres Tool für Ihr Toolkit. Ein Werkzeug, das bei richtiger Anwendung Superkräfte geben kann.
Über den Autor
Chris Ferdinandi hilft Menschen dabei, Vanille-JavaScript zu lernen. Er glaubt, dass es eine einfachere und zuverlässigere Möglichkeit gibt, Dinge für das Internet zu tun.
Chris ist Autor der Vanilla JS Pocket Guide- Reihe, Schöpfer des Lehrplans der Vanilla JS Academy und Moderator des Vanilla JS Podcast . Der Entwickler-Newsletter wird an jedem Wochentag von Tausenden von Entwicklern gelesen.
Er schulte Entwickler in Organisationen wie Chobani und Boston Globe, und seine JavaScript-Plugins wurden von Apple und der Harvard Business School verwendet. Chris Coyer, Gründer von CSS-Tricks und CodePen, beschrieb seine Arbeit als "endlos zitiert".
Chris liebt Piraten, Welpen und Pixar-Filme und lebt auch in der Nähe von Pferdefarmen auf dem Land in Massachusetts. Er führt Go Make Things mit einem Bailey-Welpen.