15 JavaScript -array -menetelmää, jotka sinun pitäisi hallita tänään

Kaiken tasoiset verkkokehittäjät aloittelijoista ohjelmoijista koodausasiantuntijoihin ymmärtävät JavaScriptin merkityksen nykyaikaisten verkkosivustojen kehittämisessä. JavaScript on niin hallitseva, että on olennainen taito tietää, aiotko luoda verkkosovelluksia.

Yksi tehokkaimmista JavaScript-kieleen sisäänrakennetuista rakennuspalikoista on taulukot. Taulukot löytyvät useilta ohjelmointikieliltä ja ovat hyödyllisiä tietojen tallentamiseen.

JavaScript sisältää myös hyödyllisiä ominaisuuksia, joita kutsutaan matriisimenetelmiksi. Tässä on viisitoista, joita sinun tulisi tarkastella tarkasti kasvattaaksesi taitojasi kehittäjänä.

Mitä Array -menetelmät ovat?

Array -menetelmät ovat JavaScriptiin sisäänrakennettuja toimintoja, joita voit käyttää matriiseissasi. Jokaisella menetelmällä on ainutlaatuinen toiminto, joka suorittaa taulukon muutoksen tai laskelman, mikä säästää sinua joutumasta koodaamaan tavallisia toimintoja tyhjästä.

JavaScriptin matriisimenetelmät suoritetaan käyttämällä taulukkomuuttujaasi liitettyä pistemerkintää. Koska ne ovat vain JavaScript -toimintoja, ne päättyvät aina sulkeisiin, joissa voi olla valinnaisia argumentteja. Tässä on menetelmä, joka on liitetty yksinkertaiseen taulukkoon nimeltä myArray .

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

Tämä koodi soveltaa menetelmää nimeltä pop- taulukkoon.

Esimerkki Array

Käytä jokaisessa esimerkissä esimerkkitaulukkoa, jota kutsumme myArray , suorittamaan menetelmät. Ota konsoli ja koodi mukaan.

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

Näissä esimerkeissä oletetaan, että tiedät perustan mikä JavaScript on ja miten se toimii . Jos et, se ei ole ok, olemme kaikki täällä oppimassa ja kasvamassa.

Tutustu näihin viisitoista tehokasta matriisimenetelmää!

1. Array.push ()

Mitä se tekee: työntää() ottaa taulukon ja lisää yhden tai useamman elementin taulukon loppuun ja palauttaa sitten taulukon uuden pituuden. Tämä menetelmä muuttaa olemassa olevaa taulukkoa.

Lisää numero 20 taulukkoon suorittamalla työntää() , käyttäen argumenttia 20.

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

Tarkista toimiiko:

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

Käynnissä työntää() menetelmä myArray lisäsi argumentissa annetun arvon taulukkoon. Tässä tapauksessa 20. Kun tarkistat myArray -konsolin, näet, että arvo on nyt lisätty taulukon loppuun.

2. Array.concat ()

Mitä se tekee: ketju () voi yhdistää kaksi tai useampia matriiseja uuteen taulukkoon. Se ei muuta olemassa olevia matriiseja, vaan luo uuden.

Ota myArray ja yhdistä taulukko nimeltä newArray siihen.

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]

Tämä menetelmä tekee ihmeitä käsitellessään useita taulukkoja tai arvoja, jotka sinun on yhdistettävä, kaikki yhdessä melko yksinkertaisessa vaiheessa, kun käytät muuttujia.

3. Array.join ()

Mitä se tekee: liittyä seuraan() ottaa taulukon ja yhdistää ketjun sisällön pilkulla erotettuna. Tulos sijoitetaan merkkijonoon. Voit määrittää erottimen, jos haluat käyttää vaihtoehtoa pilkulle.

Katso miten tämä toimii myArray -sovelluksen avulla. Käytä ensin oletusmenetelmää ilman erotinargumenttia, jossa käytetään pilkkua.

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

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

JavaScript antaa merkkijonon, jossa jokainen taulukon arvo erotetaan pilkulla. Voit käyttää funktion argumenttia erottimen vaihtamiseen. Tarkkaile sitä kahdella argumentilla: yksi välilyönti ja merkkijono.

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'

Ensimmäinen esimerkki on välilyönti, joka tekee merkkijonon, jonka voit helposti lukea.

Toinen esimerkki käyttää ('ja') , ja tässä on tiedettävä kaksi asiaa.

Ensinnäkin käytämme sanaa 'ja' erottamaan arvot. Toiseksi sanan 'ja' molemmilla puolilla on välilyönti. Tämä on tärkeä muistaa käytettäessä liittyä seuraan() . JavaScript lukee argumentit kirjaimellisesti; joten jos tämä tila jätetään pois, kaikki sekoitetaan yhteen (ts. '2and4and5 ...' jne.) Ei kovin luettavissa oleva lähtö!

4. Array.forEach ()

Mitä se tekee: jokaiselle() (isot ja pienet kirjaimet!) suorittaa toiminnon jokaiselle taulukon kohteelle. Tämä funktio on mikä tahansa luomasi funktio, samanlainen kuin 'for' -silmukan käyttäminen funktion käyttämiseen matriisissa, mutta paljon vähemmän työtä koodilla.

Siinä on vähän enemmän jokaiselle() ; katso syntaksia ja suorita sitten yksinkertainen toiminto osoittamaan.

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

Me käytämme myArray , jokaiselle() käytetään pisteellä. Asetat funktion, jota haluat käyttää argumenttien sulkujen sisälle toiminto (kohde) esimerkissä.

Katso toiminto (kohde) . Tämä on funktio, joka suoritetaan forEach (): n sisällä, ja sillä on oma argumenttinsa. Me kutsumme väitettä kohde . Tästä väitteestä on tiedettävä kaksi asiaa:

Kun forEach () kulkee taulukon yli, se käyttää koodia tähän argumenttiin. Ajattele sitä väliaikaisena muuttujana, joka sisältää nykyisen elementin.
Valitset argumentin nimen, sille voidaan antaa haluamasi nimi. Tyypillisesti tämä nimi on jotain, joka helpottaa sen ymmärtämistä, kuten 'kohde' tai 'elementti'.

Nämä kaksi asiaa ajatellen tutustu tähän yksinkertaiseen esimerkkiin. Lisää 15 jokaiseen arvoon ja anna konsolin näyttää tulos.

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

Me käytämme kohde tässä esimerkissä muuttujana, joten funktio kirjoitetaan lisäämään 15 jokaiseen arvoon kautta kohde . Tämän jälkeen konsoli tulostaa tulokset. Tältä se näyttää Google Chrome -konsolissa.

Tuloksena on jokainen taulukon numero, mutta siihen lisätään 15!

5. Array.map ()

Mitä se tekee: kartta() suorittaa toiminnon jokaiselle taulukon elementille ja sijoittaa tuloksen uuteen taulukkoon.

Toiminnon suorittaminen jokaisella elementillä kuulostaa forEach (): lta. Ero on tässä kartta() luo uuden taulukon suoritettaessa. forEach () ei luo uutta taulukkoa automaattisesti, sinun on koodattava tietty toiminto sen tekemiseksi.

Käytä karttaa () kaksinkertaistaaksesi jokaisen myArray -elementin arvon ja aseta ne uuteen taulukkoon. Näet saman toiminto (kohde) syntaksi hieman harjoitusta varten.

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

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

Tarkista tulokset konsolista.

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

myArray on muuttumaton:

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

6. Array.unshift ()

Toiminta: Samanlainen kuin push () -menetelmä, vaihtamaton () method ottaa taulukon ja lisää yhden tai useamman elementin taulukon alkuun lopun sijasta ja palauttaa taulukon uuden pituuden. Tämä menetelmä muuttaa olemassa olevaa taulukkoa.

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

Kun kirjaat taulukon konsoliin, sinun pitäisi nähdä numero 0 taulukon alussa.

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

7. Array.sort ()

Toiminta: Lajittelu on yksi yleisimmistä matriisin toiminnoista, ja se on erittäin hyödyllinen. JavaScript järjestellä() array -menetelmällä voidaan lajitella numeroryhmä tai jopa merkkijono vain yhdellä koodirivillä. Tämä toiminto on paikallaan ja palauttaa lajitellun taulukon muuttamalla alkuperäistä taulukkoa. Valitse eri numerosarja myArray tällä kertaa.

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

Koska lajittelu on tehty, sinun ei tarvitse ilmoittaa lajitellulle taulukolle erillistä muuttujaa.

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

Oletusarvoisesti taulukko on lajiteltu nousevaan järjestykseen, mutta voit halutessasi siirtää mukautetun funktion järjestellä() tapa lajitella taulukko halutulla tavalla. Tässä tapauksessa lähdin tottumuksesta nuolitoiminto lajitella taulukko numeerisesti nousevaan järjestykseen.

8. Array.reverse ()

Mitä se tekee: Kuten nimestä voi päätellä, käänteinen() -menetelmää käytetään taulukon elementtien järjestyksen kääntämiseen. Huomaa, että tämä ei käännä taulukon sisältöä, vaan vain itse järjestyksen. Tässä on esimerkki tämän menetelmän ymmärtämiseksi paremmin:

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

Kirjaa lähtö konsoliin varmistaaksesi toiminnan.

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

Kuten huomaat, elementtien järjestys on päinvastainen. Aiemmin viimeisen indeksin elementti (elementti 14 indeksissä 6) on nyt nollaindeksin elementti ja niin edelleen.

9. Array.slice ()

Mitä se tekee: viipale() käytetään hakemaan matriisi kopio taulukon osasta. Yksinkertaisemmin sanottuna tällä menetelmällä voit valita tiettyjä elementtejä taulukosta niiden indeksin perusteella. Voit välittää sen elementin alkuindeksin, josta haluat hakea, ja elementit ja vaihtoehtoisesti myös pääteindeksin.

Jos et anna lopetusindeksiä, kaikki alkuindeksin ja taulukon lopun elementit haetaan. Tämä menetelmä palauttaa uuden taulukon eikä muuta olemassa olevaa.

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

Yllä olevassa koodissa haetaan kaikki elementit toisesta indeksistä viimeiseen hakemistoon, koska pääteindeksiparametria ei välitetä. Kirjaa molemmat taulukot konsoliin.

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

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

Ilmeisesti alkuperäistä taulukkoa ei muuteta slice () -menetelmällä, vaan se palauttaa uuden taulukon, joka on tallennettu viipaloitu array muuttuja. Tässä on esimerkki, jossa myös pääteindeksiparametri välitetään viipale() menetelmä.

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

[4, 5]

10. Array.splice ()

Mitä se tekee: liitos () on hyödyllinen matriisimenetelmä, jota käytetään taulukon elementtien poistamiseen tai korvaamiseen. Määrittämällä indeksin ja poistettavien elementtien määrän se muuttaa taulukkoa.

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

Yllä olevassa esimerkissä myArray matriisi liitetään indeksistä 2 ja 3 elementtiä poistetaan siitä. Taulukko koostuu nyt seuraavista:

[2, 4, 12, 14]

Jos haluat korvata elementit eikä vain poistaa niitä, voit välittää minkä tahansa määrän valinnaisia parametreja elementeillä, jotka haluat korvata, kuten tämä:

iphone Tätä lisävarustetta ei ehkä tueta

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

Mitä se tekee: suodattaa() menetelmä on hyödyllinen matriisimenetelmä, joka ottaa testin sisältävän funktion ja palauttaa uuden taulukon, jossa on kaikki testin läpäisseet elementit. Nimensä mukaisesti tätä menetelmää käytetään suodattamaan tarvitsemasi elementit muista elementeistä. Suodatus tehdään käyttämällä funktiota, joka palauttaa boolen arvon.

Tässä on esimerkki suodattaa() menetelmä, jolla taulukosta saadaan vain ne elementit, jotka jaetaan 2: lla.

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

Yllä olevassa esimerkissä nuolitoiminto välitetään parametrina, joka ottaa jokaisen numeron alkuperäisestä taulukosta ja tarkistaa, onko se jaettavissa kahdella käyttäen modulo ( % ) ja tasa -arvoa ( === ) operaattori. Tulos näyttää tältä:

[2, 4, 12, 14]

12. Array.reduce ()

Mitä se tekee: vähentää() on matriisimenetelmä, joka ottaa pelkistysfunktion ja suorittaa sen kullakin matriisielementillä tuottaakseen yhden arvon palauttaessa. Se vaatii pelkistystoiminnon, jossa on varaajamuuttuja ja nykyinen elementtimuuttuja vaadittavina parametreina. Varaajan arvo muistetaan kaikissa iteroinneissa ja palautetaan lopullisesti viimeisen iteroinnin jälkeen.

Tämän menetelmän suosittu käyttötapa on laskea taulukon kaikkien elementtien summa. Tämän toiminnon toteutus on seuraava:

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

0 välitetään toisena parametrina yllä olevassa esimerkissä, jota käytetään varaajamuuttujan alkuarvona. The sumOfNums muuttuja sisältää arvon palautusarvon vähentää() menetelmä, jonka odotetaan olevan matriisin kaikkien elementtien summa.

console.log(sumOfNums); 53

13. Array. Sisältää ()

Mitä se tekee: Elementin etsiminen taulukosta sen tarkistamiseksi, onko se läsnä, on operaatio, jota käytetään melko usein, ja siksi JavaScriptillä on sisäänrakennettu menetelmä tähän sisältää () matriisimenetelmä. Voit käyttää sitä seuraavasti:

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

Tämä menetelmä vaatii vaaditun parametrin, etsittävän elementin ja valinnaisen parametrin, taulukkoindeksin, josta haku aloitetaan. Riippuen siitä, onko kyseinen elementti läsnä vai ei, se palaa totta tai väärä vastaavasti. Siksi lähtö on:

true  
false  
true  
false

14. Array.indexOf ()

Mitä se tekee: sisällysluettelo() -menetelmää käytetään selvittämään indeksi, josta tietyn elementin ensimmäinen esiintyminen löytyy taulukosta. Vaikka menetelmä on samanlainen kuin include () -menetelmä, se palauttaa numeerisen indeksin tai -1, jos elementtiä ei ole taulukossa.

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

sisällysluettelo() menetelmä käyttää tiukkaa tasa -arvoa tarkistaakseen, onko elementti läsnä, mikä tarkoittaa, että arvon ja tietotyypin tulee olla samat. Valinnainen toinen parametri ottaa indeksin aloittaakseen haun. Näiden kriteerien perusteella tulos näyttää tältä:

1  
-1  
4

15. Array.fill ()

Toiminta: Usein sinun on ehkä asetettava kaikki taulukon arvot staattiseen arvoon, kuten 0. Silmukan käyttämisen sijaan voit kokeilla täyttää() menetelmä samaan tarkoitukseen. Voit kutsua tämän menetelmän taulukkoon, jossa on yksi vaadittu parametri: arvo, jolla taulukko täytetään, ja 2 valinnaista parametria: alku- ja loppuindeksi, jotka täytetään. Tämä menetelmä muuttaa poistuvaa matriisia.

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

Kirjaamalla lähdön konsoliin näet:

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]

JavaScript -matkan seuraavat vaiheet

Taulukot ovat voimakas osa JavaScript-kieltä, minkä vuoksi on olemassa monia menetelmiä, jotka helpottavat elämääsi kehittäjänä. Paras tapa hallita nämä viisitoista menetelmää on harjoitella.

Kun jatkat JavaScriptin oppimista, MDN on hyvä resurssi yksityiskohtaista dokumentointia varten. Tunne olosi mukavaksi konsolissa ja nosta taitosi huippuunsa ohjelmoijien parhaiden JavaScript -editorien avulla. Oletko valmis rakentamaan verkkosivustosi JavaScriptin avulla? Mikset katsoisi joitain kehyksiä, joita voit harkita.

Jaa Jaa Tweet Sähköposti 6 JavaScript -kehykset kannattaa oppia

Siellä on monia JavaScript -kehyksiä, jotka auttavat kehittämisessä. Tässä on joitain, jotka sinun pitäisi tietää.

Lue seuraava Liittyvät aiheet

Ohjelmointi
JavaScript
Koodausvinkkejä

Kirjailijasta Nitin Ranganath(31 artikkelia julkaistu)

Nitin on innokas ohjelmistokehittäjä ja tietotekniikan opiskelija, joka kehittää verkkosovelluksia JavaScript -tekniikoilla. Hän työskentelee freelance -verkkokehittäjänä ja tykkää kirjoittaa vapaa -ajallaan Linuxille ja ohjelmoinnille.

Lisää Nitin Ranganathilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi