Javascript ES6: Map-Reduce-Filter-Find

Isprobajte Naš Instrument Za Uklanjanje Problema

Javascript ES6: Map-Reduce-Filter-Find

Ako ste ljubitelj javascripta i koristite ga svakodnevno, ovo će vam se svidjeti

Javascript je jezik koji daje slobodu pisanja koda u bilo kojem stilu, od imperativa do deklarativnih stilova. Većina programera koristi imperativ jer dolaze iz pozadine OOP -ova, možda im se sviđa ili im nije poznat drugi stil. Prije nego što zaronimo u deklarativni stil koji je FP, shvatimo razlike u dvoje promatrajući primjer (Ako već znate razliku, možete preskočiti nekoliko odlomaka).

Imperativ

// to calculate the sum of array elements const sum = (arr) => { let result = 0; for (let i = 0; i

Imperativni stil je cool, ali zamislite što ako ovdje postoji složena matematička logika tada će veličina koda i čitljivost biti sranje. Povećava kognitivno opterećenje tijekom čitanja, a s vremenom olakšava greške u zaključivanju i logici. Također, glavna složenost ovog isječka koda proizlazi iz činjenice da umjesto da govorimo računalu što želimo da radi, mi ga upućujemo kako to učiniti.



Deklarativno

// calculate the sum of array elements const sum = (arr) => arr.reduce((total, item) => total += item, 0);

Ovo izgleda prilično čisto, kraće, izražajno, jezgrovito, sa manje sklonosti pogreškama, lakše za održavanje i lakše ispravljanje pogrešaka. Računaru govorimo ono što želimo radije radije kako to učiniti.

Deklarativni pristup je lako optimizirati na kraju dobavljača i također ima manje nuspojava.

Napomena: ako ste zabrinuti zbog izvedbe gore navedene dvije i drugih funkcija javascripta (preslikavanje, smanjenje, filtriranje, pronalaženje), trebali biste za mali skup podataka moći vidjeti ovdje za veliki skup podataka (100–1000000)

Bez odgode, krenimo u stvarnu radnju s najčešće korištenom Javascript funkcijom za funkcionalno programiranje.

Karta

// definition collection.map((currentValue, index) => { // Return element for newArray }); // example const arr = [1,2,3,4,5]; const newArray = arr.map(i => i*10); // return a new array with all value as multiple of 10;

Karta radi na nizu i vraća niz koji je to . Iznad isječak koda radi na zbirci, tj. Nizu i prima povratni poziv s trenutnom vrijednošću iteracije, indeksira kao argumente i vraća novi niz.

Napomena: Karte su prikladne za promjenu/pretvaranje cijelog niza umjesto za prekid protoka za neke uvjete, što znači da performanse karte sisaju, provjerite podcrtano ovdje ali se lako koriste za male skupove podataka.

Smanjiti

// definition collection.reduce((accumulator, item, index) => { // logic to perform to get accumulator as a return value }, initialValue for accumulator); // example const arr = [1,2,3,4,5]; const total = arr.reduce((acc, item) => acc+= item, 0); // return a total as 15

Reduce radi na nizu, ali može vratiti sve što želite da vrati . Kako naziv govori sam za sebe, može se svesti na bilo što i može se ponašati kao karta, pronaći, filtrirati ili bilo koja druga funkcija JavaScript. Gornji isječak koda radi na nizu i smanjuje ga za izračunavanje ukupne vrijednosti stavke niza.

Objašnjenje gornjeg primjera: Prilikom smanjenja prvog pokretanja, acc -u se dodjeljuje vrijednost 0, a zatim | _+_ | tj. | _+_ | koji će izračunati u | _+_ | tj. 1. Ova 1 bit će acc vrijednost za sljedeću iteraciju i to se nastavlja sve dok ne završimo sa svim stavkama niza.

Pronaći

acc+= item

Pronađi radove na nizu i vrati prvi element koji zadovoljava uvjet u funkciji.

Napomena: Lako, jednostavno, ali neučinkovito na velikom skupu podataka, zašto? izgled ovdje

filtar

acc = acc+item

Rad filtera na nizu vraća niz za filtrirane stavke.

Koristimo ih za neke scenarije u stvarnom svijetu + neki ES6. (pokušajmo s ARMD -om ispod tipki objekta)

Pitate se što je ARMD njegovo dodavanje, čitanje, mijenjanje, brisanje, super je stvoriti vlastiti žargon

0+1

Koristit ćemo | _+_ | kao niz za daljnje primjere

1. ARMD - Dodavanje novog elementa u | _+_ |

// definition collection.find((item) => { // return first element that satisfy the condition }); // example const arr = [1,2,8,4,5]; const value = arr.find(i => i%4 == 0); // return the first value i.e 8

Korištenje es6 spread operatora čini super lakim dodavanje elemenata u niz. Možemo koristiti operator širenja za spajanje dva različita niza, mijenjanje oblika objekata ili dodavanje parova vrijednosti dinamičkih ključeva itd.

// definition collection.filter((currentValue, index) => { // logic to filter array on }); // example const arr = [1,2,3,4,5]; const newArray = arr.filter(i => i%2 == 0); // return a new array with value [2, 4]

2. DO R doktor medicine - Dobijte adresu e -pošte, telefonski broj i web stranicu | _+_ | u novi niz

const users = [ { id: 1, name: 'Jonathon Haley', username: 'Monte.Weber2', email: '[email protected]', phone: '1-563-675-1857 x11708', website: 'carmela.net', password: 'hashed_password' }, { id: 2, name: 'Dean John', username: 'dd.1', email: '[email protected]', phone: '1-123-543-1857 123212', website: 'dd.net', password: 'Dean_hashed_password' }

Upotreba es6 za destrukturiranje ključeva objekata i karte za dobivanje polja podataka o kontaktima za korisnika.

file_put_contents nije uspio otvoriti tok

3. AR M D - Pronađite i zamijenite vrijednost za ključ objekata

users

4. RUKA D - Izbrišite neke ključeve iz objekta

Napomena: Zapravo nećemo izbrisati ključ, već ćemo vratiti novi objekt, ako želite izbrisati ključ, koristite operator delete, ovdje razmatramo nepromjenjivost objekta.

Za brisanje ključeva postoji mnogo načina, ali mi ćemo pogledati najjednostavnije, pojedinačno obložene. Pokušajmo izbrisati web mjesto od korisnika.

users

Čini se da je gornji kod praktički teško kodirati za velike objekte.

const newUser = { id: 4, name: 'Denomer Crazy', username: 'crazy.1', email: '[email protected]', phone: '', website: 'crazy.app', password: 'crazed_checker' }; const newData = [...users, newUser]; // add element at last or const newData = [newUser, ...users]; // add element at first or const newData = users.concat(newUser) // the old way

Mapiramo korisnike, a zatim na svakom korisniku napravimo redukciju i oblikujemo novi objekt (newObj), a zatim provjeravamo ima li ključ web stranice, ako je to web stranica vraćamo prethodno formirani newObj, ako ne, onda radimo operator širenja i dodajemo zahtijevaju ključ za obj i na kraju vraćaju newObj.

Ako vam ništa nije jasno ili želite nešto istaknuti, komentirajte dolje.

Hvala vam

#Javascript #ES6 #Webdev

Vidi Također: