Hogyan egyszerűsítheti kódbázisát a JavaScript (), redukciós () és szűrési () JavaScript-ben

Amikor elolvasta az Array.reduce-t és azt, hogy milyen klassz, az első és néha az egyetlen példa a számok összege. Ez nem a „hasznos” definíciónk. ?

Sőt, még soha nem láttam valódi kódbázisban. De sokat láttam 7–8 soros ciklusos utasításokkal egy olyan rendes feladat megoldására, ahol az Array.reduce egy sorban megtehette.

Nemrég írtam át néhány modult ezeknek a nagyszerű funkcióknak a segítségével. Meglepett, hogy a kódbázis mennyire leegyszerűsödött. Tehát az alábbiakban felsoroljuk a finomságokat.

Ha jó példája van a térkép vagy a csökkentési módszer használatára, tegye közzé a megjegyzések részben. ?

Kezdjük el!

1. Távolítsa el a másolatokat egy szám / karakterlánc tömbből

Nos, ez az egyetlen, ami nem a térkép / kicsinyítés / szűrés témakör , de annyira kompakt, hogy nehéz volt nem felvenni a listára. Ráadásul néhány példában is felhasználjuk.

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

2. Egyszerű keresés (kis- és nagybetűk megkülönböztetése)

A filter () metódus új tömböt hoz létre az összes olyan elemgel, amely megfelel a megadott függvény által végrehajtott tesztnek.

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. Egyszerű keresés (kis- és nagybetűk nem)

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

4. Ellenőrizze, hogy valamelyik felhasználó rendelkezik-e rendszergazdai jogokkal

A néhány () módszer azt teszteli, hogy a tömbben legalább egy elem megfelel-e a megadott függvény által végrehajtott tesztnek.

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

5. Tömbök tömbjének simítása

Az eredmény az első iteráció egyenlő: [... [], ... [1, 2, 3]] segítségével átalakítja a [1, 2, 3] - ezt az értéket biztosítunk, mint egy „ACC” a második iterációs és hamar.

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]

Kicsit javíthatjuk ezt a kódot, ha egy üres tömböt kihagyunk a reduc ()[] második argumentumaként . Ezután a beágyazott első értéket használjuk kiinduló acc értékként. Köszönet Vlagyimir Efanovnak.

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

Megjegyezzük, hogy a spread operátor belül csökkenteni nem nagy teljesítmény. Ez a példa arra az esetre vonatkozik, amikor a teljesítmény mérésének van értelme a felhasználási eset szempontjából. ☝️

Hála Paweł Wolaknak, itt van egy rövidebb út az Array nélkül .

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

Az Array.flat is jön, de még mindig kísérleti jellegű.

6. Hozzon létre egy objektumot, amely tartalmazza a megadott kulcs frekvenciáját

Csoportosítsuk és számoljuk meg a tömb minden elemének 'age' tulajdonságát:

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}

Köszönet a sai krishnának, hogy ezt javasolta!

7. Tömbök indexelése (keresőtábla)

Ahelyett, hogy a teljes tömböt feldolgoznánk egy felhasználó azonosító alapján történő keresésére, létrehozhatunk egy objektumot, ahol a felhasználó azonosítója kulcsot jelent (állandó keresési idővel).

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' } }

Ez akkor hasznos, ha sokszor azonosítóval kell hozzáférnie az adatokhoz uTable[85].name.

8. Bontsa ki az egyes kulcsok egyedi értékeit a tömb minden eleméről

Hozzunk létre egy listát a meglévő felhasználói csoportokról. A map () metódus új tömböt hoz létre a kapott függvény meghívásának eredményeivel a hívó tömb minden elemén.

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

9. Objektumkulcs-értéktérkép megfordítása

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"] }

Ez az egy vonalhajó elég trükkösnek tűnik. Itt vesszőt használunk, és ez azt jelenti, hogy zárójelben adjuk vissza az utolsó értéket - acc. Írjuk át ezt a példát produkciókészebb és előadóbb módon:

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

Itt nem használunk spread operátort - ez minden tömböt hoz létre minden reduc () hívásnál, ami nagy teljesítménybüntetést von maga után: O (n²). Ehelyett a régi jó push () metódus .

10. Hozzon létre egy Fahrenheit-érték tömböt egy Celsius-érték tömbbõl

Gondoljon arra, hogy minden elemet egy adott képlettel dolgoz fel?

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. Az objektum kódolása lekérdezési karakterláncba

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. A felhasználók tábláját csak meghatározott kulcsokkal nyomtassa ki olvasható karakterláncként

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 ❤️