15 metod pole JavaScript, které byste dnes měli zvládnout

Weboví vývojáři všech úrovní znalostí, od programátorů nováčků až po experty na kódování, si uvědomují důležitost JavaScriptu při vývoji moderních webových stránek. JavaScript je tak dominantní, že je nezbytnou dovedností vědět, zda se chystáte vytvářet webové aplikace.

Jedním z nejsilnějších stavebních kamenů integrovaných do jazyka JavaScript jsou pole. Pole se běžně nacházejí v mnoha programovacích jazycích a jsou užitečné pro ukládání dat.

JavaScript také obsahuje užitečné funkce známé jako metody pole. Zde je patnáct, na které byste se měli podívat zblízka, abyste mohli rozvíjet své dovednosti vývojáře.

Co jsou metody pole?

Array metody jsou funkce integrované do JavaScriptu, které můžete použít na svá pole. Každá metoda má jedinečnou funkci, která provádí změnu nebo výpočet na vašem poli, což vám ušetří potřebu od začátku kódovat běžné funkce.

Metody pole v JavaScriptu se spouští pomocí bodové notace připojené k vaší proměnné pole. Protože se jedná pouze o funkce JavaScriptu, vždy končí závorkami, do kterých se mohou vložit volitelné argumenty. Zde je metoda připojená k jednoduchému poli s názvem myArray .

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

Tento kód by použil metodu nazvanou pop do pole.

Příklad pole

Pro každý příklad použijte ukázkové pole, které zavoláme myArray , provést metody na. Neváhejte si stáhnout konzolu a kódovat.

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

Tyto příklady budou předpokládat, že znáte základ co je JavaScript a jak funguje . Pokud ne, je to v pořádku, jsme tu všichni, abychom se učili a rostli.

Ponořte se do těchto patnácti výkonných metod pole!

1. Array.push ()

Co to dělá: tam() vezme vaše pole a přidá jeden nebo více prvků na konec pole, poté vrátí novou délku pole. Tato metoda upraví vaše stávající pole.

Spusťte přidáním čísla 20 do pole tam() pomocí argumentu 20.

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

Zkontrolujte, zda to fungovalo:

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

Spuštěním tam() metoda na myArray přidala hodnotu uvedenou v argumentu do pole. V tomto případě 20. Když zaškrtnete myArray v konzole, uvidíte, že hodnota je nyní přidána na konec pole.

2. Array.concat ()

Co to dělá: concat () může sloučit dvě nebo více polí do nového pole. Nemění stávající pole, ale vytváří nové.

Vzít myArray a sloučit pole s názvem novýArray 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]

Tato metoda dělá zázraky při práci s více poli nebo hodnotami, které potřebujete kombinovat, to vše v jednom velmi jednoduchém kroku při použití proměnných.

3. Array.join ()

Co to dělá: připojit() vezme pole a zřetězí obsah pole oddělený čárkou. Výsledek je umístěn v řetězci. Pokud chcete použít alternativu k čárce, můžete zadat oddělovač.

Podívejte se, jak to funguje pomocí myArray. Nejprve pomocí výchozí metody bez argumentu oddělovače, která bude používat čárku.

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

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

JavaScript vygeneruje řetězec, přičemž každá hodnota v poli je oddělena čárkou. Pro změnu oddělovače můžete použít argument ve funkci. Pozorujte to dvěma argumenty: jedinou mezerou a řetězcem.

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'

Prvním příkladem je mezera, která vytváří řetězec, který lze snadno přečíst.

Druhý příklad používá (' a ') , a zde jsou dvě věci, které je třeba vědět.

Nejprve použijeme slovo 'a' k oddělení hodnot. Za druhé, na obou stranách slova je mezera. To je důležitá věc, kterou byste při používání měli mít na paměti připojit() . JavaScript čte argumenty doslova; takže pokud je tento prostor vynechán, vše bude skrčeno dohromady (tj. „2and4and5 ...“ atd.) Není to příliš čitelný výstup!

4. Array.forEach ()

Co to dělá: pro každého() (rozlišuje velká a malá písmena!) provádí funkci pro každou položku ve vašem poli. Tato funkce je jakákoli funkce, kterou vytvoříte, podobně jako použití smyčky 'for' pro použití funkce na pole, ale s mnohem menší prací na kódu.

Je toho trochu víc pro každého() ; podívejte se na syntaxi a poté proveďte jednoduchou funkci, kterou předvedete.

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

Používáme myArray , pro každého() se aplikuje s tečkovým zápisem. Funkci, kterou chcete použít, umístíte do závorky argumentu, což je funkce (položka) v příkladu.

Podívejte se na funkce (položka) . Toto je funkce spuštěná uvnitř forEach () a má svůj vlastní argument. Voláme argument položka . O tomto argumentu je třeba vědět dvě věci:

Když forEach () smyčky přes vaše pole, použije kód pro tento argument. Představte si to jako dočasnou proměnnou, která obsahuje aktuální prvek.
Vyberete název argumentu, může být pojmenován jakkoli chcete. Obvykle by to bylo pojmenováno něčím, co usnadňuje pochopení, například „položka“ nebo „prvek“.

S ohledem na tyto dvě věci se podívejte na tento jednoduchý příklad. Ke každé hodnotě přidejte 15 a nechte konzolu zobrazit výsledek.

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

Používáme položka v tomto případě jako proměnná, takže funkce je zapsána tak, aby přidala 15 ke každé hodnotě pomocí položka . Konzola poté vytiskne výsledky. Takto to vypadá v konzole Google Chrome.

Výsledkem je každé číslo v poli, ale s přidaným 15!

5. Array.map ()

Co to dělá: mapa() provede funkci na každém prvku ve vašem poli a umístí výsledek do nového pole.

Spuštění funkce na každém prvku zní jako forEach (). Rozdíl zde je mapa() po spuštění vytvoří nové pole. forEach () nevytváří nové pole automaticky, k tomu byste museli kódovat konkrétní funkci.

Pomocí map () zdvojnásobte hodnotu každého prvku v myArray a umístěte je do nového pole. Uvidíte to samé funkce (položka) syntaxe pro trochu více praxe.

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

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

Zkontrolujte výsledky v konzole.

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

myArray je beze změny:

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

6. Array.unshift ()

Co to dělá: Podobně jako funguje metoda push (), zrušit řazení () metoda vezme vaše pole a přidá jeden nebo více prvků na začátek pole místo na konec a vrátí novou délku pole. Tato metoda upraví vaše stávající pole.

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

Při protokolování pole do konzoly byste měli vidět číslo 0 na začátku pole.

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

7. Array.sort ()

Co to dělá: Řazení je jednou z nejběžnějších operací prováděných na poli a je velmi užitečné. JavaScript třídit () maticovou metodu lze použít k třídění řady čísel nebo dokonce řetězců pomocí jediného řádku kódu. Tato operace je na místě a vrací seřazené pole úpravou počátečního pole. Vezměte si jinou sadu čísel pro myArray tentokrát.

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

Protože je řazení prováděno na místě, nemusíte pro seřazené pole deklarovat samostatnou proměnnou.

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

Ve výchozím nastavení je pole seřazeno vzestupně, ale můžete volitelně předat vlastní funkci do třídit () způsob třídění pole požadovaným způsobem. V tomto případě jsem prošel zvyk šípová funkce třídit pole číselně ve vzestupném pořadí.

8. Array.reverse ()

Co to dělá: Jak naznačuje název, soubor zvrátit() metoda se používá k obrácení pořadí prvků v poli. Všimněte si toho, že se tím neobrátí obsah pole, ale pouze samotné pořadí. Zde je příklad pro lepší pochopení této metody:

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

Protokolujte výstup do konzoly a ověřte operaci.

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

Jak vidíte, pořadí prvků bylo obráceno. Dříve byl prvek na posledním indexu (prvek 14 na indexu 6) nyní prvkem na nulovém indexu a tak dále.

9. Array.slice ()

Co to dělá: plátek() se používá k načtení mělké kopie části pole. Jednodušeji řečeno, tato metoda vám umožňuje vybrat konkrétní prvky z pole podle jejich indexu. Můžete předat počáteční index prvku, ze kterého chcete načíst, a prvky a volitelně také koncový index.

Pokud nezadáte koncový index, budou načteny všechny prvky od počátečního indexu po konec pole. Tato metoda vrací nové pole a nemění stávající.

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

Ve výše uvedeném kódu jsou načteny všechny prvky od druhého indexu po poslední index, protože není předán parametr end index. Zaznamenejte obě pole do konzoly.

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

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

Počáteční pole evidentně není upraveno metodou slice () a místo toho vrací nové pole, které je uloženo v nakrájenýArray proměnná. Zde je příklad, ve kterém je koncový parametr indexu také předán do plátek() metoda.

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

[4, 5]

10. Array.splice ()

Co to dělá: spojka () je užitečná metoda pole používaná k odebírání nebo nahrazování prvků v poli na místě. Zadáním indexu a počtu prvků k odstranění změní pole.

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

Ve výše uvedeném příkladu myArray pole je spojeno z indexu 2 a jsou z něj odebrány 3 prvky. Pole nyní obsahuje:

[2, 4, 12, 14]

Chcete -li prvky nahradit, nikoli je pouze odstranit, můžete předat libovolný počet volitelných parametrů s prvky, které chcete nahradit, například takto:

jak používat sd kartu 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 ()

Co to dělá: filtr() metoda je užitečná metoda pole, která přebírá funkci obsahující test a vrací nové pole se všemi prvky, které tímto testem prošly. Tato metoda, věrná svému názvu, slouží k filtrování prvků, které potřebujete, od ostatních prvků. Filtrace se provádí pomocí funkce, která vrací logickou hodnotu.

Zde je příklad filtr() metoda používaná pro získání pouze těch prvků z pole, které jsou dělitelné 2.

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

Ve výše uvedeném příkladu je jako parametr předána funkce šipka, která bere každé číslo z původního pole a kontroluje, zda je dělitelné 2 pomocí modulo ( % ) a rovnost ( === ) operátor. Výstup vypadá takto:

[2, 4, 12, 14]

12. Array.reduce ()

Co to dělá: snížit() je metoda pole, která využívá funkci reduktoru a spouští ji na každém prvku pole, aby při návratu vydala jednu hodnotu. Jako požadované parametry vyžaduje funkci reduktoru s proměnnou akumulátoru a aktuální proměnnou prvku. Hodnota akumulátoru je zapamatována ve všech iteracích a je nakonec vrácena po konečné iteraci.

Populárním případem použití této metody je vypočítat součet všech prvků v poli. Implementace této funkce je následující:

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

0 je předán jako druhý parametr ve výše uvedeném příkladu, který je použit jako počáteční hodnota proměnné akumulátoru. The součty čísel proměnná bude obsahovat návratovou hodnotu snížit() metoda, u které se očekává součet všech prvků v poli.

console.log(sumOfNums); 53

13. Array.includes ()

Co to dělá: Hledání prvku v poli pro kontrolu, zda je přítomen, je operace, která se používá poměrně často, a proto má JavaScript pro to vestavěnou metodu ve formě zahrnuje() metoda pole. Zde je návod, jak jej můžete použít:

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

Tato metoda přebírá požadovaný parametr, prvek, který se má vyhledat, a volitelný parametr, index pole, ze kterého se má začít hledat. V závislosti na tom, zda je tento prvek přítomen nebo ne, se vrátí skutečný nebo Nepravdivé resp. Výstupem tedy bude:

true  
false  
true  
false

14. Array.indexOf ()

Co to dělá: indexOf () metoda se používá ke zjištění indexu, ve kterém lze v poli nalézt první výskyt zadaného prvku. Ačkoli je podobná metodě includes (), tato metoda vrací číselný index nebo -1, pokud prvek není v poli přítomen.

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 používá přísnou rovnost ke kontrole, zda je přítomen prvek, což znamená, že hodnota i datový typ by měly být stejné. Volitelný druhý parametr vezme index, ze kterého se začne hledat. Na základě těchto kritérií bude výstup vypadat takto:

1  
-1  
4

15. Array.fill ()

Co to dělá: Často možná budete muset nastavit všechny hodnoty v poli na statickou hodnotu, jako je 0. Místo použití smyčky můžete vyzkoušet vyplnit() metoda pro stejný účel. Tuto metodu můžete zavolat na pole s 1 požadovaným parametrem: hodnotou pro vyplnění pole a 2 volitelnými parametry: počáteční a koncový index, mezi nimiž se má vyplnit. Tato metoda upravuje vystupující 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);

Při protokolování 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]

Další kroky na vaší cestě za JavaScriptem

Pole jsou výkonnou součástí jazyka JavaScript, a proto je v nich integrováno tolik metod, které vám jako vývojáři usnadní život. Nejlepší způsob, jak zvládnout těchto patnáct metod, je procvičit.

Jak se nadále učíte JavaScript, MDN je skvělý zdroj pro podrobnou dokumentaci. Udělejte si pohodlí v konzole a poté své dovednosti zdokonalte pomocí nejlepších editorů JavaScriptu pro programátory. Jste připraveni vytvořit svůj web pomocí JavaScriptu? Proč se nepodívejte na některé rámce, které můžete zvážit.

Podíl Podíl tweet E-mailem 6 JavaScriptových rámců, které stojí za to se naučit

Existuje mnoho rámců JavaScript, které pomáhají s vývojem. Zde jsou některé, které byste měli vědět.

Číst dále Související témata

Programování
JavaScript
Tipy pro kódování

O autorovi Nitin Ranganath(31 článků zveřejněno)

Nitin je vášnivý vývojář softwaru a student počítačového inženýrství vyvíjející webové aplikace pomocí technologií JavaScript. Pracuje jako webový vývojář na volné noze a ve svém volném čase rád píše pro Linux a programování.

Více od Nitin Ranganath

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru