15 metod nizov JavaScript, ki bi jih morali obvladati danes

Spletni razvijalci vseh ravni znanja, od začetnikov programerjev do strokovnjakov za kodiranje, spoznajo pomen JavaScript pri razvoju sodobnih spletnih mest. JavaScript je tako prevladujoč, da je bistvena veščina, če želite ustvarjati spletne aplikacije.

Eden najmočnejših gradnikov, vgrajenih v jezik JavaScript, so matrike. Nizke pogosto najdemo v številnih programskih jezikih in so uporabne za shranjevanje podatkov.

JavaScript vključuje tudi uporabne funkcije, znane kot matrične metode. Tukaj je petnajst, ki si jih morate natančno ogledati, da povečate svoje sposobnosti kot razvijalec.

Kaj so metode matrike?

Metode nizov so funkcije, vgrajene v JavaScript, ki jih lahko uporabite za svoje matrike. Vsaka metoda ima edinstveno funkcijo, ki izvede spremembo ali izračun v vašem nizu, kar vam prihrani, da morate kodirati običajne funkcije iz nič.

Metode nizov v JavaScriptu se izvajajo s pikčastim zapisom, pritrjenim na spremenljivko polja. Ker so samo funkcije JavaScript, se vedno končajo z oklepaji, ki lahko vsebujejo izbirne argumente. Tukaj je metoda, pritrjena na preprosto matriko, imenovano myArray .

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

Ta koda bi uporabila metodo, imenovano pop na matriko.

Primer matrike

Za vsak primer uporabite vzorčno matriko, ki jo bomo poklicali myArray , za izvajanje metod na. Povlecite konzolo in kodo.

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

Ti primeri bodo domnevali, da poznate temelje kaj je JavaScript in kako deluje . Če tega ne storite, smo vsi tukaj, da se učimo in rastemo.

Poglobite se v teh petnajst zmogljivih metod nizov!

1. Array.push ()

Kaj počne: push () vzame vaš niz in na konec matrike doda enega ali več elementov, nato vrne novo dolžino matrike. Ta metoda bo spremenila vaš obstoječi niz.

Z zagonom dodajte številko 20 v matriko push () , pri čemer kot argument uporabi 20.

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

Preverite, če je delovalo:

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

Izvajanje push () method na myArray je v polje dodala vrednost, podano v argumentu. V tem primeru 20. Ko v konzoli preverite myArray, boste videli, da je vrednost zdaj dodana na konec matrike.

2. Array.concat ()

Kaj počne: concat () lahko združi dva ali več nizov v novo matriko. Ne spreminja obstoječih nizov, ampak ustvarja novega.

Vzemi myArray in združite niz, imenovan newArray vanj.

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]

Ta metoda dela čudeže pri obravnavi več nizov ali vrednosti, ki jih morate združiti, vse v enem precej preprostem koraku pri uporabi spremenljivk.

3. Array.join ()

Kaj počne: pridruži se () vzame matriko in združi vsebino matrike, ločeno z vejico. Rezultat je postavljen v niz. Če želite uporabiti alternativo vejici, lahko določite ločilo.

Poglejte, kako to deluje z uporabo myArray. Najprej uporabite privzeto metodo brez ločevalnega argumenta, ki bo uporabila vejico.

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

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

JavaScript bo izpisal niz, pri čemer bo vsaka vrednost v matriki ločena z vejico. Za spremembo ločevalnika lahko uporabite argument v funkciji. Opazujte ga z dvema argumentoma: enim presledkom in 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 primer je presledek, ki naredi niz, ki ga lahko preprosto preberete.

Drugi primer uporablja ('in') , tukaj pa morate vedeti dve stvari.

Najprej uporabljamo besedo 'in' za ločevanje vrednosti. Drugič, na obeh straneh besede 'in' je presledek. To je pomembno upoštevati pri uporabi pridruži se () . JavaScript bere argumente dobesedno; torej, če je ta prostor izpuščen, bo vse skupaj pobrisano (npr. '2and4and5 ...' itd.) Ni zelo berljiv izhod!

4. Array.forEach ()

Kaj počne: za vsakogar() (občutljivo na velike in male črke!) izvaja funkcijo za vsak element v vašem nizu. Ta funkcija je katera koli funkcija, ki jo ustvarite, podobno kot pri uporabi zanke 'for' za uporabo funkcije v matriki, vendar z veliko manj dela pri kodiranju.

Malo je še za za vsakogar() ; poglejte skladnjo, nato izvedite preprosto funkcijo za prikaz.

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

Mi uporabljamo myArray , za vsakogar() se uporablja s pikčastim zapisom. Funkcijo, ki jo želite uporabiti, postavite v oklepaj argumenta, ki je funkcija (element) v primeru.

Poglej funkcija (element) . To je funkcija, izvedena znotraj forEach (), in ima svoj argument. Kličemo argument element . O tem argumentu morate vedeti dve stvari:

Ko se forEach () vrti po vašem nizu, uporabi kodo za ta argument. Pomislite na to kot na začasno spremenljivko, ki vsebuje trenutni element.
Izberete ime argumenta, lahko ga poimenujete karkoli želite. Običajno bi bilo to poimenovano kot nekaj, kar olajša razumevanje, na primer 'element' ali 'element'.

Ob upoštevanju teh dveh stvari si oglejte ta preprost primer. Vsaki vrednosti dodajte 15 in konzola naj prikaže rezultat.

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

Mi uporabljamo element v tem primeru kot spremenljivka, zato je funkcija napisana tako, da vsaki vrednosti doda 15 po element . Konzola nato natisne rezultate. Evo, kako izgleda v konzoli Google Chrome.

Rezultat je vsaka številka v nizu, vendar ji je dodanih 15!

5. Array.map ()

Kaj počne: zemljevid() izvaja funkcijo za vsak element v vašem nizu in rezultat postavi v novo matriko.

Zagon funkcije za vsak element zveni kot forEach (). Tu je razlika zemljevid() ustvari novo polje, ko se zažene. forEach () ne ustvari samodejno novega niza, za to bi morali kodirati posebno funkcijo.

Uporabite map () za podvojitev vrednosti vsakega elementa v myArray in jih postavite v novo matriko. Videli boste enako funkcija (element) sintaksa za malo več vaje.

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

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

Preverite rezultate v konzoli.

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

myArray je nespremenjen:

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

6. Array.unshift ()

Kaj počne: Podobno kot metoda push () deluje, unshift () method vzame vaš niz in namesto konca doda enega ali več elementov na začetek matrike in vrne novo dolžino matrike. Ta metoda bo spremenila vaš obstoječi niz.

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

Ko berete matriko v konzolo, bi morali na začetku matrike videti številko 0.

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

7. Array.sort ()

Kaj počne: Razvrščanje je ena najpogostejših operacij, izvedenih na matriki, in je zelo uporabna. JavaScript razvrsti () matrično metodo lahko uporabite za razvrščanje niza številk ali celo nizov s samo eno vrstico kode. Ta operacija je na mestu in vrne razvrščeno matriko s spreminjanjem začetne matrike. Vzemite drugačen nabor številk za myArray tokrat.

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

Ker je razvrščanje izvedeno, vam za razvrščeno matriko ni treba razglasiti ločene spremenljivke.

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

Polje je privzeto razvrščeno v naraščajočem vrstnem redu, vendar lahko poljubno prenesete funkcijo po meri v razvrsti () način razvrščanja matrike na želeni način. V tem primeru sem sprejel navado puščica razvrstiti matriko številčno po naraščajočem vrstnem redu.

8. Array.reverse ()

Kaj počne: Kot že ime pove, je vzvratno () metoda se uporablja za obračanje vrstnega reda elementov v matriki. Upoštevajte, da to ne spremeni vsebine matrike, ampak samo vrstni red. Tukaj je primer za boljše razumevanje te metode:

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

Zabeležite izhod v konzolo, da preverite delovanje.

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

Kot lahko vidite, je vrstni red elementov obrnjen. Prej je bil element pri zadnjem indeksu (element 14 pri indeksu 6) zdaj element pri nultem indeksu itd.

9. Array.slice ()

Kaj počne: rezina () se uporablja za pridobivanje plitke kopije dela matrike. Preprosteje povedano, ta metoda vam omogoča, da izberete določene elemente iz matrike po njihovem indeksu. Lahko posredujete začetni indeks elementa, iz katerega želite pridobiti, in elemente ter po izbiri tudi končni indeks.

Če ne navedete končnega indeksa, bodo pridobljeni vsi elementi od začetnega indeksa do konca matrike. Ta metoda vrne novo matriko in ne spremeni obstoječe.

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

V zgornji kodi so pridobljeni vsi elementi od drugega indeksa do zadnjega, ker parameter končnega indeksa ni poslan. Zabeležite oba niza v konzolo.

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

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

Očitno začetna matrika ni spremenjena z metodo slice () in namesto tega vrne novo matriko, ki je shranjena v narezanArray spremenljivka. Tukaj je primer, v katerem se parameter končnega indeksa prenese tudi v rezina () metoda.

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

[4, 5]

10. Array.splice ()

Kaj počne: spojka () je uporabna metoda matrike, ki se uporablja za odstranjevanje ali zamenjavo elementov v postavljeni matriki. Z določanjem indeksa in števila elementov za brisanje spremeni matriko.

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

V zgornjem primeru je myArray matrika je spojena iz indeksa 2 in iz nje so odstranjeni 3 elementi. Niz je zdaj sestavljen iz:

[2, 4, 12, 14]

Če želite zamenjati elemente in jih ne samo izbrisati, lahko posredujete poljubno število neobveznih parametrov z elementi, ki jih želite zamenjati, na primer:

kako uporabljati sd kartico na 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 ()

Kaj počne: filter () method je uporabna metoda matrike, ki sprejme funkcijo, ki vsebuje test, in vrne novo polje z vsemi elementi, ki opravijo ta test. V skladu s svojim imenom se ta metoda uporablja za filtriranje elementov, ki jih potrebujete, iz drugih elementov. Filtriranje se izvede s funkcijo, ki vrne logično vrednost.

Tukaj je primer filter () metoda, ki se uporablja za pridobivanje samo tistih elementov iz matrike, ki so deljivi z 2.

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

V zgornjem primeru je funkcija puščice posredovana kot parameter, ki vzame vsako številko iz prvotne matrike in preveri, ali je po modulu deljiva z 2 ( % ) in enakost ( === ) operater. Takole izgleda izhod:

[2, 4, 12, 14]

12. Array.reduce ()

Kaj počne: zmanjšaj () je matrična metoda, ki prevzame funkcijo reduktorja in jo izvede na vsakem elementu matrike, da med vrnitvijo prikaže eno samo vrednost. Za potrebne parametre potrebuje funkcijo reduktorja s spremenljivko akumulatorja in spremenljivko trenutnega elementa. Vrednost akumulatorja se zapomni v vseh ponovitvah in se na koncu vrne po zadnji iteraciji.

Priljubljen primer uporabe te metode je izračun vsote vseh elementov v matriki. Izvajanje te funkcije je naslednje:

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

0 je podano kot drugi parameter v zgornjem primeru, ki se uporablja kot začetna vrednost spremenljivke akumulatorja. The sumOfNums spremenljivka bo vsebovala vrnjeno vrednost zmanjšaj () metoda, za katero se pričakuje, da bo vsota vseh elementov v matriki.

console.log(sumOfNums); 53

13. Array.includes ()

Kaj počne: Iskanje elementa v matriki za preverjanje njegove prisotnosti je operacija, ki se uporablja precej pogosto, zato ima JavaScript za to vgrajeno metodo v obliki vključuje () matrična metoda. Tako ga lahko uporabite:

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

Ta metoda vzame zahtevani parameter, element za iskanje in izbirni parameter, indeks matrike, iz katerega lahko začnete iskati. Odvisno od tega, ali je ta element prisoten ali ne, se bo vrnil prav ali napačno oz. Zato bo rezultat:

true  
false  
true  
false

14. Array.indexOf ()

Kaj počne: indeks() metoda se uporablja za ugotavljanje indeksa, pri katerem je v matriki mogoče najti prvi pojav določenega elementa. Čeprav je podobna metodi include (), ta metoda vrne številski indeks ali -1, če element ni prisoten v matriki.

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

indeks() metoda uporablja strogo enakost za preverjanje prisotnosti elementa, kar pomeni, da morata biti vrednost in vrsta podatkov enaka. Izbirni drugi parameter vzame indeks za začetek iskanja. Na podlagi teh meril bo rezultat videti tako:

1  
-1  
4

15. Array.fill ()

Kaj počne: Pogosto boste morda morali vse vrednosti v matriki nastaviti na statično vrednost, na primer 0. Namesto zanke lahko poskusite izpolni () metoda za isti namen. To metodo lahko pokličete v matriki z 1 zahtevanim parametrom: vrednostjo, s katero želite matriko zapolniti, in 2 neobveznima parametroma: začetni in končni indeks, ki ju želite vnesti. Ta metoda spremeni izhodno matriko.

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

Ko zapišete izhod v konzolo, boste videli:

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]

Naslednji koraki na vašem potovanju po JavaScript

Nizovi so močan del jezika JavaScript, zato je vgrajenih toliko metod, ki vam olajšajo življenje kot razvijalcu. Najboljši način za obvladovanje teh petnajstih metod je vadba.

Ko se boste še naprej učili JavaScript, MDN je odličen vir za podrobno dokumentacijo. Udobno se namestite v konzolo in nato nadgradite svoje znanje z najboljšimi urejevalniki JavaScript za programerje. Ste pripravljeni na izdelavo svojega spletnega mesta z JavaScript? Zakaj ne bi pogledali nekaterih okvirov, ki jih lahko upoštevate.

Deliti Deliti Cvrkutati E-naslov 6 ogrodja JavaScript, vrednega učenja

Obstaja veliko okvirov JavaScript, ki pomagajo pri razvoju. Tukaj je nekaj, kar morate vedeti.

Preberite Naprej Sorodne teme

Programiranje
JavaScript
Nasveti za kodiranje

O avtorju Nitin Ranganath(31 objavljenih člankov)

Nitin je navdušen razvijalec programske opreme in študent računalniškega inženiringa, ki razvija spletne aplikacije z uporabo tehnologij JavaScript. Dela kot samostojni spletni razvijalec in v prostem času rad piše za Linux in programiranje.

Več od Nitin Ranganath

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti