Javascript karta

U ovom ćemo članku naučiti jednu od najčešće korištenih metoda za niz, a to je metoda map (). Metoda karte pomaže u mapiranju nizova prema našim zahtjevima. Da vidimo, što je metoda map ()? Kakva je sintaksa za mapiranje nizova pomoću metode map ()?

Niz je metoda karte koristi se za konstrukciju novog preslikanog niza na temelju povratne vrijednosti funkcije povratnog poziva za svaki element.

var mappedArray = niz.karta (callbackFunction, thisValue)

The uzvratiti poziv je funkcija koja će se svaki put pozvati za jedan element i vratiti vrijednost koja će biti pohranjena u novi niz. Sintaksa funkcije povratnog poziva je

funkcija (vrijednost, [indeks [, niz]])

vrijednost je neophodan argument, koji je zapravo jedan element niza.
The indeks je neobavezni argument koji će se koristiti kao indeks svakog elementa u funkciji povratnog poziva.
The niz je također neobavezni argument. Ovaj argument možemo proslijediti ako želimo koristiti niz u funkciji povratnog poziva.

thisValue je vrijednost koju želimo proslijediti, a koja će se koristiti kao "ovo" u funkciji povratnog poziva. U suprotnom, proslijedit će se "undefined".

Javascript nudi petlju for… in i petlju za svako ponavljanje kroz elemente i manipulaciju nizovima. Ali, zašto nam osim toga treba i metoda karte? Dva su glavna razloga za to. Jedno je razdvajanje brige, a drugo jednostavna sintaksa za obavljanje takvih zadataka. Pokušajmo s nekoliko različitih primjera da pokažemo svrhu i ispravnu upotrebu istih.

Primjeri

Prije svega, imat ćemo jednostavnu demonstraciju u kojoj imamo jednostavan niz brojeva na kojima ćemo pokušati izvesti bilo koju jednostavnu aritmetičku operaciju nad svakim pojedinačnim elementom.

var arr = [4, 8, 16, 64, 49];

Sada, prije primjene metode karte na ovaj niz. Prvo ćemo napisati funkciju povratnog poziva na koju možemo pozvati našu funkciju karte u kojoj, recimo, želimo pomnožiti svaki element s 10 i imati novi niz.

funkcija množenja (element)
var newElement = element * 10;
return newElement;

Sve je postavljeno za primjenu metode mape na niz i tražene rezultate.

var newArr = arr.karta (množenje);

Sada, ako pogledamo "newArr",

konzola.zapisnik (newArr);

U izlazu možemo vidjeti najnoviji mapirani niz prema našem zahtjevu.

Imajte ovo na umu da će duljina novog preslikanog niza definitivno biti jednaka izvornom nizu.

Postoji kraći način obavljanja istog zadatka pomoću strelice ili anonimne funkcije unutar metode karte. Dakle, možemo napisati funkciju povratnog poziva unutar ovakve metode karte

var newArr = arr.karta ((element) =>
povratni element * 10
)

Ili, ako želimo biti profesionalac i učiniti ga sažetijim. Mi to možemo

var newArr = arr.karta (e => e * 10)

U redu! Dakle, ovo je bila vrlo osnovna demonstracija metode karte i različitih načina za pisanje funkcije povratnog poziva. Ali, ova funkcija je korisnija kada se igramo s nizom predmeta. Tu se događa istinska implementacija.

Korištenje karte s nizom objekata

U ovom primjeru pretpostavljamo niz objekata u kojima svaki objekt sadrži informacije o igraču. Ime igrača i njegova osobna iskaznica.

var arr = [
id: 12, name: "James",
id: 36, name: "Morgan",
id: 66, name: "Jordan"
];

Recimo da želimo izvući ID-ove iz svakog objekta i imati novi niz ID-ova.
Ali, kako bismo razumjeli, kako se metoda karte razlikuje i pomaže bolje od foreach petlje. Pokušat ćemo oba (metoda karte i petlja foreach) kako bismo izvršili isti zadatak i naučili razliku.

Dakle, prvo ćemo pokušati izvući ID-ove pomoću foreach petlje, a zatim pomoću metode map.

var extractedIDs = [];
dolazak.forEach ((element) =>
vratiti extractedIDs.push (element.iskaznica);
)

Sada, ako pogledamo izvađene osobne iskaznice.

konzola.zapisnik (extractedIDs);

Odvojili smo ih u niz. Ali, hajde sada da demonstriramo isti rezultat pomoću metode map.

var extractedIDs = arr.karta ((element) =>
povratni element.iskaznica;
)
konzola.zapisnik (extractedIDs);

Gledajući razliku u kodu i isti izlaz, možemo shvatiti istinsku razliku između dvije (foreach i map) metode. Sintaksa i razdvajanje brige.

Slično tome, možemo izvesti puno drugih operacija. Ako se moramo igrati i dobiti neke podatke iz niza objekata. Pretpostavljamo niz objekata u kojima svaki objekt sadrži dva svojstva: ime i prezime.

var arr = [
firstName: "John", lastName: "Doe",
firstName: "Morgan", lastName: "Freeman",
firstName: "Jordan", lastName: "Peterson"
];

Sada želimo imati niz koji sadrži puna imena. Dakle, napisat ćemo funkciju karte poput ove kako bismo ispunili svoju svrhu

var fullName = arr.karta ((osoba) =>
vratiti osobu.firstName + "+ osoba.prezime
)
konzola.zapisnik (puno ime);

Kao što vidite, imamo zaseban niz s punim imenima. To je odlično.

Dakle, ovo su neki od osnovnih i različitih načina kako se funkcija karte može koristiti za ispunjavanje naših razvojnih zahtjeva i pomaže u životu svakog programera javascripta.

Zaključak

U ovom smo članku saznali o najčešće korištenoj javascript metodi map () za nizove i naučili neke od različitih načina korištenja metode map. Ovaj članak objašnjava koncept metode karte na tako jednostavan i dubok način da ga svaki koder početnik može razumjeti i iskoristiti za svoje potrebe. Dakle, nastavite učiti, raditi i stjecati iskustvo u javascriptu s linuxhintom.com kako bi ga bolje razumjeli. Puno ti hvala!