Како поједноставити базу кодова мапом (), смањити () и филтрирати () у ЈаваСцрипт-у

Када прочитате о Арраи.редуце и како је то цоол, први и понекад једини пример који ћете наћи је збир бројева. Ово није наша дефиниција „корисног“. ?

Штавише, никада га нисам видео у стварној бази кодова. Али, оно што сам много видео је 7-8 линија фор-лооп наредби за решавање редовног задатка где Арраи.редуце то може да уради у једном реду.

Недавно сам преписао неколико модула користећи ове сјајне функције. Изненадило ме је како је кодна база постала поједностављена. Дакле, доле је листа доброта.

Ако имате добар пример употребе мапе или методе смањења - објавите је у одељку за коментаре. ?

Хајде да почнемо!

1. Уклоните дупликате из низа бројева / низова

Па, ово је једини који се не односи на мап / редуце / филтер , али је толико компактан да је било тешко не ставити га на листу. Плус, користићемо је и у неколико примера.

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

2. Једноставно претраживање (осетљиво на велика и мала слова)

Филтер () метод креира нову низ са свим елементима који пролазе тест спроводи приложеног функцијом.

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. Једноставно претраживање (без великих и малих слова)

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

4. Проверите да ли неко од корисника има администраторска права

Тхе неке () метод тестира да ли бар један елемент у низу пролази тест спроводи приложеног функцијом.

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

5. Сравнавање низа низова

Резултат прве итерације једнак је: [… [],… [1, 2, 3]] значи да се трансформише у [1, 2, 3] - ову вредност дајемо као „ацц“ за другу итерацију и ускоро.

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]

Овај код можемо мало побољшати изостављањем празног низа []као другог аргумента за редуце (). Онда је прва вредност од угнијежђени ће се користити као почетне АЦЦ вредности. Захваљујући Владимиру Ефанову.

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

Имајте на уму да употреба оператора ширења унутар редукције није добра за перформансе. Овај пример је случај када мерење перформанси има смисла за ваш случај употребе. ☝

Захваљујући Павелу Волаку, ево краћег начина без Арраи.редуце:

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

Такође долази Арраи.флат , али то је и даље експериментална карактеристика.

6. Креирајте објекат који садржи фреквенцију наведеног кључа

Хајде да групишемо и пребројимо својство 'аге' за сваку ставку у низу:

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}

Хвала саи крисхна-у што је предложио ову!

7. Индексирање низа објеката (табела претраживања)

Уместо да обрађујемо читав низ за проналажење корисника према ид-у, можемо да конструишемо објекат где ИД корисника представља кључ (са сталним временом претраживања).

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

Корисно је када својим подацима морате пуно да приступите путем ИД- uTable[85].nameа.

8. Издвојите јединствене вредности за дати кључ сваке ставке у низу

Направимо листу постојећих група корисника. Мапа () метод креира нову низ са резултатима позива на дане функција на сваком елементу у позивање низу.

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

9. Преокрет мапе кључ / вредност објекта

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

Ова једнослојна линија изгледа прилично незгодно. Овде користимо оператор зареза, што значи да у заградама враћамо последњу вредност - acc. Препишимо овај пример на производније и ефикаснији начин:

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

Овде не користимо оператор ширења - он ствара нови низ на сваком позиву редуце () , што доводи до велике казне за перформансе: О (н²). Уместо старе добре методе пусх () .

10. Створите низ Фахренхеитових вредности од низа Целзијусових вредности

Схватите то као обраду сваког елемента датом формулом?

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. Кодирајте објекат у низ упита

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. Одштампајте табелу корисника као читљив низ само са наведеним кључевима

Понекад желите да низ објеката одштампате одабраним кључевима као низ, али схватите да ЈСОН.стрингифи није тако сјајан?

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(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. Пронађите и замените пар кључ / вредност у низу објеката

Рецимо да желимо да променимо Јованово доба. Ако знате индекса, можете да напишете ову линију: users[1].age = 29. Међутим, погледајмо још један начин за то:

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

Овде, уместо да променимо појединачну ставку у нашем низу, ми креирамо нову са само једним елементом који се разликује. Сада можемо упоређивати наше низове само референцом попут updatedUsers == usersсупер брзе! Реацт.јс користи овај приступ да би убрзао процес помирења. Ево објашњења.

14. Унија (А ∪ Б) низова

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.

Пре месец дана добио сам задатак да направим једноставан АПИ за претрагу. Све што је требало је да прикупи неке податке од треће стране ...

Хвала на читању ❤