15 metód poľa JavaScript, ktoré by ste dnes mali ovládať

Weboví vývojári všetkých úrovní znalostí, od nováčikovských programátorov až po expertov na kódovanie, začínajú chápať dôležitosť JavaScriptu pri vývoji moderných webových stránok. JavaScript je natoľko dominantný, že je nevyhnutné vedieť, či sa chystáte vytvárať webové aplikácie.

Jedným z najsilnejších stavebných prvkov zabudovaných do jazyka JavaScript sú polia. Polia sa bežne nachádzajú v mnohých programovacích jazykoch a sú užitočné na ukladanie údajov.

JavaScript tiež obsahuje užitočné funkcie známe ako metódy poľa. Tu je pätnásť, na ktoré by ste sa mali podrobne pozrieť, aby ste rozšírili svoje schopnosti vývojára.

Aké sú metódy poľa?

Array metódy sú funkcie vstavané do JavaScriptu, ktoré môžete použiť na svoje polia. Každá metóda má jedinečnú funkciu, ktorá vykonáva zmenu alebo výpočet vo vašom poli, čím vás ušetrí od nutnosti kódovať bežné funkcie od začiatku.

Metódy poľa v JavaScripte sa spúšťajú pomocou bodového zápisu pripojeného k vašej premennej poľa. Pretože ide iba o funkcie JavaScriptu, vždy sa končia zátvorkami, ktoré môžu obsahovať voliteľné argumenty. Tu je metóda pripojená k jednoduchému poľu s názvom myArray .

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

Tento kód by použil metódu nazývanú pop do poľa.

Príklad poľa

Pre každý príklad použite vzorové pole, ktoré zavoláme myArray , vykonávať metódy na. Neváhajte a zdvihnite konzolu a kódujte.

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

Tieto príklady budú predpokladať, že poznáte základ čo je JavaScript a ako funguje . Ak nie, nie je to v poriadku, sme tu všetci, aby sme sa učili a rástli.

Ponorte sa do týchto pätnástich výkonných metód poľa!

1. Array.push ()

Čo to robí: tlačiť() vezme vaše pole a pridá jeden alebo viac prvkov na koniec poľa, potom vráti novú dĺžku poľa. Táto metóda zmení vaše existujúce pole.

Spustením pridajte číslo 20 do poľa tlačiť() , pričom ako argument použije 20.

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

Skontrolujte, či to fungovalo:

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

Beh tlačiť() metóda na myArray pridala hodnotu uvedenú v argumente do poľa. V tomto prípade 20. Keď začiarknete políčko myArray v konzole, uvidíte, že hodnota je teraz pridaná na koniec poľa.

2. Array.concat ()

Čo to robí: concat () môže zlúčiť dve alebo viac polí do nového poľa. Nemodifikuje existujúce polia, ale vytvára nové.

Vziať myArray a zlúčiť pole s názvom newArray do toho.

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áto metóda robí zázraky pri práci s viacerými poľami alebo hodnotami, ktoré potrebujete kombinovať, a to všetko v jednom veľmi jednoduchom kroku pri použití premenných.

3. Array.join ()

Čo to robí: pridať sa () vezme pole a zreťazí obsah poľa oddelený čiarkou. Výsledok je umiestnený v reťazci. Ak chcete použiť alternatívu k čiarke, môžete určiť oddeľovač.

Pozrite sa, ako to funguje pomocou myArray. Najprv sa použije predvolená metóda bez argumentu oddeľovača, ktorá bude používať čiarku.

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

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

JavaScript vygeneruje reťazec, pričom každá hodnota v poli je oddelená čiarkou. Na zmenu oddeľovača môžete použiť argument vo funkcii. Pozorujte to pomocou dvoch argumentov: jednej medzery a reťazca.

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'

Prvým príkladom je medzera, ktorá vytvára reťazec, ktorý môžete ľahko čítať.

Druhý príklad používa ('a') , a tu sú dve veci, ktoré je potrebné vedieť.

Po prvé, na oddelenie hodnôt používame slovo „a“. Za druhé, na oboch stranách slova „a“ je medzera. Toto je dôležitá vec, ktorú by ste pri používaní mali mať na pamäti pridať sa () . JavaScript číta argumenty doslovne; takže ak tento priestor vynecháte, všetko bude skombinované dohromady (tj. „2and4and5 ...“ atď.) Nie veľmi čitateľný výstup!

4. Array.forEach ()

Čo to robí: pre každý() (rozlišuje malé a veľké písmená!) vykonáva funkciu pre každú položku vo vašom poli. Táto funkcia je každá funkcia, ktorú vytvoríte, podobne ako pomocou slučky 'for' na aplikáciu funkcie na pole, ale s oveľa menšou prácou s kódom.

Je toho trochu viac pre každý() ; pozrite sa na syntax a potom predvádzajte jednoduchú funkciu.

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

Používame myArray , pre každý() sa používa s bodkovým zápisom. Funkciu, ktorú chcete použiť, umiestnite do zátvorky argumentu, ktorá je funkcia (položka) v príklade.

Pozri sa na funkcia (položka) . Toto je funkcia vykonávaná vo vnútri forEach () a má svoj vlastný argument. Voláme argument položka . O tomto argumente je potrebné vedieť dve veci:

Keď forEach () prechádza cez vaše pole, použije kód na tento argument. Predstavte si to ako dočasnú premennú, ktorá obsahuje aktuálny prvok.
Vyberiete si názov argumentu, môžete ho pomenovať ľubovoľne. Obvykle by sa to dalo nazvať niečím, čo uľahčuje pochopenie, napríklad „položka“ alebo „prvok“.

S ohľadom na tieto dve veci si pozrite tento jednoduchý príklad. Pridajte 15 ku každej hodnote a nechajte konzolu ukázať výsledok.

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

Používame položka v tomto prípade ako premenná, takže funkcia je zapísaná tak, že ku každej hodnote pripočíta 15 položka . Konzola potom vytlačí výsledky. Takto to vyzerá v konzole Google Chrome.

Výsledkom je každé číslo v poli, ale k nemu je pridaných 15!

5. Array.map ()

Čo to robí: mapa () plní funkciu pre každý prvok vo vašom poli a výsledok umiestni do nového poľa.

Spustenie funkcie na každom prvku znie ako forEach (). Rozdiel tu je mapa () po spustení vytvorí nové pole. forEach () nevytvorí nové pole automaticky, na to by ste museli kódovať konkrétnu funkciu.

Pomocou mapy () zdvojnásobte hodnotu každého prvku v myArray a umiestnite ho do nového poľa. Uvidíte to isté funkcia (položka) syntax pre trochu viac praxe.

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

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

Výsledky skontrolujte v konzole.

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

myArray je nezmenený:

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

6. Array.unshift ()

Čo to robí: Podobne ako funguje metóda push (), zrušiť posun () metóda vezme vaše pole a pridá jeden alebo viac prvkov na začiatok poľa namiesto na koniec a vráti novú dĺžku poľa. Táto metóda zmení vaše existujúce pole.

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

Pri zaznamenávaní poľa do konzoly by ste na začiatku poľa mali vidieť číslo 0.

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

7. Array.sort ()

Čo to robí: Zoradenie je jednou z najbežnejších operácií vykonávaných na poli a je veľmi užitočné. JavaScript triediť () pole metóda môže byť použitá na triedenie radu čísel alebo dokonca reťazcov iba pomocou jedného riadka kódu. Táto operácia je na mieste a vráti zoradené pole úpravou počiatočného poľa. Vezmite inú sadu čísel pre myArray tentokrát.

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

Pretože triedenie prebieha na svojom mieste, nemusíte pre triedené pole deklarovať samostatnú premennú.

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

V predvolenom nastavení je pole zoradené vzostupne, ale vlastnú funkciu môžete prípadne odovzdať do súboru triediť () metóda na triedenie poľa požadovaným spôsobom. V tomto prípade som prešiel zvykom funkcia šípky zoradiť pole číselne vo vzostupnom poradí.

8. Array.reverse ()

Čo to robí: Ako naznačuje názov, súbor obrátiť () metóda sa používa na obrátenie poradia prvkov v poli. Všimnite si toho, že to neruší obsah poľa, ale iba samotné poradie. Tu je príklad na lepšie pochopenie tejto metódy:

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

Zaznamenajte výstup do konzoly a overte operáciu.

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

Ako vidíte, poradie prvkov bolo obrátené. Predtým bol prvok v poslednom indexe (prvok 14 v indexe 6) teraz prvkom v nulovom indexe a podobne.

9. Array.slice ()

Čo to robí: plátok () sa používa na získanie plytkej kópie časti poľa. Zjednodušene povedané, táto metóda vám umožňuje vybrať konkrétne prvky z poľa podľa ich indexu. Môžete odovzdať počiatočný index prvku, z ktorého chcete načítať, a prvky a voliteľne aj koncový index.

Ak neuvediete koncový index, budú načítané všetky prvky od počiatočného indexu po koniec poľa. Táto metóda vracia nové pole a nemení existujúce.

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

Vo vyššie uvedenom kóde sa načítajú všetky prvky od druhého indexu po posledný index, pretože parameter koncového indexu nebol odovzdaný. Zaznamenajte obe polia do konzoly.

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

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

Počiatočné pole očividne nie je modifikované metódou slice () a namiesto toho vracia nové pole, ktoré je uložené v nakrájanéArray premenná. Tu je príklad, v ktorom je parameter koncového indexu tiež odoslaný do súboru plátok () metóda.

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

[4, 5]

10. Array.splice ()

Čo to robí: spojka () je užitočná metóda poľa používaná na odstraňovanie alebo nahrádzanie prvkov v poli na mieste. Zadaním indexu a počtu prvkov, ktoré sa majú odstrániť, sa zmení pole.

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

Vo vyššie uvedenom príklade myArray pole je spojené z indexu 2 a sú z neho odstránené 3 prvky. Pole teraz pozostáva z:

[2, 4, 12, 14]

Ak chcete prvky nahradiť, a nie len ich odstrániť, môžete s prvkami, ktoré chcete nahradiť, odovzdať ľubovoľný počet voliteľných parametrov:

nefunguje mi klávesnica notebooku

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

Čo to robí: The filter () metóda je užitočná metóda poľa, ktorá preberá funkciu obsahujúcu test a vráti nové pole so všetkými prvkami, ktoré v tomto teste prešli. Verná svojmu názvu, táto metóda sa používa na filtrovanie prvkov, ktoré potrebujete, z ostatných prvkov. Filtrácia sa vykonáva pomocou funkcie, ktorá vracia booleovskú hodnotu.

Tu je príklad filter () metóda používaná na získanie iba tých prvkov z poľa, ktoré sú deliteľné 2.

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

Vo vyššie uvedenom príklade je funkcia šípky odovzdaná ako parameter, ktorý preberá každé číslo z pôvodného poľa a pomocou modulu modulo kontroluje, či je deliteľné dvoma ( % ) a rovnosť ( === ) operátor. Výstup vyzerá takto:

[2, 4, 12, 14]

12. Array.reduce ()

Čo to robí: znížiť () je metóda poľa, ktorá vyžaduje funkciu reduktora a vykoná ju na každom prvku poľa, aby pri návrate priniesla jednu hodnotu. Ako požadované parametre vyžaduje funkciu reduktora s premennou akumulátora a premennou aktuálneho prvku. Hodnota akumulátora je zapamätaná vo všetkých iteráciách a je nakoniec vrátená po konečnej iterácii.

Populárnym prípadom použitia tejto metódy je výpočet súčtu všetkých prvkov v poli. Implementácia tejto funkcie je nasledovná:

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

0 je druhým parametrom vo vyššie uvedenom príklade, ktorý sa používa ako počiatočná hodnota akumulačnej premennej. The sumOnNum premenná bude obsahovať návratovú hodnotu súboru znížiť () metóda, od ktorej sa očakáva, že bude súčtom všetkých prvkov v poli.

console.log(sumOfNums); 53

13. Pole. Obsahuje ()

Čo to robí: Hľadanie prvku v poli na kontrolu, či je prítomný, je operácia, ktorá sa používa pomerne často, a preto má JavaScript na to vstavanú metódu vo forme zahŕňa () metóda poľa. Takto ho môžete použiť:

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áto metóda vyžaduje požadovaný parameter, prvok, ktorý sa má vyhľadať, a voliteľný parameter index poľa, z ktorého sa má začať hľadať. V závislosti od toho, či je tento prvok prítomný alebo nie, sa vráti pravda alebo falošný resp. Výstupom teda bude:

true  
false  
true  
false

14. Array.indexOf ()

Čo to robí: indexOf () metóda sa používa na zistenie indexu, v ktorom je možné nájsť prvý výskyt zadaného prvku v poli. Napriek tomu, že je podobná metóde includes (), táto metóda vracia číselný index alebo -1, ak sa prvok v poli nenachádza.

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 () metóda používa prísnu rovnosť na kontrolu prítomnosti prvku, čo znamená, že hodnota aj dátový typ by mali byť rovnaké. Voliteľný druhý parameter spustí index, od ktorého sa začne hľadať. Na základe týchto kritérií bude výstup vyzerať takto:

1  
-1  
4

15. Array.fill ()

Čo to robí: Často možno budete musieť nastaviť všetky hodnoty v poli na statickú hodnotu, napríklad 0. Namiesto použitia slučky môžete vyskúšať fill () metóda na rovnaký účel. Túto metódu môžete zavolať na pole s 1 požadovaným parametrom: hodnotou, ktorou sa má pole vyplniť, a 2 voliteľnými parametrami: začiatočný a koncový index, medzi ktorými sa má vyplniť. Táto metóda modifikuje vystupujúce pole.

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

Po prihlásení výstupu do konzoly uvidíte:

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]

Ďalšie kroky na vašej ceste za JavaScriptom

Polia sú silnou súčasťou jazyka JavaScript, a preto je vstavaných toľko metód, ktoré vám ako vývojárovi uľahčia život. Najlepším spôsobom, ako zvládnuť týchto pätnásť metód, je cvičiť.

Ako sa budete ďalej učiť JavaScript, MDN je skvelý zdroj pre podrobnú dokumentáciu. Pohodlne sa ovládajte v konzole a potom zdokonaľte svoje znalosti s najlepšími editormi JavaScript pre programátorov. Ste pripravení vytvoriť svoj web pomocou JavaScriptu? Skúste sa pozrieť na niektoré rámce, ktoré môžete zvážiť.

zdieľam zdieľam Tweet E -mail 6 JavaScriptových rámcov, ktoré sa oplatí naučiť

Existuje mnoho rámcov JavaScriptu, ktoré vám pomôžu s vývojom. Tu sú niektoré, ktoré by ste mali vedieť.

Čítajte ďalej Súvisiace témy

Programovanie
JavaScript
Tipy na kódovanie

O autorovi Nitin Ranganath(31 publikovaných článkov)

Nitin je vášnivý vývojár softvéru a študent počítačového inžinierstva vyvíjajúci webové aplikácie pomocou technológií JavaScript. Pracuje ako webový vývojár na voľnej nohe a vo voľnom čase rád píše pre Linux a programovanie.

Viac od Nitina Ranganatha

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber