15 JavaScripti massiivi meetodit, mida peaksite täna õppima

Kõigi oskustega veebiarendajad, alates algajatest programmeerijatest kuni kodeerimise ekspertideni, näevad JavaScripti tähtsust kaasaegsete veebisaitide arendamisel. JavaScript on nii domineeriv, et on oluline oskus teada, kas kavatsete veebirakendusi luua.

Üks võimsamaid JavaScripti keelde sisseehitatud ehitusplokke on massiivid. Massiive leidub tavaliselt paljudes programmeerimiskeeltes ja need on kasulikud andmete salvestamiseks.

JavaScript sisaldab ka kasulikke funktsioone, mida nimetatakse massiivi meetoditeks. Siin on viisteist, mida peaksite tähelepanelikult uurima, et arendajana oma oskusi arendada.

Mis on massiivi meetodid?

Massiivi meetodid on JavaScripti sisseehitatud funktsioonid, mida saate oma massiividele rakendada. Igal meetodil on ainulaadne funktsioon, mis teeb teie massiivis muudatuse või arvutuse, säästes teid vajadusest tavalisi funktsioone nullist kodeerida.

JavaScripti massiivi meetodeid kasutatakse teie massiivi muutujale lisatud tähisega. Kuna need on ainult JavaScripti funktsioonid, lõpevad need alati sulgudega, mis võivad sisaldada valikulisi argumente. Siin on meetod, mis on lisatud lihtsale massiivile nimega myArray .

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

See kood rakendaks meetodit nimega popp massiivi juurde.

Massiivi näide

Kasutage iga näite jaoks näidismassiivi, mida me nimetame myArray , meetodite teostamiseks. Tõmmake oma konsool ja kood kaasa.

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

Need näited eeldavad, et teate aluse mis on JavaScript ja kuidas see töötab . Kui te seda ei tee, pole midagi, oleme kõik siin, et õppida ja areneda.

Uurige neid viisteist võimsat massiivi meetodit!

1. Array.push ()

Mida see teeb: lükkama () võtab teie massiivi ja lisab massiivi lõppu ühe või mitu elementi, seejärel tagastab massiivi uue pikkuse. See meetod muudab teie olemasolevat massiivi.

Lisage massiivi number 20 joostes lükkama () , kasutades argumendina 20.

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

Kontrollige, kas see töötas:

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

Jooksmine lükkama () meetod myArray'is lisas massiivi argumendis antud väärtuse. Sel juhul 20. Kui kontrollite konsoolis myArray, näete, et väärtus on nüüd massiivi lõppu lisatud.

2. Array.concat ()

Mida see teeb: sidur () saab ühendada kaks või enam massiivi uude massiivi. See ei muuda olemasolevaid massiive, vaid loob uue.

Võtke myArray ja ühendage massiiv nimega newArray sellesse.

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]

See meetod teeb imesid, kui tegelete mitme massiivi või väärtusega, mida peate kombineerima, kõik muutujate kasutamisel üsna lihtsa sammuga.

3. Array.join ()

Mida see teeb: liitu () võtab massiivi ja ühendab massiivi sisu, eraldades need komaga. Tulemus pannakse stringina. Kui soovite kasutada koma alternatiivi, saate määrata eraldaja.

Vaadake myArray abil, kuidas see toimib. Esmalt kasutage eraldajaargumendita vaikemeetodit, mis kasutab koma.

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

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

JavaScript väljastab stringi, kusjuures iga massiivi väärtus eraldatakse komaga. Eraldaja muutmiseks saate kasutada funktsiooni argumenti. Jälgige seda kahe argumendiga: üks tühik ja string.

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'

Esimene näide on tühik, mis teeb stringi, mida saate hõlpsalt lugeda.

Teine näide kasutab ('ja') , ja siin on vaja teada kahte asja.

Esiteks kasutame väärtuste eraldamiseks sõna „ja”. Teiseks on sõna „ja” mõlemal küljel tühik. Seda on oluline meeles pidada kasutamisel liitu () . JavaScript loeb argumente sõna otseses mõttes; nii et kui see tühik välja jätta, kruvitakse kõik kokku (st '2 ja 4 ja 5 ...' jne) Mitte eriti loetav väljund!

4. Array.forEach ()

Mida see teeb: igaühele() (tõstutundlik!) täidab funktsiooni iga teie massiivi üksuse kohta. See funktsioon on mis tahes teie loodud funktsioon, mis sarnaneb silmuse 'jaoks' kasutamisega massiivile funktsiooni rakendamiseks, kuid koodiga töötamine on palju väiksem.

Seal on natuke rohkem igaühele() ; vaadake süntaksit, seejärel täitke demonstreerimiseks lihtne funktsioon.

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

Me kasutame myArray , igaühele() rakendatakse tähisega. Asetate funktsiooni, mida soovite kasutada, argumendi sulgude sisse, mis on funktsioon (üksus) näites.

Heida pilk peale funktsioon (üksus) . See on funktsioon forEach () sees ja sellel on oma argument. Me nimetame vaidlust kirje . Selle argumendi kohta on vaja teada kahte asja.

Kui forEach () liigub teie massiivi kohal, rakendab see sellele argumendile koodi. Mõelge sellele kui ajutisele muutujale, mis hoiab praegust elementi.
Teie valite argumendi nime, sellele võib anda nime, mida soovite. Tavaliselt nimetatakse seda asjaks, mis hõlbustab selle mõistmist, näiteks „element” või „element”.

Neid kahte asja silmas pidades vaadake seda lihtsat näidet. Lisage igale väärtusele 15 ja laske konsoolil tulemust näidata.

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

Me kasutame kirje selles näites muutujana, seega kirjutatakse funktsioon, et lisada igale väärtusele 15 kaudu kirje . Seejärel prindib konsool tulemused. Siin näeb see välja Google Chrome'i konsoolis.

Tulemuseks on massiivi iga number, kuid sellele on lisatud 15!

5. Array.map ()

Mida see teeb: kaart () täidab funktsiooni igal teie massiivi elemendil ja paigutab tulemuse uude massiivi.

Funktsiooni käivitamine igal elemendil kõlab nagu forEach (). Siin on vahe kaart () loob käivitamisel uue massiivi. forEach () ei loo automaatselt uut massiivi, selleks peate teatud funktsiooni kodeerima.

Kasutage kaarti (), et kahekordistada myArray iga elemendi väärtust ja paigutada need uude massiivi. Näete sama funktsioon (üksus) süntaks natuke rohkem harjutamiseks.

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

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

Kontrollige tulemusi konsoolis.

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

myArray on muutumatu:

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

6. Array.unshift ()

Mida see teeb? Sarnaselt push () meetodi tööpõhimõttele vahetamata () meetod võtab teie massiivi ja lisab massiivi lõppu ühe või mitu elementi ja tagastab massiivi uue pikkuse. See meetod muudab teie olemasolevat massiivi.

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

Massiivi konsooli logides peaksite massiivi alguses nägema numbrit 0.

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

7. Array.sort ()

Mida see teeb: Sortimine on üks massiivis kõige tavalisemaid toiminguid ja see on väga kasulik. JavaScripti sorteerima () massiivi meetodit saab kasutada numbrimassiivi või isegi stringide sortimiseks ainult ühe koodireaga. See toiming on paigas ja tagastab sorteeritud massiivi, muutes esialgset massiivi. Võtke teistsugune numbrikomplekt myArray seekord.

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

Kuna sorteerimine on paigas, ei pea te sorteeritud massiivi jaoks eraldi muutujat deklareerima.

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

Vaikimisi on massiiv sorteeritud kasvavas järjekorras, kuid soovi korral saate kohandatud funktsiooni edastada sorteerima () meetod massiivi soovitud viisil sortimiseks. Sel juhul läbisin kombe noolefunktsioon massiivi sorteerimiseks arvuliselt kasvavas järjekorras.

8. Array.reverse ()

Mida see teeb: Nagu nimigi ütleb, on tagurpidi() meetodit kasutatakse massiivi elementide järjekorra ümberpööramiseks. Pange tähele, et see ei muuda massiivi sisu, vaid ainult järjekorda ennast. Siin on näide selle meetodi paremaks mõistmiseks:

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

Toimingu kontrollimiseks logige väljund konsooli.

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

Nagu näete, on elementide järjekord vastupidine. Varem on viimase indeksi element (indeks 14 indeksi 6 juures) nüüd nullindeksi element ja nii edasi.

9. Array.slice ()

Mida see teeb: viil () kasutatakse massiivi osa madala koopia allalaadimiseks. Lihtsamalt öeldes võimaldab see meetod valida massiivist konkreetseid elemente nende indeksi järgi. Saate edastada selle elemendi lähteindeksi, millest soovite hankida, ja elemente ning soovi korral ka lõppindeksi.

Kui te lõppindeksit ei esita, laaditakse alla kõik elemendid algusindeksist massiivi lõpuni. See meetod tagastab uue massiivi ega muuda olemasolevat.

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

Ülaltoodud koodis tuuakse kõik elemendid teisest indeksist viimase indeksini, kuna lõppindeksi parameetrit ei edastata. Logige mõlemad massiivid konsooli.

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

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

Ilmselgelt ei muuda algne massiiv meetodit slice () ja tagastab selle asemel uue massiivi, mis on salvestatud slicedArray muutuja. Siin on näide, kus lõppindeksi parameeter edastatakse ka viil () meetod.

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

[4, 5]

10. Array.splice ()

Mida see teeb: liitmine () on kasulik massiivi meetod, mida kasutatakse massiivi elementide eemaldamiseks või asendamiseks. Määrates kustutatavate elementide indeksi ja arvu, muudab see massiivi.

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

Ülaltoodud näites on myArray massiiv on splaissitud indeksist 2 ja sellest eemaldatakse 3 elementi. Massiiv koosneb nüüd:

[2, 4, 12, 14]

Elementide asendamiseks, mitte lihtsalt kustutamiseks, saate edastada suvalise arvu valikulisi parameetreid elementidega, millega soovite asendada.

kui kuum peaks mu CPU olema

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

Mida see teeb: filter () meetod on kasulik massiivi meetod, mis võtab testi sisaldava funktsiooni ja tagastab uue massiivi koos kõigi selle testi läbinud elementidega. Nimele truult kasutatakse seda meetodit vajalike elementide filtreerimiseks teistest elementidest. Filtreerimine toimub funktsiooni abil, mis tagastab loogilise väärtuse.

Siin on näide filter () meetod, mida kasutatakse massiivist ainult nende elementide saamiseks, mis jaguvad 2 -ga.

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

Ülaltoodud näites edastatakse parameetrina noolefunktsioon, mis võtab iga numbri algsest massiivist ja kontrollib, kas see jagub kahega, kasutades moodulit ( % ) ja võrdsus ( === ) operaator. Väljund näeb välja järgmine:

[2, 4, 12, 14]

12. Array.reduce ()

Mida see teeb: vähendama () on massiivimeetod, mis võtab reduktorifunktsiooni ja käivitab selle igal massiivielemendil, et tagasisaatmisel väljastada üks väärtus. See võtab nõutavate parameetritena reduktori funktsiooni koos akumulaatori muutuja ja vooluelemendi muutujaga. Aku väärtust mäletatakse kõigi iteratsioonide ajal ja see tagastatakse lõpuks pärast viimast iteratsiooni.

Selle meetodi populaarne kasutusviis on massiivi kõigi elementide summa arvutamine. Selle funktsiooni rakendamine on järgmine:

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

Ülaltoodud näite teise parameetrina edastatakse 0, mida kasutatakse akumulaatori muutuja algväärtusena. The sumOfNums muutuja sisaldab tagastusväärtust vähendama () meetod, mis eeldatavasti on massiivi kõigi elementide summa.

console.log(sumOfNums); 53

13. Massiiv. Sisaldab ()

Mida see teeb: massiivist elemendi otsimine selle olemasolu kontrollimiseks on üsna sageli kasutatav toiming ja seetõttu on JavaScriptil selle jaoks sisseehitatud meetod sisaldab () massiivi meetod. Saate seda kasutada järgmiselt.

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

See meetod nõuab nõutavat parameetrit, otsitavat elementi ja valikulist parameetrit - massiiviindeksit, millest otsimist alustada. Sõltuvalt sellest, kas see element on olemas või mitte, naaseb see tagasi tõsi või vale vastavalt. Seetõttu on väljund järgmine:

true  
false  
true  
false

14. Array.indexOf ()

Mida see teeb: indeks() meetodit kasutatakse indeksi väljaselgitamiseks, mille juures saab massiivist leida kindla elemendi esimese esinemise. Kuigi see on sarnane meetodiga include (), tagastab see meetod arvulise indeksi või -1, kui elementi massiivis pole.

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() meetod kasutab elemendi olemasolu kontrollimiseks ranget võrdsust, mis tähendab, et väärtus ja andmetüüp peaksid olema samad. Valikuline teine parameeter võtab indeksi, kust otsingut alustada. Nende kriteeriumide põhjal näeb väljund välja selline:

1  
-1  
4

15. Array.fill ()

Mida see teeb? Sageli peate võib -olla määrama kõik massiivi väärtused staatiliseks väärtuseks, näiteks 0. Silmuse asemel võite proovida täitma () meetodit samal eesmärgil. Seda meetodit saate kasutada massiivi jaoks, millel on 1 nõutav parameeter: väärtus, millega massiiv täita, ja 2 valikulist parameetrit: algus- ja lõppindeks, mille vahel täita. See meetod muudab väljuva massiivi.

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

Väljundi logimisel konsooli näete järgmist:

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]

Järgmised sammud JavaScripti teekonnal

Massiivid on JavaScripti keele võimas osa, mistõttu on teie arendaja elu lihtsustamiseks sisseehitatud nii palju meetodeid. Parim viis nende viieteistkümne meetodi valdamiseks on harjutamine.

JavaScripti õppimise jätkamisel MDN on suurepärane ressurss üksikasjaliku dokumentatsiooni jaoks. Tundke end mugavalt konsoolis ja tõstke oma oskusi programmeerijatele mõeldud parimate JavaScripti redigeerijate abil. Kas olete valmis oma veebisaiti JavaScripti abil üles ehitama? Miks mitte vaadata mõnda raamistikku, mida võiksite kaaluda.

Jaga Jaga Piiksuma E -post 6 JavaScripti raamistikku, mida tasub õppida

Arendamiseks on palju JavaScripti raamistikke. Siin on mõned, mida peaksite teadma.

Loe edasi Seotud teemad

Programmeerimine
JavaScript
Näpunäiteid kodeerimiseks

Autori kohta Nitin Ranganath(31 artiklit avaldatud)

Nitin on innukas tarkvaraarendaja ja arvutitehnika tudeng, kes arendab JavaScripti tehnoloogiaid kasutades veebirakendusi. Ta töötab vabakutselise veebiarendajana ning talle meeldib vabal ajal kirjutada Linuxi ja programmeerimise jaoks.

Veel Nitin Ranganathilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin