Úvod do JavaScriptových polí pro začátečníky

Pole je v JavaScriptu objekt podobný seznamu, který lze použít k uložení více hodnot do jedné proměnné. Jde oobjednanou kolekci hodnot, kde každá hodnota se nazývá prvek, který má předem definovanou číselnou pozici v poli, označovanou jako jeho index.

Pole JavaScriptu může ukládat různé druhy datových typů v jednom jediném poli:řetězce, booleovské hodnoty, čísla, prvky HTML, objekty nebo dokonce další pole. Znamená to, že můžete vytvořit pole, které má na první pozici uložený prvek HTML, na druhé objekt, na třetí řetězec atd.

Stejně jako jiné programovací jazyky jako Java a Python jsou pole v JavaScriptu nulová . Znamená to, že první prvek v poli má index 0, druhý prvek má index 1, třetí prvek má index 2 atd.

Vytvoření pole

Existují dva způsoby, jak vytvořit pole v JavaScriptu. Nejjednodušší způsob, jak vytvořit pole, je pomocí doslovného zápisu pole:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

Případně můžete použít globální Array konstruktor třídy pro inicializaci nového pole:

const fruits = new Array('Apple', 'Orange', 'Mango', 'Banana');

Chcete-li vytvořit prázdné pole, použijte prázdné závorky:

const animals = [];

Mezery a zalomení řádků jsou povoleny. Deklarace pole se může rozkládat na více řádcích:

const fruits = [
    'Apple',
    'Orange',
    'Mango',
    'Banana'
];

Pokud předem znáte počet prvků, které pole bude obsahovat, můžete počet použít jako argument pro Array konstruktér. Automaticky se vytvoří prázdné pole se zadaným počtem slotů inicializovaných hodnotou undefined :

const numbers = new Array(50);

Pole může ukládat prvky libovolného typu:řetězce, čísla, funkce, objekty a dokonce i další pole:

const arr = [
    'Tiger',
    29.6,
    { name: 'John Doe', age: 29 },
    true,
    function () {
        console.log('Hey there!');
    },
    ['Apple', 'Banana']
];

Přístup k prvkům pole

K prvku pole můžete přistupovat pomocí jeho indexového čísla v hranatých závorkách:

const animals = ['🐱', '🐭', '🐧', '🐯', '🐘'];

console.log(animals[1]); // 🐭
console.log(animals[3]); // 🐯

Všimněte si, že index pole začíná na 0, a ne na 1. To znamená, že první prvek má index 0 a poslední prvek má index délky pole mínus 1. Výše ​​uvedené pole pěti prvků má indexy začínající od 0 do 4.

Pole JavaScriptu může být vícerozměrné , což znamená, že prvek pole může obsahovat další pole, jehož prvky mohou obsahovat pole a tak dále. Chcete-li získat přístup k prvku z vícerozměrného pole, musíte index zadat vícekrát:

const users = [
    ['John Doe', 22],
    ['Lisa Lee', 33],
    [
        ['Alex', 'USA'],
        ['Tom Doe', 'DE']
    ]
];

console.log(users[1][0]); // Lisa Lee
console.log(users[2][0]); // ['Alex', 'USA']
console.log(users[2][1][0]); // Tom Doe

Přidávání prvků do pole

Nejjednodušší způsob, jak přidat prvek do pole, je pomocí push() metoda:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// add a new element
fruits.push('Cherry');

console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana', 'Cherry']

Případně můžete použít length vlastnost pro vložení prvku na konec pole:

fruits[fruits.length] = 'Cherry';

Změna prvku pole

Následující příklad ukazuje, jak můžete změnit hodnotu prvku pole:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// change 2nd element value
fruits[1] = 'Cherry';

// print array
console.log(fruits); // [ 'Apple', 'Cherry', 'Mango', 'Banana' ]

Odstranění prvků z pole

Protože pole JavaScript jsou objekty, můžete použít delete operátor k odstranění jakéhokoli konkrétního prvku z pole:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// delete 2nd element
delete fruits[1];

console.log(fruits); // ['Apple', <1 empty item>, 'Mango', 'Banana']

Od delete operátor pouze resetuje hodnotu prvku na undefined , neměli byste jej používat, protože by mohl zanechat v poli díry. Místo toho byste měli použít pop() a shift() metody vysvětlené níže.

Detekce pole

Jednou z nejčastějších otázek v komunitách JavaScriptu je, jak určit, zda je daná proměnná pole.

Hlavním problémem je, že pole JavaScriptu je interně považováno za speciální druh objektu. Syntaxe hranatých závorek používaná pro přístup k prvku pole arr[index] je v podstatě stejný, jaký používáme pro objekt obj[key] . Jediný viditelný rozdíl je v tom, že čísla se používají jako klíče.

Proto nemůžete použít typeof operátor, protože by vždy vrátil object pro pole:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(typeof fruits); // object

Aby bylo možné skutečně určit, zda je daná proměnná pole, zavedl ECMAScript 5 novou metodu nazvanou Array.isArray() :

Array.isArray(fruits); // true

Array.isArray() funguje ve všech moderních prohlížečích, stejně jako Internet Explorer 9 a vyšší. Případně můžete také použít instanceof operátor pro kontrolu, zda daný objekt je pole:

fruits instanceof Array; // true

instanceof operátora podporuje Internet Explorer 6 a vyšší.

length Vlastnost

length vlastnost pole vrací největší číselný index plus jedna a ne skutečný počet prvků. Při změně pole se automaticky aktualizuje.

Podívejme se na následující příklad, abychom pochopili, co tím myslím:

const animals = [];
animals[20] = 'Cat';

console.log(animals.length); // 21

Jak můžete vidět výše, pole je length Když jsme přidali pouze jeden prvek, vlastnost se aktualizuje na nejvyšší index plus jedna. Z hlediska výkonu je to velmi užitečné, protože skutečné prvky se nepočítají, kdykoli pole upravíme.

Další zajímavá věc o length vlastnost je, že je zapisovatelný . Pro zvětšení nebo zmenšení velikosti pole můžete ručně nastavit novou hodnotu. Pole lze zkrátit nastavením menšího length hodnota:

const numbers = [1, 2, 3, 4, 5];

// truncate to 3 elements
numbers.length = 3;

console.log(numbers);   // [1, 2, 3]

// increase size to 6
numbers.length = 6;

console.log(numbers);   // [1, 2, 3, empty × 3]

Chcete-li pole vymazat, jednoduše nastavte length hodnotu vlastnosti na 0:

// clear the array
numbers.length = 0;

console.log(numbers); // []

Opakování pole

Existuje několik způsobů, jak iterovat prvky pole. Nejjednodušší způsob je použít klasický for smyčka:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

K iteraci polem také používáte další smyčky JavaScriptu jako for...of, for...in a forEach(). Podívejte se na tento článek, kde se dozvíte více o všech dostupných způsobech smyčkování pole v JavaScriptu.

Metody pole

Prototyp pole poskytuje několik metod pro provádění operací procházení a mutací, jako je přidání, odebrání, aktualizace a další do polí. Pojďme se podívat na některé z nejpopulárnějších takových metod, které můžete použít k manipulaci s poli.

toString()

JavaScript toString() metoda převede pole na řetězec oddělený čárkami:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(fruits.toString()); // Apple,Orange,Mango,Banana

join()

join() metoda zřetězí všechny prvky pole do řetězce. Je velmi podobný výše uvedenému toString() metoda, ale umožňuje zadat oddělovač:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(fruits.join('_')); // Apple_Orange_Mango_Banana

concat()

concat() metoda vytvoří nové pole sloučením dvou existujících polí:

const arr1 = [1, 2];
const arr2 = [3, 4];

const newArr = arr1.concat(arr2);

console.log(newArr); // [ 1, 2, 3, 4 ]

concat() metoda nemění existující pole. Místo toho vždy vrátí nové pole. Můžete dokonce zadat více než jeden argument pole:

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const newArr = arr1.concat(arr2, arr3);

console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ]

Můžete také použít concat() metoda k vytvoření nového pole z existujícího pole s dalšími prvky:

const arr1 = [1, 2];

const newArr = arr1.concat(2, 3, 4);

console.log(newArr); // [ 1, 2, 2, 3, 4 ]

push()

push() metoda přidá jeden nebo více prvků na konec existujícího pole:

const names = ['Alex', 'Mike', 'Atta'];

// add more elements
names.push('Ali', 'Emma');

console.log(names); // ['Alex', 'Mike', 'Atta', 'Ali', 'Emma']

push() metoda vrací aktualizované length pole:

const length = names.push('Ali', 'Emma');

console.log(length); // 5

pop()

pop() metoda dělá opak push() metoda. Odebere poslední prvek pole a vrátí jej:

const names = ['Alex', 'Mike', 'Atta'];

// remove last element
const elem = names.pop();

console.log(elem); // Atta

unshift()

unshift() metoda přidá jeden nebo více prvků na začátek pole a zruší posun starších prvků. Tato metoda vrací aktualizovanou délku pole:

const names = ['Alex', 'Mike', 'Atta'];

// add new elements at start
const length = names.unshift('Ali', 'Emma');

console.log(length); // 5
console.log(names); // ['Ali', 'Emma', 'Alex', 'Mike', 'Atta']

shift()

shift() metoda odstraní první prvek pole a vrátí jej. Všechny ostatní prvky jsou posunuty na nižší index:

const names = ['Alex', 'Mike', 'Atta'];

// remove an element from start
const elem = names.shift();

console.log(elem); // Alex
console.log(names); // ['Mike', 'Atta']

splice()

splice() metodu lze použít k přidání nových prvků i k odstranění stávajících prvků z pole. Tato metoda změní původní pole a vrátí odstraněné prvky, pokud existují.

Zde je syntaxe splice() :

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  • start — Počáteční index pro změnu prvků v poli.
  • deleteCount — Celé číslo udávající počet prvků v poli, které se mají odstranit z start .
  • item1, item2, ... — Prvky, které mají být přidány do pole, počínaje start .

Odebrání prvků

Zde je příklad, který používá splice() pro odstranění prvních dvou prvků ze začátku pole:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// remove first elements
const removed = fruits.splice(0, 2);

console.log(fruits); // ['Mango', 'Banana']
console.log(removed); // ['Apple', 'Orange']

Pokud deleteCount je vynechán, všechny prvky začínající od start jsou odstraněny z pole:

const removed = fruits.splice(1);

console.log(fruits); // ['Apple']
console.log(removed); // ['Orange', 'Mango', 'Banana']

Odstraněné položky můžete také nahradit novými pomocí splice() :

const removed = fruits.splice(1, 2, 'Cherry', 'Watermelon');

console.log(fruits); // ['Apple', 'Cherry', 'Watermelon', 'Banana']
console.log(removed); // ['Orange', 'Mango']

Přidávání prvků

Chcete-li přidat nové prvky pomocí splice() , stačí nastavit deleteCount na nulu:

const removed = fruits.splice(2, 0, 'Cherry');

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana']
console.log(removed); // []

slice()

slice() metoda vyřízne část pole do nového pole. Tato metoda vrací nové pole s prvky zkopírovanými z původního pole. Původní pole zůstane nezměněno.

slice() metoda přebírá až dva argumenty:počáteční index pro výběr prvků a volitelný koncový index (exkluzivní).

Zde je příklad:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

const sliced = fruits.slice(1, 3);

console.log(sliced); // ['Orange', 'Mango']

Pokud je koncový index vynechán, slice() oddělí zbytek pole počínaje počátečním indexem:

const sliced = fruits.slice(1);

console.log(sliced); // ['Orange', 'Mango', 'Banana']

indexOf()

indexOf() metoda prohledá pole pro daný prvek a vrátí jeho pozici:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.indexOf('Orange'); // 1
fruits.indexOf('Cherry'); // -1 (not found)

filter()

filter() metoda vytvoří nové pole naplněné všemi prvky pole, které splňují určitou podmínku:

const ages = [24, 45, 33, 76, 55, 86];

const above50 = ages.filter(age => age > 50);

console.log(above50); // [76, 55, 86]

filter() metoda neprovádí funkci pro prázdné prvky. Také to nemění původní pole.

map()

map() metoda vytvoří nové pole s výsledky provedení funkce pro každý prvek v poli:

const prices = [10, 9.99, 15, 45];

const updated = prices.map(price => '$' + price);

console.log(updated); // ['$10', '$9.99', '$15', '$45']

reduce()

reduce() metoda redukuje pole na jednu hodnotu. Volá poskytnutou metodu pro každý prvek pole zleva doprava kromě prázdných hodnot. Návratová hodnota funkce je uložena v akumulátoru.

reduce() metoda se běžně používá pro výpočet součtů, jako je součet, průměr, minimální a maximální hodnoty v poli.

Zde je příklad, který vypočítá součet všech prvků v poli pomocí reduce() metoda:

const numbers = [10, 99, 75, 45, 33];

const sum = numbers.reduce((total, num) => total + num);

console.log(sum); // 262

Můžete také předat volitelnou počáteční hodnotu akumulátoru na reduce() metoda:

// pass initial value 100
const sum = numbers.reduce((total, num) => total + num, 100);

console.log(sum); // 362

forEach()

forEach() metoda iteruje přes všechny prvky pole voláním funkce jednou pro každý prvek v pořadí:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.forEach((fruit, index) => {
    console.log(`${fruit} has ${index} index.`);
});

// Apple has 0 index.
// Orange has 1 index.
// Mango has 2 index.
// Banana has 3 index.

Podívejte se na tuto příručku, kde se dozvíte více o forEach() metoda v JavaScriptu.

every()

every() metoda se používá ke kontrole, zda všechny prvky v poli projdou určitým testem. Vrací true pokud projdou všechny prvky, jinak false :

const numbers = [10, 99, 75, 45, 33];

// check if all elements are > 15
const result = numbers.every(num => num > 15);

console.log(result); // false

every() metoda provede funkci jednou pro každý prvek přítomný v poli. Pokud najde prvek pole, pro který funkce vrátí false , every() vrátí false a nekontroluje zbývající prvky.

some()

some() metoda je podobná every() kromě toho, že vrací true pokud jeden nebo více prvků splní určitou podmínku:

const numbers = [10, 99, 75, 45, 33];

// check if any element > 15
const result = numbers.some(num => num > 15);

console.log(result); // true

includes()

includes() metoda zkontroluje, zda daný prvek v poli existuje. Je podobný some() metoda. Ale místo čekání na splnění konkrétní podmínky jednoduše zkontroluje, zda pole obsahuje daný prvek:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.includes('Apple'); // true
fruits.includes('Watermelon'); // false

Závěr

To je vše, lidi! V tomto článku jsme se podrobně podívali na pole JavaScriptu. Naučili jsme se, jak vytvořit pole, jak přistupovat k prvku z pole, jak přidávat, aktualizovat a odstraňovat prvky a tak dále.

Nakonec jsme se podívali na některé z nejčastěji používaných metod pole. Existuje mnoho dalších metod, které můžete použít k manipulaci s polem. Přečtěte si tento článek MDN, kde se o nich dozvíte více.