Metody pole JavaScript

Obsah

Metody jsou uvedeny v pořadí, v jakém se objevují na této stránce s výukovým programem

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

Délka pole JavaScript

Vlastnost length vrací délku (velikost) pole:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Pole JavaScript `toString()`

JavaScriptová metoda toString() převede pole na a řetězec hodnot pole (oddělených čárkami).

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Výsledek :

Banana,Orange,Apple,Mango

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Metoda join() také spojuje všechny prvky pole do řetězce.

Chová se stejně jako toString(), ale navíc můžete zadat oddělovač:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Výsledek :

Banana * Orange * Apple * Mango

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

Pukání a tlačení

Při práci s poli je snadné prvky odebírat a přidávat nové prvky.

To je to, co je praskání a tlačení:

Vyskakování položek vysouvání z pole nebo vkládání položky do pole.

Pole JavaScript `pop()`

Metoda pop() odstraní poslední prvek z pole:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Metoda pop() vrací hodnotu, která byla „vysunuta“:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Pole JavaScript `push()`

Metoda push() přidá do pole nový prvek (na konci):

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Metoda push() vrací novou délku pole:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Posouvání prvků

Posouvání je ekvivalentní praskání, ale místo toho pracujete na prvním prvku poslední.

Pole JavaScript `shift()`

Metoda shift() odstraní první prvek pole a "posune" všechny ostatní prvky na nižší index.

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Metoda shift() vrací hodnotu, která byla „posunutá“:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Pole JavaScript `unshift()`

Metoda unshift() přidá do pole nový prvek (na začátku) a "uvolní posun" starší prvky:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Metoda unshift() vrací novou délku pole:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Změna prvků

K prvkům pole se přistupuje pomocí jejich indexového čísla:

indexy pole začínají 0:

[0] je první prvek pole
[1] je druhý
[2] je třetí ...

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Délka pole JavaScript

Vlastnost length poskytuje snadný způsob připojení nového prvku k poli:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Pole JavaScript `delete()`

Varování !

Prvky pole lze odstranit pomocí JavaScriptového operátoru delete.

Použití delete ponechá nedefinované otvory v pole.

Místo toho použijte pop() nebo shift().

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Slučování (řetězení) polí

Metoda concat() vytvoří nové pole sloučením (zřetězením) existující pole:

Příklad (sloučení dvou polí)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Metoda concat() nemění existující pole. Vždy vrátí nové pole.

Metoda concat() může mít libovolný počet argumentů pole:

Příklad (sloučení tří polí)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Metoda concat() může také používat řetězce jako argumenty:

Příklad (sloučení pole s hodnotami)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

Zploštění pole

Zploštění pole je proces snižování rozměrů pole.

Metoda flat() vytvoří nové pole s prvky dílčího pole zřetězenými do zadané hloubky.

Příklad

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Podpora prohlížeče

Pole JavaScript flat() je podporováno ve všech moderních prohlížečích od ledna 2020:


Chrome 69	Edge 79	Firefox 62	Safari 12	Opera 56
Sep 2018	Jan 2020	Sep 2018	Sep 2018	Sep 2018

Spojování a krájení polí

Metoda splice() přidává do pole nové položky.

Metoda slice() oddělí část pole.

Pole JavaScript `splice()`

Metodu splice() lze použít k přidání nových položek do pole:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

První parametr (2) definuje pozici, kde by měly být nové prvky přidáno (připojeno).

Druhý parametr (0) definuje, kolik prvků by mělo být odebráno.

Zbývající parametry ("Lemon" , "Kiwi") definují nové prvky, které mají být přidáno.

Metoda splice() vrací pole se smazanými položkami:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

Použití `splice()` k odstranění prvků

Díky chytrému nastavení parametrů můžete použít splice() k odstranění prvků bez opuštění "díry" v poli:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

První parametr (0) definuje pozici, kde by měly být nové prvky přidáno (připojeno).

Druhý parametr (1) definuje, kolik prvků by mělo být odebráno.

Zbývající parametry jsou vynechány. Nebudou přidávány žádné nové prvky.

Pole JavaScript `slice()`

Metoda slice() rozdělí část pole na nový pole.

Tento příklad vyřízne část pole počínaje prvkem pole 1 ("Oranžový"):

Příklad

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Poznámka

Metoda slice() vytvoří nové pole.

Metoda slice() neodstraní žádné prvky ze zdrojového pole.

Tento příklad vyřízne část pole počínaje prvkem pole 3 ("Jablko"):

Příklad

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Metoda slice() může mít dva argumenty jako slice(1, 3).

Metoda pak vybere prvky od argumentu start až po (ale ne včetně) koncového argumentu.

Příklad

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Pokud je koncový argument vynechán, jako v prvních příkladech, slice() metoda oddělí zbytek pole.

Příklad

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

Automaticky `toString()`

JavaScript automaticky převede pole na řetězec oddělený čárkou, když a očekává se primitivní hodnota.

To je vždy případ, kdy se pokusíte o výstup pole.

Tyto dva příklady povedou ke stejnému výsledku:

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>

</body>
</html>

Poznámka

Všechny objekty JavaScriptu mají metodu toString().

Hledání maximálních a minimálních hodnot v poli

Nejsou zde vestavěné funkce pro nalezení nejvyšší nebo nejnižší hodnota v poli JavaScriptu.

Jak tento problém vyřešíte, se dozvíte v dalším kapitola tohoto tutoriálu.

Třídicí pole

Třídění polí je popsáno v další kapitole tohoto tutoriálu.

Kompletní reference pole

Úplnou referenci Array naleznete na naší stránce:

Kompletní reference JavaScript Array.

Odkaz obsahuje popisy a příklady všech Array vlastnosti a metody.

Metody pole JavaScript

Obsah

Délka pole JavaScript

Příklad

Pole JavaScript toString()

Příklad

Příklad

Pukání a tlačení

Pole JavaScript pop()

Příklad

Příklad

Pole JavaScript push()

Příklad

Příklad

Posouvání prvků

Pole JavaScript shift()

Příklad

Příklad

Pole JavaScript unshift()

Příklad

Příklad

Změna prvků

Příklad

Délka pole JavaScript

Příklad

Pole JavaScript delete()

Varování !

Příklad

Slučování (řetězení) polí

Příklad (sloučení dvou polí)

Příklad (sloučení tří polí)

Příklad (sloučení pole s hodnotami)

Zploštění pole

Příklad

Podpora prohlížeče

Spojování a krájení polí

Pole JavaScript splice()

Příklad

Příklad

Použití splice() k odstranění prvků

Příklad

Pole JavaScript slice()

Příklad

Poznámka

Příklad

Příklad

Příklad

Automaticky toString()

Příklad

Příklad

Poznámka

Hledání maximálních a minimálních hodnot v poli

Třídicí pole

Kompletní reference pole

Pole JavaScript `toString()`

Pole JavaScript `pop()`

Pole JavaScript `push()`

Pole JavaScript `shift()`

Pole JavaScript `unshift()`

Pole JavaScript `delete()`

Pole JavaScript `splice()`

Použití `splice()` k odstranění prvků

Pole JavaScript `slice()`

Automaticky `toString()`