Metody pole

V předchozím článku jsem vám poskytl poměrně důkladné seznámení s poli v JavaScriptu: Jak jsou deklarována a přistupována a dokonce jsme trochu manipulovali s nimi přidáním a odebíráním položek.

Ale vestavěný objekt Array má mnohem více k nabídnutí, takže v tomto článku projdeme všechny nejužitečnější metody, které se na objektu Array nacházejí. Vynechám pouze ty nejnejasnější metody, ale pro úplný seznam metod se podívejte na tuto referenci.

Metody

Vestavěný objekt Array obsahuje pouze jednu relevantní vlastnost (length), ale protože jsme o tom hovořili v předchozím článku, zaměřím se v tomto článku zcela na metody. Pojďme začít.

Array.at()

V předchozím článku jsme viděli, jak můžeme získat položku z pole pomocí indexu, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits[1]); 

Ale můžeme také použít metodu at(). Dělá většinou to samé, takže můžete přepsat výše uvedený příklad tak, aby ji používal takto:

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits.at(1)); 

To je v podstatě to samé, že? Nicméně přináší to jednu malou výhodu: Můžete specifikovat záporný index, aby se počítalo od konce pole místo od začátku. To vám umožní snadno načíst poslední položku, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits.at(-1)); 

Array.concat()

Metoda concat() vám umožní připojit jedno pole na konec druhého, v podstatě kombinuje položky obou polí do nového pole. Zejména ta poslední část je důležitá: Existující pole nebudou změněna - místo toho je vytvořeno nové pole na základě sloučených polí. Zde je příklad:

let fruits = ["Apple", "Pineapple", "Banana"];
let vegetables = ["Avocado", "Broccoli", "Carrot"];
let greenStuff = fruits.concat(vegetables);
alert(greenStuff); 

Array.every()

Metoda every() vrátí true nebo false na základě toho, zda všechny položky v poli mohou projít testem, který poskytnete jako funkci. Zde je příklad:

function StartsWithA(fruit, index, arr)
{
	return fruit.startsWith("A");
}

let fruits = ["Apple", "Pineapple", "Banana"];
let allFruitsStartWithA = fruits.every(StartsWithA);

alert(allFruitsStartWithA); // false

Začínáme deklarací funkce nazvané StartsWithA(). Jednoduše kontroluje, zda název ovoce začíná písmenem "A" a vrací true nebo false na základě výsledku.

Poté tuto funkci předám metodě every(). Metoda every() zavolá tuto funkci (StartsWithA()) pro každou položku v poli, předá jí hodnotu (ovoce), index a dokonce celé pole, pokud byste jej potřebovali. Pokud některá z položek test neprojde, metoda every() okamžitě vrátí false. V opačném případě na konci vrátí true.

Array.filter()

Metoda filter() funguje velmi podobně jako metoda every(), ale místo pouhého vrácení true nebo false, filter() vrátí nové pole se všemi položkami, které testem prošly. Zde je příklad, kde chci získat všechna ovoce s názvem delším než 5 znaků:

function HasLongName(fruit, index, arr)
{
	return fruit.length > 5;
}

let fruits = ["Apple", "Pineapple", "Banana"];
let longNamedFruits = fruits.filter(HasLongName);

alert(longNamedFruits); // Pineapple,Banana

Podobně jako v příkladu s metodou every() jsem definoval funkci, která má být volána metodou filter(), v tomto případě nazvanou HasLongName(). Tato funkce jednoduše kontroluje, zda je název ovoce delší než 5 znaků, a poté vrátí true nebo false na základě výsledku.

Poté tuto funkci předám metodě filter(), která vrátí filtrovanou kopii pole ovoce, obsahující pouze ovoce s názvem delším než 5 znaků.

Array.find() / Array.findLast()

Metoda find() funguje stejně jako metoda filter(), ale místo vrácení všech položek odpovídajících testovací funkci vrátí první položku, která testem projde. Můžete ji použít k nalezení konkrétní položky v poli, takto:

function HasLongName(fruit, index, arr)
{
	return fruit.length > 5;
}

let fruits = ["Apple", "Pineapple", "Banana"];
let longNamedFruit = fruits.find(HasLongName);

alert(longNamedFruit); // Pineapple

Toto je přesně stejný příklad, který jsme použili pro metodu filter(), ale místo filter() nyní voláme metodu find(), která vrátí první ovoce s názvem delším než 5 znaků (ananas).

Metoda find() začne od začátku pole a vrátí první odpovídající položku. Pokud chcete začít od konce pole, použijte metodu findLast():

function HasLongName(fruit, index, arr)
{
	return fruit.length > 5;
}

let fruits = ["Apple", "Pineapple", "Banana"];
let longNamedFruit = fruits.findLast(HasLongName);

alert(longNamedFruit); // Banana

Array.findIndex() / Array.findLastIndex()

Pokud potřebujete najít index položky, místo hodnoty položky, můžete použít metodu findIndex(). Stejně jako metoda find(), předáte jí testovací funkci a jakmile tato funkce vrátí true, získáte index odpovídající položky. Přepsal jsem příklad pro metodu find() tak, aby místo ní používal findIndex():

function HasLongName(fruit, index, arr)
{
	return fruit.length > 5;
}

let fruits = ["Apple", "Pineapple", "Banana"];
let longNamedFruitIndex = fruits.findIndex(HasLongName);

alert(longNamedFruitIndex); // 1

Pro podrobnější vysvětlení, jak to funguje, se podívejte na výše uvedené popisy pro filter() a find(). Neváhejte také nahradit findIndex() voláním findLastIndex(), pokud chcete začít hledání od konce pole místo od začátku.

Array.forEach()

Několik dalších programovacích jazyků obsahuje kontrolní strukturu nazvanou foreach, která usnadňuje procházení kolekcí, jako jsou pole a seznamy. JavaScript přesně řečeno nemá cyklus foreach, ale s metodou foreach() nalezenou na objektu Array můžete dosáhnout toho samého.

Metoda foreach() přijme funkci jako parametr a poté tuto funkci provede pro každý prvek v poli, přičemž vždy předá index a hodnotu položky spolu s celým polem pro referenci. Zde je způsob, jak ji můžete použít:

function AnnounceFruit(fruit, index, arr)
{
	alert("Fruit number " + index + ": " + fruit);
}

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.forEach(AnnounceFruit);

Když voláme forEach() na poli, předáváme funkci nazvanou AnnounceFruit(). Tato jednoduchá funkce nám jen řekne, které ovoce jsme v cyklu právě dosáhli, a také jeho index. Jak vidíte, signatura funkce je stejná jako u funkcí použitých v předchozích příkladech pro filter(), find(), findIndex() a tak dále.

Array.includes()

Metoda includes() vám umožní určit, zda pole obsahuje konkrétní hodnotu nebo ne, takto:

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits.includes("Apple")); // true
alert(fruits.includes("Pear")); // false

Tato metoda není tak flexibilní jako ostatní metody, které jsme viděli, jako například find() - musíte specifikovat přesnou hodnotu, kterou hledáte, a pokud jde o řetězec, musí také odpovídat velikost písmen.

Array.indexOf()

Metoda indexOf() vrátí index hodnoty, kterou předáte jako první parametr, nebo -1, pokud položka nemůže být nalezena. Zde je příklad:

let fruits = ["Apple", "Pineapple", "Banana"];
alert(fruits.indexOf("Banana")); 	// 2
alert(fruits.indexOf("Pear")); 		// -1

Opět, tato metoda není tak flexibilní jako metoda findIndex() - stejně jako metoda includes() musíte specifikovat přesnou hodnotu, kterou hledáte, a pokud jde o řetězec, musí také odpovídat velikost písmen.

Array.join()

Metoda join() vezme pole a spojí jeho prvky do řetězce, odděleného čárkou nebo jakýmkoli jiným znakem, který určíte jako oddělovač. Zde je několik příkladů, jak to funguje:

let fruits = ["Apple", "Pineapple", "Banana"];

let s1 = fruits.join();
// Apple,Pineapple,Banana
alert(s1);

let s2 = fruits.join(" + ");
// Apple + Pineapple + Banana
alert(s2);

Array.map()

Použijte metodu map() k aplikaci funkce na každou položku v poli a poté vrácení modifikovaných položek jako nové pole, přičemž původní pole zůstává nedotčeno. Zde je příklad:

function PostfixFruit(fruit, index, arr)
{
	return fruit + "-fruit";
}

let fruits = ["Apple", "Pineapple", "Banana"];
let postfixedFruits = fruits.map(PostfixFruit);

// Apple,Pineapple,Banana
alert(fruits);

// Apple-fruit,Pineapple-fruit,Banana-fruit
alert(postfixedFruits);

Docela hloupý příklad, ale doufejme, že dokazuje jeho smysl: Voláme metodu map() a poskytujeme funkci, která každý prvek změní přidáním slova "fruit" na konec. Jak vidíte, výsledkem je nové pole.

Opět uvidíte stejný podpis funkce PostfixFruit(), jaký jsme viděli u jiných metod pole, jako jsou filter() a find(), kde bude funkce volána se třemi parametry (hodnota, index a skutečné pole). To vám umožní mít uvnitř funkce PostfixFruit() všechny druhy logiky, pokud je to potřeba, pokud vrací hodnotu, která má být použita pro nové pole.

Array.reverse()

Metoda reverse() obrátí pořadí pole, takže poslední položka se stane první a tak dále. Je velmi snadno použitelná, jak můžete vidět z tohoto příkladu:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.reverse();

// Banana,Pineapple,Apple
alert(fruits);

Upozorňujeme, že na rozdíl od několika dalších metod pole, metoda reverse() změní existující pole a NEvrátí jen jeho novou verzi. Takže při volání metody reverse() ztratíte původní pořadí, pokud si jej před voláním reverse() nezkopírujete.

Array.slice()

Metoda slice() vrátí mělkou kopii pole, s možností specifikovat rozsah prvků k zahrnutí použitím jednoho nebo dvou parametrů. To může znít složitě, ale ve skutečnosti to není - doufám, že se mnou budete souhlasit po prozkoumání tohoto příkladu, kde používáme všechny varianty:

let fruits = ["Apple", "Pineapple", "Banana"];

let f1 = fruits.slice();
// Apple,Pineapple,Banana
alert(f1);

let f2 = fruits.slice(1);
// Pineapple,Banana
alert(f2);

let f3 = fruits.slice(-1);
// Banana
alert(f3);

let f4 = fruits.slice(0, 2);
// Apple,Pineapple
alert(f4);

f1: Pokud nespecifikujeme žádné parametry, jednoduše získáme úplnou kopii pole.

f2: První parametr je počáteční index, který určuje první položku, kterou zahrneme do kopie. Když zahrneme pouze tento parametr, zbytek pole, včetně položky na počátečním indexu, je zahrnut do kopie.

f3: Stejně jako f2, určíme pouze počáteční index, ale použijeme zápornou hodnotu - pokud to uděláte, začne se počítat zpětně od konce pole, místo dopředu od začátku pole.

f4: Použijte druhý parametr k definování konce rozsahu položek, které chcete zahrnout. Mějte na paměti, že zatímco počáteční index je včetný, koncový index je vylučující, což znamená, že rozsah nezahrne položku určenou koncovým indexem.

Array.some()

Dříve v tomto článku jsme použili metodu every(), abychom otestovali, zda VŠECHNY položky v poli mohou projít určitým testem. Metoda some() funguje stejným způsobem, ale vyžaduje pouze jediný kladný výsledek z testovací funkce, aby vrátila true. Takže přepišme příklad použitý pro every() tak, abychom místo něj použili some(), abychom viděli jasný rozdíl:

function StartsWithA(fruit, index, arr)
{
	return fruit.startsWith("A");
}

let fruits = ["Apple", "Pineapple", "Banana"];
let someFruitsStartWithA = fruits.some(StartsWithA);

alert(someFruitsStartWithA); // true

Naše testovací funkce vyžaduje ovoce, které začíná na A, a protože máme "Apple" (jablko), a some() vyžaduje pouze jeden kladný výsledek, celkový test vrátí true. Podpis použitý pro testovací funkci, StartsWithA(), je stejný jako u dalších metod pole jako every(), filter(), find() a tak dále, takže pro více detailů se podívejte na ostatní příklady tohoto článku.

Array.sort()

Metoda sort() vám pomůže seřadit hodnoty pole. Ve výchozím nastavení porovnává položky převodem na řetězce, takže pokud máte pole řetězců, metoda sort() bude fungovat přesně, jak se očekává, ihned po vybalení:

let fruits = ["Apple", "Pineapple", "Banana"];
fruits.sort();

// Apple,Banana,Pineapple
alert(fruits); 

Upozorňujeme, že na rozdíl od několika dalších metod pole, metoda sort() změní existující pole a NEvrátí jen jeho novou verzi. Takže při volání metody sort() ztratíte původní pořadí, pokud si jej před voláním sort() nezkopírujete.

Jakmile máte pole, které nejsou řetězce, musíte implementovat vlastní řadicí funkci. To platí i pro čísla, protože když jsou převedena na řetězce, řazení nebude takové, jak očekáváte, jak můžete vidět z tohoto příkladu:

let numbers = [1, 4.2, 10, 42, 180];
numbers.sort();

// WRONG: 1,10,180,4.2,42
alert(numbers);

Takže implementujme vlastní porovnávací funkci, která bude fungovat pro tento jednoduchý případ použití, kdy potřebujeme seřadit pole čísel:

function CompareNumbers(n1, n2)
{
	n1 = Number.parseFloat(n1);
	n2 = Number.parseFloat(n2);
	return n1 > n2;
}

let numbers = [1, 4.2, 10, 42, 180];
numbers.sort(CompareNumbers);

// 1,4.2,10,42,180
alert(numbers);

Funkce CompareNumbers() vezme dvě hodnoty, které je třeba porovnat, a převede je na skutečná čísla pomocí metody parseFloat(). To nám umožňuje porovnávat je jako čísla místo řetězců, což nám konečně dává očekávané pořadí.

Všimněte si, že metoda sort() vždy vrací položky ve vzestupném pořadí. Pokud je potřebujete v sestupném pořadí, jednoduše zavolejte metodu reverse() (diskutovanou výše) po volání sort().

Shrnutí

Jak vidíte z tohoto článku, objekt Array obsahuje spoustu užitečných metod. Důvodem této rozsáhlé funkcionality je samozřejmě skutečnost, že pole jsou extrémně užitečná a nezbytná v mnoha programovacích úkolech, v JavaScriptu stejně jako v jiných programovacích jazycích.

Jak bylo zmíněno na začátku článku, některé metody jsem zde vynechal, buď proto, že byly již popsány v předchozím článku (např. pop(), push() atd.), nebo proto, že jsou příliš obskurní nebo složité. Pro úplný seznam metod se podívejte na tuto referenci.