Array je v JavaScriptu typ objekt a umožňuje nám ukladat více položek pod jedním názvem proměnné, jeho prvky jsou indexovány, může obsahovat více různých typů a Array v JavaScriptu je možné měnit.

V tomto článku se ale nebudeme více věnovat definicím, ale podíváme se na to, jaké metody nám Array nabízí a v příkladech se podíváme na jejich výstup.

array.at()

Metoda .at() přijímá jako argument číslo a vrátí nám položku, která se na tomto indexu nachází. Můžeme zadat i záporné hodnoty, v tom případě se počítá položka z konce pole.

['car', 'plane', 'train'].at(2)
// vráti ‘train’

array.concat()

Slouží ke spojení 2 nebo více polí. Tato metoda nezmění stávající pole, ale vrátí nové.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const array3 = array1.concat(array2);
// array3 nám vráti [1, 2, 3, 4, 5, 6]

array.every()

[].every() slouží k ověření zda všechny elementy v poli projdou naší funkcí. Na základě výsledky vrátí true nebo false.

[1, 7, 9, 2, 0].every(item => item < 10);
// vráti true

array.fill()

Fill nám vyplní pole zadanou hodnotou, změní stávající array. Začne a skončí pozicí, kterou specifikujeme.

const myArray = ['hyundai', 'skoda', 'ferrari', 'mercedes', 'audi'];
myArray.fill('dacia', 2, 4);
// vypíše nám ['hyundai', 'skoda', 'dacia', 'dacia', 'audi'];

array.filter()

Velice užitečná metoda, kterou by měl každý ovládat. Vytvoří nové pole, které vám vrátí hodnoty na základě vaší podmínky (funkce). Jako argument posíláme funkci.

const myNumbers = [1, 4, 8, 10, 4];
const smallNumbers = myNumbers.filter(item => item < 5);
// vráti nám [1, 4, 4]

array.find()

Další z velmi užitečných metod. Zápis find() je stejný jako v případě filtr(), ale s tím rozdílem, že vrátí první položku, která přejde přes funkci.

const myNumbers = [1, 4, 8, 10, 4];
myNumbers.find(item => item < 5);
// vráti nám 1

array.findIndex()

Findindex nám vrátí překvapivě index. Jako v předchozích případech najde první položku, která přejde přes náš argument – funkci.

const products = ['watch', 'mobile', 'notebook'];
products.findIndex(item => item.length > 7);
// vráti nám 2

array.findLast()

Array findLast() je matoda, která funguje jako find(), akorát naopak, tedy neiteruje pole od jeho začátku ale od jeho konce a vrátí nám první položku, která přejde přes naši funkci. Podívejme se na příklad se stejným polem jako v případě find().

const myNumbers = [1, 4, 8, 10, 4];
myNumbers.findLast(item => item < 5);
// vráti nám 4

array.findLastIndex()

Opět stejná situace jako s findLast akorát s findIndex(). Tedy znovu vrátí nám poslední položku, která přejde přes naši funkci.

const products = ['watch', 'mobile', 'notebook'];
products.findLastIndex(item => item.length > 7);
// vráti nám 1

array.flat()

Zajímavá metoda, která nám vytvoří nové pole spolu s ostatními prvky všech sub-polí. Můžeme specifikovat hloubku, na kterou má pole „flatovat“.

const array1 = [0, 1, 2, [3, 4]];
array1.flat()
// vráti nám [0, 1, 2, 3, 4];

const array2 = [0, 1, 2, [[[3, 4]]]];
array2.flat(2);
// vráti nám [0, 1, 2, [3, 4]]

array.forEach()

ForEach určitě musí znát každý developer. Jedná se o loop, tedy spustí se tolikrát, kolik máme elementů v poli.

const myArray = ['a', 'b', 'c'];

myArray.forEach(element => console.log(element));

// vypíše nám 'a'
// vypíše nám 'B'
// vypíše nám 'C'

array.from()

Array from vytváří nové pole z našeho definovaného pole, je iterován každý prvek.

const helloString = 'hello';
Array.from(helloString);
// vráti nám ['h','e','l','l','o'];

const numberArray = [1, 2, 3];
Array.from(numberArray, x => x * 2);
// vráti nám [2, 4, 6]

array.includes()

Includes zjistí zda pole obsahuje nami zadaný argument. Metoda vrací true nebo false.

const myArray = [1, 2, 3]
myArray.includes(8);
// vráti nám false

array.indexOf()

Tato metoda nám vrátí index hledaného elementu. Pokud nám vrátí -1, tak element v poli neexistuje.

const animals = ['cat', 'dog', 'duck'];
animals.indexOf('dog');
// vráti nám 1

array.isArray()

isArray zjistí zda argument, který posíláme je pole.

const strings = ['hello', 'fordevs'];

Array.isArray(strings);
// vráti nám true

array.prototype.join()

join() nám vrátí nový string, kde mezi každý element v našem poli vloží náš string. Pokud má pole pouze jeden element, tak mám jej vrátí bez vložení našeho stringu.

const date = [18, 2, 2023];
date.join('-');

// vráti nám 18-2-2023;

array.prototype.keys()

Vrátí nám nové pole, které lze iterovat a obsahuje klíče našeho původního pole.

const myArray = ['a', 'b', 'c'];
const iterator = myArray.keys();

for (const key of iterator) {
  console.log(key);
}

// vráti nám 0
// vráti nám 1
// vráti nám 2

array.prototype.lastIndexOf()

lastIndexOf() nám vrátí poslední index daného elementu v poli. V případě tedy, že máte více elementů, které jste poslali jako parametr do lastIndexOf, tak se vám vrátí index vždy jen toho posledního.

const names = ['Peter', 'Marek', 'Boris', 'Marek'];

names.lastIndexOf('Marek');
// vráti nám 3

array.prototype.map()

Map je použit snad v každém projektu. Vytvoří nám nové pole s výsledky naší funkce, kterou posíláme jako argument.

const numbers = [1, 2, 5, 10];

numbers.map(x => x * 2);
// vráti nám [2, 4, 10, 20]

array.of()

Array.of() nám vyrobí novou instanci pole z hodnot, které do této metody pošleme.

Array.of('ahoj', 'fordevs', 2);

// vytvorí nám pole ['ahoj', 'fordevs', 2];

array.prototype.pop()

pop() metoda upraví stávající pole. Odstraní nám poslední element ze stávajícího pole a tento element nám vrátí.

const cars = ['audi', 'opel', 'mazda', 'ford'];

cars.pop();

// cars bude obsahovaať ['audi', 'opel', 'mazda'];
// cars.pop() mám vráti 'ford';

array.prototype.push()

Push metoda přidá jeden nebo více elementů na konec našeho pole a vrátí nám novou délku pole.

const skills = ['javascript', 'html', 'css'];

skills.push('react', 'vue');

// skills bude obsahovať ['javascript', 'html', 'css', 'react', 'vue'];
// vráti nám 5;

array.prototype.reduce()

Reduce je jedna z náročnějších metod pro pochopení. Reduce nám vrátí jednu hodnotu jako výsledek operací na všech elementech v poli. Rychlé vysvětlení reduce metody může být takové, že díky reduce metodě dokážeme sčítat elementy v poli. Pro detailnější vysvětlení reduce metody v tomto článku není prostor, doporučuji si prohlédnout článek na MDN.

const myNumbers = [1, 2, 2, 1];
const initialValue = 0;

myNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);

// vráti nám 6

array.prototype.reduceRight()

Stejný jako reduce() popsaný výše ale s rozdílem, že se pole neiteruje z leva do prava, ale opačným směrem, z prava do leva.

const myNumbers = [1, 2, 2, 1];
const initialValue = 0;

myNumbers.reduceRight((accumulator, currentValue) => accumulator + currentValue, initialValue);

// vráti nám 6

array.prototype.reverse()

Reverse() nám v jednoduchosti otočí pole. Element, který byl poslední bude první a naopak.

const animals = ['mouse', 'dog', 'cat'];

animals.reverse();

// z animals bude ['cat', 'dog', 'mouse'];

array.prototype.shift()

Shift() je pop() ale naopak. Pop nám odstraní poslední element z pole a shift odstraní první element, následně nám jej vrátí.

const myArray = [1, 2, 3, 4];

myArray.shift();

// myArray bude obsahovat [2, 3, 4];
// myArray.shift() mám vráti 1;

array.prototype.slice()

Metoda, která nám vrátí kopii našeho pole upraveného o vybrané elementy, které definujeme pomocí start a end indexu (end není zahrnut).

const names = ['Jan', 'Milan', 'Martin', 'Pavel'];

names.slice(1, 3);

// vráti nám ['Milan', 'Martin'];

array.prototype.some()

Otestuje nám jestli alespoň jeden element z našeho pole přejde přes naši funkci, kterou pošleme do metody jako argument. Vrátí nám true nebo false;

const numberArray = [1, 2, 3];

numberArray.some(x => x < 5);

// vráti nám true

array.prototype.sort()

Užitečná metoda, která nám seřadí stávající pole. Výchozí řazení je abecedně, chceme-li vlastní řazení, můžeme poslat do metody funkci.

const products = ['mobile', 'desktop', 'tablet', 'watch'];

products.sort();

// vráti nám ['desktop', 'mobile', 'tablet', 'watch']

array.prototype.splice()

Upraví stávající pole, upraví jej a/nebo odstraní vybrané elementy a/nebo elementy přidá. Splice() přijímá 3 argumenty. První je start – index, druhý je počet prvků, třetí až x je samotný prvek.

const months = ['jan', 'feb', 'mar', 'apr'];

months.splice(2, 1, 'dec');

// months nám upraví na ['jan', 'feb', 'dec', 'apr'];

array.prototype.toLocaleString()

Metoda, která nám vrátí string reprezentující elementy v poli. Na elementy je použita metoda toLocaleString a tyto stringy jsou odděleny lokálně specifickým stringem (například čárka). Je to užitečné například v datech.

const myDate = new Date();
myDate.toLocaleString('cs', { timeZone: 'UTC' });

//vráti nám '12. 2. 2023 16:01:13';

array.prototype.toString()

Tato metoda vezme elementy v poli a vrátí nám je v jednom stringu.

const randomArray = [1, 2, 'srpen', 'dog'];

randomArray.toString();

//vráti nám '1,2,srpen,dog'

array.prototype.unshift()

Unshift() nám přidá jednu nebo více elementů na začátek našeho pole a vrátí nám jeho novou délku.

const months = ['feb', 'mar'];

months.unshift('jan');

// upraví nám pole months na ['jan', 'feb', 'mar'];
// vráti nám 3

array.prototype.values()

values() nám vrátí iterovatelné pole a jednotlivé iterace představují hodnoty našich elementů.

const myArray = ['a', 'b', 'c'];
const iterator = myArray.values();

for (const value of iterator) {
  console.log(value);
}

// vypíše nám 'a'
// vypíše nám 'b'
// vypíše nám 'c'

Zdroj.