So vereinfachen Sie Ihre Codebasis mit map (), redu () und filter () in JavaScript

Wenn Sie über Array.reduce lesen und wie cool es ist, ist das erste und manchmal einzige Beispiel, das Sie finden, die Summe der Zahlen. Dies ist nicht unsere Definition von "nützlich". ?

Außerdem habe ich es noch nie in einer echten Codebasis gesehen. Was ich jedoch oft gesehen habe, sind 7–8-Zeilen-For-Loop-Anweisungen zum Lösen einer regulären Aufgabe, bei der Array.reduce dies in einer Zeile ausführen kann.

Kürzlich habe ich einige Module mit diesen großartigen Funktionen neu geschrieben. Es überraschte mich, wie vereinfacht die Codebasis wurde. Unten finden Sie eine Liste mit Leckereien.

Wenn Sie ein gutes Beispiel für die Verwendung einer Karte oder einer Reduzierungsmethode haben , veröffentlichen Sie diese im Kommentarbereich. ?

Lass uns anfangen!

1. Entfernen Sie Duplikate aus einem Array von Zahlen / Zeichenfolgen

Nun, dies ist das einzige, bei dem es nicht um Map / Reduce / Filter geht , aber es ist so kompakt, dass es schwierig war, es nicht in die Liste aufzunehmen. Außerdem werden wir es auch in einigen Beispielen verwenden.

const values = [3, 1, 3, 5, 2, 4, 4, 4]; const uniqueValues = [...new Set(values)]; // uniqueValues is [3, 1, 5, 2, 4]

2. Eine einfache Suche (Groß- und Kleinschreibung beachten)

Die filter () -Methode erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let res = users.filter(it => it.name.includes('oli')); // res is []

3. Eine einfache Suche (ohne Berücksichtigung der Groß- und Kleinschreibung)

let res = users.filter(it => new RegExp('oli', "i").test(it.name)); // res is [ { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]

4. Überprüfen Sie, ob einer der Benutzer über Administratorrechte verfügt

Die Methode some () testet, ob mindestens ein Element im Array den von der bereitgestellten Funktion implementierten Test besteht.

const hasAdmin = users.some(user => user.group === 'admin'); // hasAdmin is true

5. Reduzieren eines Arrays von Arrays

Das Ergebnis der ersten Iteration ist gleich: [… [],… [1, 2, 3]] bedeutet, dass es sich in [1, 2, 3] umwandelt - diesen Wert geben wir als 'acc' für die zweite Iteration und an demnächst.

const nested = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let flat = nested.reduce((acc, it) => [...acc, ...it], []); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]

Wir können diesen Code leicht verbessern, indem wir ein leeres Array []als zweites Argument für redu () weglassen . Dann wird der erste Wert des verschachtelten Wertes als anfänglicher acc- Wert verwendet. Vielen Dank an Vladimir Efanov.

let flat = nested.reduce((acc, it) => [...acc, ...it]); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]

Beachten Sie, dass die Verwendung des Spread-Operators innerhalb einer Reduzierung die Leistung nicht beeinträchtigt. Dieses Beispiel ist ein Fall, in dem die Messung der Leistung für Ihren Anwendungsfall sinnvoll ist. ☝️

Dank Paweł Wolak gibt es hier einen kürzeren Weg ohne Array.reduce:

let flat = [].concat.apply([], nested);

Auch Array.flat kommt, aber es ist immer noch eine experimentelle Funktion.

6. Erstellen Sie ein Objekt, das die Häufigkeit des angegebenen Schlüssels enthält

Lassen Sie uns die Eigenschaft 'age' für jedes Element im Array gruppieren und zählen:

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; const groupByAge = users.reduce((acc, it) => , {}); // groupByAge is {23: 1, 28: 2, 34: 1}

Vielen Dank an sai krishna für den Vorschlag!

7. Indizieren eines Arrays von Objekten (Nachschlagetabelle)

Anstatt das gesamte Array zu verarbeiten, um einen Benutzer anhand seiner ID zu finden, können wir ein Objekt erstellen, bei dem die Benutzer-ID einen Schlüssel darstellt (mit konstanter Suchzeit).

const uTable = users.reduce((acc, it) => (acc[it.id] = it, acc), {}) // uTable equals: { 11: { id: 11, name: 'Adam', age: 23, group: 'editor' }, 47: { id: 47, name: 'John', age: 28, group: 'admin' }, 85: { id: 85, name: 'William', age: 34, group: 'editor' }, 97: { id: 97, name: 'Oliver', age: 28, group: 'admin' } }

Es ist nützlich, wenn Sie wie häufig auf Ihre Daten per ID zugreifen müssen uTable[85].name.

8. Extrahieren Sie die eindeutigen Werte für den angegebenen Schlüssel jedes Elements im Array

Erstellen wir eine Liste der vorhandenen Benutzergruppen. Die map () -Methode erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.

const listOfUserGroups = [...new Set(users.map(it => it.group))]; // listOfUserGroups is ['editor', 'admin'];

9. Umkehrung der Objektschlüsselwertzuordnung

const cities = { Lyon: 'France', Berlin: 'Germany', Paris: 'France' }; let countries = Object.keys(cities).reduce( (acc, k) => (acc[cities[k]] = [...(acc[cities[k]] || []), k], acc) , {}); // countries is { France: ["Lyon", "Paris"], Germany: ["Berlin"] }

Dieser Einzeiler sieht ziemlich knifflig aus. Wir verwenden hier den Kommaoperator und geben den letzten Wert in Klammern - zurück acc. Lassen Sie uns dieses Beispiel produktionsfähiger und performanter umschreiben:

let countries = Object.keys(cities).reduce((acc, k) =>  []; acc[country].push(k); return acc; , {});

Hier verwenden wir keinen Spread-Operator - er erstellt bei jedem Aufruf von redu () ein neues Array , was zu einem großen Leistungsverlust führt: O (n²). Stattdessen die alte gute push () Methode .

10. Erstellen Sie ein Array von Fahrenheit-Werten aus einem Array von Celsius-Werten

Stellen Sie sich vor, Sie verarbeiten jedes Element mit einer bestimmten Formel?

const celsius = [-15, -5, 0, 10, 16, 20, 24, 32] const fahrenheit = celsius.map(t => t * 1.8 + 32); // fahrenheit is [5, 23, 32, 50, 60.8, 68, 75.2, 89.6]

11. Codieren Sie ein Objekt in eine Abfragezeichenfolge

const params = {lat: 45, lng: 6, alt: 1000}; const queryString = Object.entries(params).map(p => encodeURIComponent(p[0]) + '=' + encodeURIComponent(p[1])).join('&') // queryString is "lat=45&lng=6&alt=1000"

12. Drucken Sie eine Benutzertabelle nur mit den angegebenen Schlüsseln als lesbare Zeichenfolge

Sometimes you want to print your array of objects with selected keys as a string, but you realize that JSON.stringify is not that great ?

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; users.map(({id, age, group}) => `\n${id} ${age} ${group}`).join('') // it returns: " 11 23 editor 47 28 admin 85 34 editor 97 28 admin"

JSON.stringify can make the string output more readable, but not as a table:

JSON.stringify(users, ['id', 'name', 'group'], 2); // it returns: "[ { "id": 11, "name": "Adam", "group": "editor" }, { "id": 47, "name": "John", "group": "admin" }, { "id": 85, "name": "William", "group": "editor" }, { "id": 97, "name": "Oliver", "group": "admin" } ]"

13. Find and replace a key-value pair in an array of objects

Let’s say we want to change John’s age. If you know the index, you can write this line: users[1].age = 29. However, let’s take a look at another way of doing it:

const updatedUsers = users.map( p => p.id !== 47 ? p : {...p, age: p.age + 1} ); // John is turning 29 now

Here instead of changing the single item in our array, we create a new one with only one element different. Now we can compare our arrays just by reference like updatedUsers == users which is super quick! React.js uses this approach to speed up the reconciliation process. Here is an explanation.

14. Union (A ∪ B) of arrays

Less code than importing and calling the lodash method union.

const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1]; [...new Set([...arrA, ...arrB])]; // returns [1, 4, 3, 2, 5, 6, 7]

15. Intersection (A ∩ B) of arrays

The last one!

const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1]; arrA.filter(it => arrB.includes(it)); // returns [1, 2]

As an exercise try to implement difference (A \ B) of the arrays. Hint: use an exclamation mark.

Thanks to Asmor and incarnatethegreat for their comments about #9.

That’s it!

If you have any questions or feedback, let me know in the comments down below or ping me on Twitter.

If this was useful, please click the clap ? button down below a few times to show your support! ⬇⬇ ??

Here are more articles I’ve written:

How to get started with internationalization in JavaScript

By adapting our app for different languages and countries, we provide a better user experience. It’s simpler for users…

Production ready Node.js REST APIs Setup using TypeScript, PostgreSQL and Redis.

A month ago I was given a task to build a simple Search API. All It had to do is to grab some data from 3rd party…

Thanks for reading ❤️