15 JavaScript masīva metodes, kuras jums vajadzētu apgūt jau šodien

Visu prasmju līmeņu tīmekļa izstrādātāji, sākot ar iesācēju programmētājiem un beidzot ar kodēšanas ekspertiem, pārliecinās par JavaScript nozīmi mūsdienu vietņu izstrādē. JavaScript ir tik dominējošs, ka tā ir būtiska prasme zināt, vai gatavojaties izveidot tīmekļa lietotnes.

Viens no spēcīgākajiem JavaScript valodā iebūvētajiem blokiem ir masīvi. Masīvi parasti ir sastopami daudzās programmēšanas valodās un ir noderīgi datu glabāšanai.

JavaScript ietver arī noderīgas funkcijas, kas pazīstamas kā masīva metodes. Šeit ir piecpadsmit, kas jums rūpīgi jāizpēta, lai attīstītu savas kā izstrādātāja prasmes.

Kas ir masīva metodes?

Masīva metodes ir JavaScript iebūvētas funkcijas, kuras varat izmantot saviem masīviem. Katrai metodei ir unikāla funkcija, kas veic izmaiņas vai aprēķinus jūsu masīvā, tādējādi izvairoties no nepieciešamības kodēt parastās funkcijas no jauna.

JavaScript masīva metodes tiek palaistas, izmantojot jūsu masīva mainīgajam pievienoto punktu apzīmējumu. Tā kā tās ir tikai JavaScript funkcijas, tās vienmēr beidzas ar iekavām, kurās var būt neobligāti argumenti. Šeit ir metode, kas pievienota vienkāršam masīvam ar nosaukumu myArray .

let myArray = [1,2,3]; myArray.pop();

Šis kods piemērotu metodi, ko sauc pops uz masīvu.

Masīva piemērs

Katram piemēram izmantojiet masīva paraugu, ko mēs izsauksim myArray , lai veiktu metodes tālāk. Jūtieties brīvi izvilkt savu konsoli un kodu.

let myArray = [2,4,5,7,9,12,14];

Šie piemēri pieņems, ka jūs zināt pamatus kas ir JavaScript un kā tas darbojas . Ja jums tas nav labi, mēs visi esam šeit, lai mācītos un augtu.

Izpētiet šīs piecpadsmit spēcīgās masīva metodes!

1. Array.push ()

Ko tas dara: spiest () ņem jūsu masīvu un pievieno vienu vai vairākus elementus masīva beigām, pēc tam atgriež jauno masīva garumu. Šī metode mainīs jūsu esošo masīvu.

Pievienojiet masīvam skaitli 20, palaižot spiest () , izmantojot 20 kā argumentu.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

Pārbaudiet, vai tas darbojās:

console.log(myArray); [2,4,5,7,9,12,14,20]

Skrienot spiest () metode vietnē myArray masīvā pievienoja argumentā norādīto vērtību. Šajā gadījumā 20. Pārbaudot konsolē myArray, jūs redzēsit, ka vērtība tagad ir pievienota masīva beigām.

2. Array.concat ()

Ko tas dara: konkāts () var apvienot divus vai vairākus masīvus jaunā masīvā. Tas nemaina esošos masīvus, bet izveido jaunu.

Ņem myArray un apvienojiet masīvu ar nosaukumu newArray tajā.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

Šī metode rada brīnumus, strādājot ar vairākiem masīviem vai vērtībām, kas jums jāapvieno, viss vienā vienkāršā solī, izmantojot mainīgos.

3. Array.join ()

Ko tas dara: pievienoties () ņem masīvu un apvieno masīva saturu, atdalot ar komatu. Rezultāts tiek ievietots virknē. Jūs varat norādīt atdalītāju, ja vēlaties izmantot komatu alternatīvu.

Apskatiet, kā tas darbojas, izmantojot myArray. Vispirms izmantojiet noklusējuma metodi bez atdalītāja argumenta, kurā tiks izmantots komats.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

JavaScript izvadīs virkni, katru masīva vērtību atdalot ar komatu. Funkcijā varat izmantot argumentu, lai mainītu atdalītāju. Novērojiet to ar diviem argumentiem: vienu atstarpi un virkni.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Pirmais piemērs ir atstarpe, veidojot virkni, kuru var viegli izlasīt.

Otrais piemērs izmanto (' un ') , un šeit ir jāzina divas lietas.

Pirmkārt, mēs izmantojam vārdu “un”, lai atdalītu vērtības. Otrkārt, abās vārda “un” pusēs ir atstarpe. Šī ir svarīga lieta, kas jāpatur prātā, lietojot pievienoties () . JavaScript argumentus lasa burtiski; Tātad, ja šī vieta tiek atstāta ārpusē, viss tiks saspiests kopā (ti. '2and4and5 ...' utt.) Nav ļoti labi lasāma izeja!

4. Array.forEach ()

Ko tas dara: katram() (reģistrjutīgs!) veic funkciju katram jūsu masīva vienumam. Šī funkcija ir jebkura jūsu izveidota funkcija, kas līdzīga cilpas “for” izmantošanai, lai masīvam piemērotu funkciju, bet kodam ir daudz mazāk jāstrādā.

Ir vēl nedaudz katram() ; apskatiet sintaksi, pēc tam veiciet vienkāršu demonstrēšanas funkciju.

  
myArray.forEach(function(item){  
//code  
});

Mēs izmantojam myArray , katram() tiek lietots ar punktu apzīmējumu. Funkciju, kuru vēlaties izmantot, ievietojat argumentu iekavās, kas ir funkcija (vienums) piemērā.

Paskaties uz funkcija (vienums) . Šī ir funkcija, kas tiek izpildīta forEach () iekšpusē, un tai ir savs arguments. Mēs saucam par strīdu lieta . Par šo argumentu ir jāzina divas lietas:

Kad forEach () cilpas pār jūsu masīvu, tas izmanto kodu šim argumentam. Padomājiet par to kā par pagaidu mainīgo, kas satur pašreizējo elementu.
Jūs izvēlaties argumenta nosaukumu, to var nosaukt par visu, ko vēlaties. Parasti tas tiek nosaukts par kaut ko, kas atvieglo tā izpratni, piemēram, “vienums” vai “elements”.

Paturot prātā šīs divas lietas, pārbaudiet šo vienkāršo piemēru. Katrai vērtībai pievienojiet 15 un ļaujiet konsolei parādīt rezultātu.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

Mēs izmantojam lieta šajā piemērā kā mainīgais, tāpēc funkcija ir rakstīta, lai katrai vērtībai pievienotu 15, izmantojot lieta . Pēc tam konsole izdrukā rezultātus. Lūk, kā tas izskatās Google Chrome konsolē.

Rezultāts ir katrs skaitlis masīvā, bet tam pievienoti 15!

5. Array.map ()

Ko tas dara: karte () veic funkciju katram jūsu masīva elementam un ievieto rezultātu jaunā masīvā.

Funkcijas palaišana katram elementam izklausās kā forEach (). Atšķirība šeit ir karte () palaižot izveido jaunu masīvu. forEach () neveido jaunu masīvu automātiski, lai to izdarītu, jums ir jākodē noteikta funkcija.

Izmantojiet karti (), lai dubultotu katra myArray elementa vērtību un ievietotu to jaunā masīvā. Jūs redzēsit to pašu funkcija (vienums) sintakse nedaudz vairāk prakses.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Pārbaudiet rezultātus konsolē.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray ir nemainīgs:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

Ko tas dara: Līdzīgi kā darbojas push () metode, nemainīgs () metode paņem jūsu masīvu un masīva sākumam pievieno vienu vai vairākus elementus, nevis beigas, un atgriež jauno masīva garumu. Šī metode mainīs jūsu esošo masīvu.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

Piesakoties masīvam konsolē, masīva sākumā vajadzētu redzēt skaitli 0.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

Ko tas dara: Kārtošana ir viena no visbiežāk veiktajām masīva darbībām un ir ļoti noderīga. JavaScript kārtot () masīva metodi var izmantot, lai kārtotu skaitļu masīvu vai pat virknes, izmantojot tikai vienu koda rindu. Šī darbība ir ieviesta un atgriež sakārtoto masīvu, mainot sākotnējo masīvu. Izmantojiet citu skaitļu kopu myArray šoreiz.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

Tā kā šķirošana tiek veikta vietā, jums nav jādeklarē atsevišķs mainīgais sakārtotajam masīvam.

console.log(myArray); [10, 12, 34, 55, 65]

Pēc noklusējuma masīvs ir sakārtots augošā secībā, bet pēc izvēles varat nodot pielāgotu funkciju kārtot () metode masīva kārtošanai vēlamajā veidā. Šajā gadījumā es izturēju pasūtījumu bultiņas funkcija lai masīvu sakārtotu augošā secībā.

8. Array.reverse ()

Ko tas dara: Kā norāda nosaukums, otrādi () metode tiek izmantota, lai mainītu masīva elementu secību. Ņemiet vērā, ka tas neatceļ masīva saturu, bet tikai pašu secību. Šeit ir piemērs, lai labāk izprastu šo metodi:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

Reģistrējiet izvadi konsolē, lai pārbaudītu darbību.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Kā redzat, elementu secība ir mainīta. Iepriekš elements pēdējā indeksā (14. elements 6. indeksā) tagad ir elements nulles indeksā un tā tālāk.

9. Array.slice ()

Ko tas dara: šķēle () tiek izmantots, lai izgūtu masīva daļas seklu kopiju. Vienkāršāk sakot, šī metode ļauj atlasīt konkrētus elementus no masīva pēc to indeksa. Jūs varat nodot tā elementa sākuma indeksu, no kura vēlaties izgūt, un elementus un pēc izvēles arī beigu indeksu.

Ja nesniedzat beigu indeksu, tiks izgūti visi elementi no sākuma indeksa līdz masīva beigām. Šī metode atgriež jaunu masīvu un nemaina esošo.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

Iepriekš redzamajā kodā tiek izgūti visi elementi no otrā indeksa līdz pēdējam, jo beigu indeksa parametrs netiek nodots. Reģistrējiet abus masīvus konsolē.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Acīmredzot sākotnējais masīvs ar slice () metodi netiek modificēts un tā vietā atgriež jaunu masīvu, kas tiek saglabāts slicedArray mainīgais. Šeit ir piemērs, kurā beigu indeksa parametrs tiek nodots arī šķēle () metodi.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice ()

Ko tas dara: savienojums () ir noderīga masīva metode, ko izmanto, lai noņemtu vai nomainītu masīvā esošos elementus. Norādot dzēšamo elementu indeksu un skaitu, tas maina masīvu.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

Iepriekš minētajā piemērā ,. myArray masīvs ir savienots no 2. indeksa, un no tā tiek noņemti 3 elementi. Masīvs tagad sastāv no:

[2, 4, 12, 14]

Lai aizstātu elementus, nevis tikai tos dzēstu, varat nodot neierobežotu skaitu papildu parametru ar elementiem, kurus vēlaties aizstāt, piemēram:

kā lietot SD karti vietnē wii u

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

Ko tas dara: filtrs () metode ir noderīga masīva metode, kas izmanto funkciju, kas satur testu, un atgriež jaunu masīvu ar visiem elementiem, kas iztur šo pārbaudi. Atbilstoši nosaukumam šī metode tiek izmantota, lai filtrētu nepieciešamos elementus no citiem elementiem. Filtrēšana tiek veikta, izmantojot funkciju, kas atgriež Būla vērtību.

Šeit ir piemērs filtrs () metode, ko izmanto, lai no masīva iegūtu tikai tos elementus, kas dalās ar 2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

Iepriekš minētajā piemērā bultiņas funkcija tiek nodota kā parametrs, kas ņem katru skaitli no sākotnējā masīva un pārbauda, vai tas dalās ar 2, izmantojot modulo ( % ) un vienlīdzību ( === ) operators. Rezultāts izskatās šādi:

[2, 4, 12, 14]

12. Array.reduce ()

Ko tas dara: samazināt () ir masīva metode, kas izmanto reduktora funkciju un izpilda to katrā masīva elementā, lai atgriešanās laikā izvadītu vienu vērtību. Kā nepieciešamos parametrus tam nepieciešama reduktora funkcija ar akumulatora mainīgo un pašreizējā elementa mainīgo. Akumulatora vērtība tiek atcerēta visās iterācijās un galu galā tiek atgriezta pēc pēdējās iterācijas.

Populārs šīs metodes izmantošanas gadījums ir visu masīvā esošo elementu summas aprēķināšana. Šīs funkcionalitātes ieviešana ir šāda:

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

Iepriekš minētajā piemērā kā otrais parametrs tiek nodots 0, kas tiek izmantots kā akumulatora mainīgā sākotnējā vērtība. The sumOfNums mainīgais saturēs atgriežamo vērtību samazināt () metode, kas, domājams, būs visu masīva elementu summa.

console.log(sumOfNums); 53

13. Masīvs. Ietver ()

Ko tas dara: elementa meklēšana masīvā, lai pārbaudītu, vai tas atrodas, ir darbība, kas tiek izmantota diezgan bieži, un tāpēc JavaScript tam ir iebūvēta metode ietilpst() masīva metode. Tālāk ir norādīts, kā to izmantot.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

Šī metode izmanto nepieciešamo parametru, meklējamo elementu un papildu parametru - masīva indeksu, no kura sākt meklēšanu. Atkarībā no tā, vai šis elements ir vai nav, tas atgriezīsies taisnība vai nepatiesa attiecīgi. Tāpēc izeja būs šāda:

true  
false  
true  
false

14. Array.indexOf ()

Ko tas dara: indexOf () metodi izmanto, lai noskaidrotu indeksu, pie kura masīvā var atrast pirmo norādītā elementa parādīšanos. Lai gan tā ir līdzīga iekļaušanas () metodei, šī metode atgriež skaitlisko indeksu vai -1, ja elements nav masīvā.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

indexOf () metode izmanto stingru vienlīdzību, lai pārbaudītu, vai ir kāds elements, kas nozīmē, ka vērtībai, kā arī datu tipam jābūt vienādam. Neobligāts otrais parametrs izmanto indeksu, lai sāktu meklēšanu. Pamatojoties uz šiem kritērijiem, iznākums izskatīsies šādi:

1  
-1  
4

15. Array.fill ()

Ko tas dara: Bieži vien jums, iespējams, būs jāiestata visas masīva vērtības uz statisku vērtību, piemēram, 0. Tā vietā, lai izmantotu cilpu, varat izmēģināt aizpildīt () metode tam pašam mērķim. Šo metodi var izsaukt masīvā ar 1 nepieciešamo parametru: vērtība, ar kuru aizpildīt masīvu, un 2 izvēles parametri: sākuma un beigu indekss, kas jāaizpilda starp. Šī metode maina izejošo masīvu.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

Reģistrējot izvadi konsolē, jūs redzēsit:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

Nākamie soļi jūsu JavaScript ceļojumā

Masīvi ir spēcīga JavaScript valodas sastāvdaļa, tāpēc ir iebūvētas tik daudzas metodes, lai atvieglotu jūsu kā izstrādātāja dzīvi. Labākais veids, kā apgūt šīs piecpadsmit metodes, ir praktizēt.

Turpinot apgūt JavaScript, MDN ir lielisks resurss detalizētai dokumentācijai. Ērti atrodieties konsolē, pēc tam uzlabojiet savas prasmes, izmantojot labākos programmētāju JavaScript redaktorus. Vai esat gatavs izveidot savu vietni, izmantojot JavaScript? Kāpēc ne apskatīt dažas sistēmas, kuras varat apsvērt.

Kopīgot Kopīgot Čivināt E -pasts 6 JavaScript ietvari, kurus ir vērts apgūt

Ir daudz JavaScript ietvaru, kas palīdz attīstīties. Šeit ir daži, kas jums jāzina.

Lasīt Tālāk Saistītās tēmas

Programmēšana
JavaScript
Kodēšanas padomi

Par autoru Nitin Ranganath(31 raksts publicēts)

Nitins ir dedzīgs programmatūras izstrādātājs un datortehnikas students, kurš izstrādā tīmekļa lietojumprogrammas, izmantojot JavaScript tehnoloģijas. Viņš strādā kā ārštata tīmekļa izstrādātājs, un brīvajā laikā viņam patīk rakstīt Linux un programmēšanai.

Vairāk no Nitin Ranganath

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu