JavaScript

Javascript karte

Javascript karte
Šajā rakstā mēs apgūsim vienu no masīvam visplašāk izmantotajām metodēm, kas ir kartes () metode. Kartes metode palīdz kartēt masīvus atbilstoši mūsu prasībām. Apskatīsim, kāda ir kartes () metode? Kāda ir sintakse karšu kartēšanai, izmantojot metodi map ()?

Masīvs ir kartes metode tiek izmantots, lai izveidotu jaunu kartētu masīvu, pamatojoties uz katra elementa atzvanīšanas funkcijas atgriešanās vērtību.

var mappedArray = masīvs.karte (callbackFunction, thisValue)

The atzvani ir funkcija, kas tiks izsaukta katru reizi vienam elementam un atgriezīs vērtību, kas tiks saglabāta jaunā masīvā. Atzvana funkcijas sintakse ir

funkcija (vērtība, [rādītājs [, masīvs]])

vērtība ir nepieciešams arguments, kas faktiski ir viens masīva elements.
The indekss ir neobligāts arguments, kas tiks izmantots kā atzvanīšanas funkcijas katra elementa indekss.
The masīvs ir arī izvēles arguments. Mēs varam nodot šo argumentu, ja vēlamies izmantot masīvu atzvanīšanas funkcijā.

thisValue ir vērtība, kuru mēs vēlamies nodot un kas tiks izmantota kā “šī” atzvanīšanas funkcijā. Pretējā gadījumā tiks nedefinēts.

Javascript nodrošina “…” un “foreach” cilpu iterācijai caur elementiem un manipulācijām ar masīviem. Bet kāpēc mums ir nepieciešama kartes metode, izņemot to? Tam ir divi galvenie iemesli. Viens no tiem ir bažu nodalīšana, bet otra ir viegla sintakse šādu uzdevumu veikšanai. Izmēģināsim dažus dažādus piemērus, lai parādītu tā mērķi un pareizu izmantošanu.

Piemēri

Pirmkārt, mums būs vienkārša demonstrācija, kurā mums būs vienkāršs skaitļu masīvs, ar kuru mēs mēģināsim veikt jebkuru vienkāršu aritmētisko darbību katram elementam.

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

Tagad, pirms kartes metodes piemērošanas šim masīvam. Vispirms mēs uzrakstīsim atzvanīšanas funkciju, kurai mēs varam izsaukt mūsu kartes funkciju, kurā, pieņemsim, ka mēs vēlamies katru elementu reizināt ar 10 un mums ir jauns masīvs.

funkcija reizināt (elements)
var newElement = elements * 10;
atgriezt newElement;

Viss ir iestatīts, lai masīvā izmantotu kartes metodi un iegūtu nepieciešamos rezultātus.

var newArr = arr.karte (reizināt);

Tagad, ja mēs ieskatāmies “newArr”,

konsole.žurnāls (newArr);

Mēs varam redzēt jaunāko kartēto masīvu izvadē atbilstoši mūsu prasībām.


Paturiet to prātā, ka jaunā kartētā masīva garums noteikti būs vienāds ar sākotnējo masīvu.

Ir īsāks veids, kā veikt vienu un to pašu uzdevumu, izmantojot bultiņu vai anonīmu funkciju kartes metodē. Tātad, mēs varam uzrakstīt atzvanīšanas funkciju, izmantojot šādu kartes metodi

var newArr = arr.karte ((elements) =>
atgriešanās elements * 10
)

Vai arī, ja mēs vēlamies būt profesionāļi un padarīt to kodolīgāku. Mēs to varam izdarīt

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

Labi! Tātad šī bija ļoti vienkārša kartes metodes un dažādu veidu atzvanīšanas funkcijas demonstrēšana. Bet šī funkcija ir noderīgāka, kad mēs spēlējamies ar virkni objektu. Tur notiek patiesa ieviešana.

Kartes izmantošana ar objektu masīvu

Šajā piemērā mēs pieņemam objektu masīvu, kurā katrs objekts satur spēlētāja informāciju. Spēlētāja vārds un personas kods.

var arr = [
id: 12, vārds: "Džeimss",
id: 36, nosaukums: "Morgan",
id: 66, nosaukums: "Jordānija"
];

Pieņemsim, ka mēs vēlamies iegūt ID no katra objekta un mums ir jauns ID masīvs.
Bet, lai saprastu, kā kartes metode atšķiras un palīdz labāk nekā foreach cilpa. Mēs izmēģināsim abus šos (kartes metodi un foreach loop), lai veiktu vienu un to pašu uzdevumu un uzzinātu atšķirību.

Tātad, vispirms mēs mēģināsim iegūt ID, izmantojot foreach cilpu un pēc tam izmantojot kartes metodi.

var extractedIDs = [];
arr.forEach ((elements) =>
atgūt extractIDID.push (elements.id);
)

Tagad, ja mēs apskatīsim iegūtos ID.

konsole.žurnāls (extractIDID);


Mēs esam tos sadalījuši masīvā. Bet tagad parādīsim to pašu rezultātu, izmantojot kartes metodi.

var extractedIDs = arr.karte ((elements) =>
atgriešanās elements.id;
)
konsole.žurnāls (extractIDID);


Aplūkojot koda atšķirību un to pašu izvadi, mēs varam saprast patieso atšķirību starp abām (foreach un map) metodēm. Rūpes sintakse un atdalīšana.

Līdzīgi mēs varam veikt daudz citu darbību. Ja mums jāspēlē un jāiegūst daži dati no objektu masīva. Mēs pieņemam objektu masīvu, kurā katram objektam ir divas īpašības: vārds un uzvārds.

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

Tagad mēs vēlamies, lai būtu masīvs, kurā būtu pilni vārdi. Tātad, lai izpildītu savu mērķi, mēs uzrakstīsim šādu kartes funkciju

var fullName = arr.karte ((persona) =>
atgriešanās persona.vārds + "+ persona.uzvārds
)
konsole.žurnāls (fullName);


Kā redzat, mums ir atsevišķs masīvs ar pilniem nosaukumiem. Tas ir lieliski.

Šie ir daži no galvenajiem un dažādajiem veidiem, kā kartes funkciju var izmantot, lai izpildītu mūsu attīstības prasības un palīdzētu ikvienam javascript izstrādātāja dzīvē.

Secinājums

Šajā rakstā mēs esam iemācījušies par javascript visbiežāk izmantoto map () metodi masīviem un esam iemācījušies dažus dažādus kartes metodes izmantošanas veidus. Šajā rakstā kartes metodes jēdziens tiek izskaidrots tik viegli un dziļi, ka jebkurš iesācēju kodētājs to var saprast un izmantot savām vajadzībām. Tātad, turpiniet mācīties, strādāt un gūt pieredzi javascript ar linuxhint.com, lai to labāk saprastu. Liels tev paldies!

Kā izmantot Xdotool, lai stimulētu peles klikšķus un taustiņsitienus Linux
Xdotool ir bezmaksas un atvērtā koda komandrindas rīks peles klikšķu un taustiņu simulāciju simulēšanai. Šajā rakstā būs īss ceļvedis par xdotool izma...
5 labākie ergonomiskie datoru peles izstrādājumi Linux
Vai ilgstoša datora lietošana izraisa sāpes plaukstas locītavā vai pirkstos? Vai jūs ciešat no stīvām locītavām un jums pastāvīgi ir jāspiež rokas? Va...
How to Change Mouse and Touchpad Settings Using Xinput in Linux
Most Linux distributions ship with “libinput” library by default to handle input events on a system. It can process input events on both Wayland and X...