15 metoda JavaScript nizova koje biste trebali savladati danas

Web programeri svih razina vještina, od programera početnika do stručnjaka za kodiranje, uviđaju važnost JavaScripta u razvoju modernih web stranica. JavaScript je toliko dominantan da je bitna vještina da li ćete znati stvarati web aplikacije.

Jedan od najmoćnijih građevnih blokova ugrađenih u JavaScript jezik su nizovi. Nizovi se obično nalaze u mnogim programskim jezicima i korisni su za spremanje podataka.

JavaScript također uključuje korisne značajke poznate kao metode polja. Evo petnaest kojih biste trebali pomno pogledati da biste razvili svoje vještine kao programer.

Koje su metode niza?

Metode niza su funkcije ugrađene u JavaScript koje možete primijeniti na svoje nizove. Svaka metoda ima jedinstvenu funkciju koja vrši promjenu ili izračun u vašem nizu, čime vas štedi od potrebe kodiranja uobičajenih funkcija ispočetka.

Metode niza u JavaScriptu pokreću se pomoću točkaste oznake pridružene varijabli niza. Budući da su samo JavaScript funkcije, uvijek završavaju zagradama koje mogu sadržavati izborne argumente. Evo metode pridružene jednostavnom nizu tzv myArray .

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

Ovaj bi kôd primijenio metodu tzv pop na niz.

Primjer niza

Za svaki primjer upotrijebite ogledni niz koji ćemo nazvati myArray , za izvođenje metoda na. Slobodno povucite svoju konzolu i kodirajte.

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

Ovi će primjeri pretpostaviti da poznajete temelje što je JavaScript i kako radi . Ako to ne učinite, u redu smo, svi smo tu da učimo i rastemo.

Kopajte u ovih petnaest moćnih metoda niza!

1. Polje.push ()

Što to radi: gurnuti() uzima vaš niz i dodaje jedan ili više elemenata na kraj niza, a zatim vraća novu duljinu niza. Ova metoda će izmijeniti vaš postojeći niz.

Pokretanjem dodajte niz 20 u niz gurnuti() , koristeći 20 kao argument.

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

Provjerite radi li:

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

Pokretanje gurnuti() method na myArray dodao vrijednost datu u argumentu u niz. U ovom slučaju, 20. Kada provjerite myArray u konzoli, vidjet ćete da je vrijednost sada dodana na kraj niza.

2. Array.concat ()

Što to radi: concat () može spojiti dva ili više polja u novi niz. Ne mijenja postojeće nizove već stvara novi.

Uzeti myArray i spojiti niz tzv noviArray u nju.

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]

Ova metoda čini čuda kada se radi s više niza ili vrijednosti koje morate kombinirati, sve u jednom prilično jednostavnom koraku pri korištenju varijabli.

3. Array.join ()

Što to radi: pridružiti() uzima niz i povezuje sadržaj niza, odvojen zarezom. Rezultat se stavlja u niz. Možete odrediti razdjelnik ako želite koristiti alternativu zarezu.

Pogledajte kako to funkcionira pomoću myArray -a. Prvo koristite zadanu metodu bez argumenta za razdvajanje, koja će koristiti zarez.

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

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

JavaScript će ispisati niz, pri čemu je svaka vrijednost u nizu odvojena zarezom. Za promjenu separatora možete koristiti argument u funkciji. Promatrajte ga s dva argumenta: jednim razmakom i nizom.

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'

Prvi primjer je razmak, čineći niz koji možete lako pročitati.

Drugi primjer koristi ('i') , a ovdje morate znati dvije stvari.

Prvo, koristimo riječ 'i' za odvajanje vrijednosti. Drugo, postoji razmak s obje strane riječi 'i'. Ovo je važno imati na umu pri korištenju pridružiti() . JavaScript doslovno čita argumente; pa ako je ovaj prostor izostavljen, sve će se izbrisati (npr. '2i4 i 5 ...' itd.) Ne baš čitljiv izlaz!

4. Array.forEach ()

Što to radi: za svakoga() (osjetljivo na velika i mala slova!) obavlja funkciju za svaku stavku u vašem nizu. Ova je funkcija bilo koja funkcija koju stvorite, slično kao da koristite petlju 'for' za primjenu funkcije na niz, ali s mnogo manje posla za kodiranje.

Ima još malo toga za za svakoga() ; pogledajte sintaksu, a zatim izvedite jednostavnu funkciju za demonstraciju.

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

Mi koristimo myArray , za svakoga() primjenjuje se s točkastim zapisom. Funkciju koju želite koristiti postavite u zagrade argumenata, što je funkcija (stavka) u primjeru.

Pogledaj funkcija (stavka) . Ovo je funkcija izvedena unutar forEach () i ima svoj argument. Pozivamo argument artikal . O ovom argumentu morate znati dvije stvari:

Kada forEach () prelazi preko vašeg niza, primjenjuje kôd na ovaj argument. Zamislite to kao privremenu varijablu koja sadrži trenutni element.
Vi birate naziv argumenta, može se imenovati kako god želite. Obično bi se to zvalo nešto što olakšava razumijevanje, poput 'stavka' ili 'element'.

Imajući na umu te dvije stvari, pogledajte ovaj jednostavan primjer. Svakoj vrijednosti dodajte 15 i neka konzola prikaže rezultat.

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

Mi koristimo artikal u ovom primjeru kao varijabla, pa je funkcija napisana tako da svakoj vrijednosti doda 15 putem artikal . Konzola zatim ispisuje rezultate. Evo kako to izgleda na konzoli Google Chrome.

Rezultat je svaki broj u nizu, ali s 15 dodanih!

5. Array.map ()

Što to radi: karta() izvodi funkciju na svakom elementu u vašem nizu i smješta rezultat u novi niz.

Pokretanje funkcije na svakom elementu zvuči kao forEach (). Ovdje je razlika karta() stvara novi niz kada se pokrene. forEach () ne stvara automatski novi niz, za to ćete morati kodirati određenu funkciju.

Upotrijebite map () da biste udvostručili vrijednost svakog elementa u myArrayu i postavili ih u novi niz. Vidjet ćete isto funkcija (stavka) sintaksu za malo više vježbe.

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

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

Provjerite rezultate u konzoli.

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

myArray je nepromijenjen:

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

6. Polje.unshift ()

Što radi: Slično načinu rada metode push (), nepomaknuto () method uzima vaš niz i dodaje jedan ili više elemenata na početak niza umjesto na kraj i vraća novu duljinu niza. Ova metoda će izmijeniti vaš postojeći niz.

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

Prilikom prijavljivanja niza na konzolu, trebali biste vidjeti broj 0 na početku niza.

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

7. Polje.sort ()

Što radi: Sortiranje je jedna od najčešćih operacija izvedenih na nizu i vrlo je korisna. JavaScript vrsta() metoda array može se koristiti za sortiranje niza brojeva ili čak nizova sa samo jednim retkom koda. Ova je operacija na mjestu i vraća sortirano polje promjenom početnog niza. Uzmite drugačiji skup brojeva za myArray ovaj put.

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

Budući da se sortiranje obavlja na mjestu, ne morate deklarirati zasebnu varijablu za sortirano polje.

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

Prema zadanim postavkama, niz je sortiran uzlaznim redoslijedom, ali prema želji možete proslijediti prilagođenu funkciju u vrsta() metoda za sortiranje niza na željeni način. U ovom slučaju prošao sam običaj funkcija strelice numeričko sortiranje niza uzlaznim redoslijedom.

8. Polje.reverse ()

Što radi: Kao što naziv govori, obrnuto () metoda se koristi za obrnuti redoslijed elemenata u nizu. Imajte na umu da se time ne poništava sadržaj niza, već samo sam redoslijed. Evo primjera za bolje razumijevanje ove metode:

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

Zapišite izlaz na konzolu kako biste provjerili rad.

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

Kao što vidite, redoslijed elemenata je obrnut. Prije je element na zadnjem indeksu (element 14 na indeksu 6) sada element na nultom indeksu itd.

9. Polje.slice ()

Što to radi: kriška() koristi se za dohvaćanje plitke kopije dijela niza. Jednostavnije rečeno, ova vam metoda omogućuje odabir određenih elemenata iz niza prema njihovom indeksu. Možete proslijediti početni indeks elementa iz kojeg želite dohvatiti i elemente, a po izboru i krajnji indeks.

Ako ne navedete krajnji indeks, dohvatit će se svi elementi od početnog indeksa do kraja niza. Ova metoda vraća novi niz i ne mijenja postojeći.

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

U gornjem kodu dohvaćeni su svi elementi od drugog indeksa do posljednjeg jer se parametar krajnjeg indeksa ne prosljeđuje. Zabilježite oba niza na konzolu.

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

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

Očigledno, početni niz se ne mijenja metodom slice () i umjesto toga vraća novi niz koji je pohranjen u narezanArray promjenjiva. Evo primjera u kojem se parametar krajnjeg indeksa također prenosi u kriška() metoda.

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

[4, 5]

10. Array.splice ()

Što to radi: spojnica () je korisna metoda niza koja se koristi za uklanjanje ili zamjenu elemenata u polju na mjestu. Navođenjem indeksa i broja elemenata za brisanje mijenja se niz.

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

U gornjem primjeru, myArray niz je spojen iz indeksa 2 i 3 elementa su uklonjena iz njega. Niz se sada sastoji od:

[2, 4, 12, 14]

Da biste zamijenili elemente, a ne samo ih izbrisali, možete proslijediti neograničeni broj parametara s elementima koje želite zamijeniti, na primjer:

upload HD video na facebook android

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 ()

Što radi: filtar() method je korisna metoda niza koja uzima funkciju koja sadrži test i vraća novi niz sa svim elementima koji prolaze taj test. U skladu sa svojim imenom, ova se metoda koristi za filtriranje potrebnih elemenata od ostalih elemenata. Filtriranje se vrši pomoću funkcije koja vraća logičku vrijednost.

Evo primjera filtar() metoda koja se koristi za dobivanje samo onih elemenata iz niza koji su djeljivi s 2.

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

U gornjem primjeru funkcija strelice se prenosi kao parametar koji uzima svaki broj iz izvornog niza i provjerava je li djeljiv s 2 pomoću modula ( % ) i jednakost ( === ) operater. Evo kako izgleda izlaz:

[2, 4, 12, 14]

12. Array.reduce ()

Što to radi: smanjiti() je metoda niza koja preuzima funkciju reduktora i izvršava je na svakom elementu niza za izlaz jedne vrijednosti dok se vraća. Za potrebne parametre potrebna je funkcija reduktora s akumulatorskom varijablom i varijablom trenutnog elementa. Vrijednost akumulatora pamti se kroz sve iteracije i na kraju se vraća nakon posljednje iteracije.

Popularna upotreba ove metode je izračun zbroja svih elemenata u nizu. Implementacija ove funkcionalnosti je kako slijedi:

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

0 se prenosi kao drugi parametar u gornjem primjeru, koji se koristi kao početna vrijednost varijable akumulatora. The sumOfNums varijabla će sadržavati povratnu vrijednost smanjiti() metoda za koju se očekuje da će biti zbroj svih elemenata u nizu.

console.log(sumOfNums); 53

13. Array.includes ()

Što radi: Traženje elementa u nizu kako bi se provjerilo je li prisutan operacija je koja se koristi prilično često i stoga JavaScript za to ima ugrađenu metodu u obliku uključuje () metoda polja. Evo kako ga možete koristiti:

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));

Ova metoda uzima potrebni parametar, element za traženje i izborni parametar, indeks niza iz kojeg se može započeti pretraživanje. Ovisno o tome je li taj element prisutan ili ne, vratit će se pravi ili lažno odnosno. Stoga će izlaz biti:

true  
false  
true  
false

14. Array.indexOf ()

Što to radi: indexOf () Metoda se koristi za otkrivanje indeksa pri kojem se prva pojavljivanja navedenog elementa mogu pronaći u nizu. Iako je slična metodi include (), ova metoda vraća numerički indeks ili -1 ako element nije prisutan u nizu.

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 () metoda koristi strogu jednakost za provjeru prisutnosti elementa, što znači da vrijednost, kao i tip podataka, trebaju biti isti. Opcijski drugi parametar uzima indeks s kojeg počinje pretraživanje. Na temelju ovih kriterija izlaz će izgledati ovako:

1  
-1  
4

15. Array.fill ()

Što radi: Često ćete možda morati postaviti sve vrijednosti u nizu na statičku vrijednost, poput 0. Umjesto petlje, možete isprobati ispuni () metoda za istu svrhu. Ovu metodu možete pozvati u nizu s 1 obaveznim parametrom: vrijednost za popunjavanje niza i 2 izborna parametra: početni i završni indeks za popunjavanje između. Ova metoda mijenja izlazni niz.

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);

Kada zapisujete izlaz na konzolu, vidjet ćete:

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]

Sljedeći koraci na vašem JavaScript putovanju

Nizovi su snažan dio jezika JavaScripta, zbog čega postoji toliko mnogo ugrađenih metoda koje vam olakšavaju život kao razvojnom programeru. Najbolji način za svladavanje ovih petnaest metoda je vježba.

Dok nastavljate učiti JavaScript, MDN je izvrstan resurs za detaljnu dokumentaciju. Udobno se smjestite u konzolu, a zatim uzdignite svoje vještine uz najbolje JavaScript uređivače za programere. Jeste li spremni za izradu web stranice s JavaScriptom? Zašto ne biste pogledali neke okvire koje možete razmotriti.

Udio Udio Cvrkut E -pošta 6 JavaScript okvira vrijednih učenja

Postoji mnogo JavaScript okvira koji pomažu u razvoju. Evo nekih koje biste trebali znati.

Pročitajte Dalje Povezane teme

Programiranje
JavaScript
Savjeti za kodiranje

O autoru Nitin Ranganath(Objavljen 31 članak)

Nitin je strastveni programer softvera i student računalnog inženjerstva koji razvija web aplikacije koristeći JavaScript tehnologije. Radi kao slobodni web programer, a u slobodno vrijeme voli pisati za Linux i programiranje.

Više od Nitina Ranganatha

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu