Pole JavaScriptu

Obsah

Pole je speciální proměnná, která může obsahovat více než jednu hodnotu:

const cars = ["Saab", "Volvo", "BMW"];

Zkuste to sami →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Proč používat pole?

Pokud máte seznam položek (například seznam názvů aut), uložení auta v jednotlivých proměnných by mohla vypadat takto:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Co když však chcete procházet vozy a najít konkrétní? A co kdybyste neměli 3 auta, ale 300?

Řešením je pole!

Pole může obsahovat mnoho hodnot pod jedním jménem a vy můžete získat přístup k hodnotám odkazem na číslo indexu.

Vytvoření pole

Použití literálu pole je nejjednodušší způsob, jak vytvořit pole JavaScript.

Syntax:

const array_name = [item1, item2, ...];

Je běžnou praxí deklarovat pole pomocí klíčového slova const.

Další informace o const s poli naleznete v kapitole: JS Array Const.

Příklad

const cars = ["Saab", "Volvo", "BMW"];

Zkuste to sami →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Mezery a zalomení řádků nejsou důležité. Deklarace může zahrnovat více řádků:

Příklad

const cars = [
  "Saab",
    "Volvo",
    "BMW"
];

Zkuste to sami →

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

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

<script>
const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Můžete také vytvořit pole a poté poskytnout prvky:

Příklad

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Zkuste to sami →

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

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

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Použití klíčového slova JavaScriptu nové

Následující příklad také vytvoří pole a přiřadí mu hodnoty:

Příklad

const cars = new Array("Saab", "Volvo", "BMW");

Zkuste to sami →

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

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

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Dva výše uvedené příklady dělají přesně totéž.

Není třeba používat new Array().

Pro jednoduchost, čitelnost a rychlost provádění použijte metodu pole literal.

Přístup k prvkům pole

K prvku pole se dostanete odkazem na číslo indexu:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Zkuste to sami →

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Poznámka: Indexy pole začínají 0.

[0] je první prvek. [1] je druhý prvek.

Změna prvku pole

Tento příkaz změní hodnotu prvního prvku v autech:

cars[0] = "Opel";

Příklad

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Zkuste to sami →

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

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Převod pole na řetězec

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>

Přístup k úplnému poli

Pomocí JavaScriptu lze získat přístup k celému poli odkazem na pole název:

Příklad

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Zkuste to sami →

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

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

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Pole jsou objekty

Pole jsou zvláštním typem objektů. Operátor typeof v JavaScriptu vrací "object" for pole.

Pole JavaScriptu se však nejlépe popisují jako pole.

Pole používají čísla pro přístup ke svým "prvkům". V tomhle například osoba[0] vrací John:

Pole:

const person = ["John", "Doe", 46];

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

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

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Objekty používají jména pro přístup ke svým "členům". V tomto příkladu person.firstName vrací John:

objekt:

const person = {firstName:"John", lastName:"Doe", age:46};

Zkuste to sami →

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

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

Prvky pole mohou být objekty

Proměnné JavaScriptu mohou být objekty. Pole jsou zvláštní druhy objektů.

Z tohoto důvodu můžete mít v souboru proměnné různých typů stejné pole.

Objekty můžete mít v poli. Můžete mít funkce v poli. Můžeš mít pole v poli:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Vlastnosti a metody pole

Skutečnou silou JavaScriptových polí jsou vestavěné vlastnosti pole a metody:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Array metody jsou popsány v dalších kapitolách.

Vlastnost délky

Vlastnost length pole vrací délku pole (počet pole Prvky).

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = 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>

Vlastnost length je vždy o jednu větší než nejvyšší index pole.

Přístup k prvnímu prvku pole

Příklad

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

Zkuste to sami →

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

Přístup k poslednímu prvku pole

Příklad

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Zkuste to sami →

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

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

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

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

</body>
</html>

Looping Array Elements

Jedním ze způsobů, jak procházet polem, je použít cyklus for:

Příklad

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

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text 
  += "</ul>";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

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

</body>
</html>

Můžete také použít funkci Array.forEach():

Příklad

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

Zkuste to sami →

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

<p>Call a function for each array element:</p>

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

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Přidání prvků pole

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

Příklad

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

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>

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Nový prvek lze také přidat do pole pomocí vlastnosti length:

Příklad

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Zkuste to sami →

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

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

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

UPOZORNĚNÍ!
<p>Přidání prvků s vysokými indexy může vytvořit nedefinované „díry“ v poli:

Příklad

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Zkuste to sami →

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

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

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

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

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

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

</body>
</html>

Asociativní pole

Mnoho programovacích jazyků podporuje pole s pojmenovanými indexy.

Pole s pojmenovanými indexy se nazývají asociativní pole (nebo hash).

JavaScript nepodporuje pole s pojmenovanými indexy.

V JavaScriptu pole vždy používají číslované indexy.

Příklad

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Zkuste to sami →

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

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

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

VAROVÁNÍ!!
Pokud použijete pojmenované indexy, JavaScript předefinuje pole na objekt.

Poté budou některé metody a vlastnosti pole produkovat nesprávné výsledky.

Příklad:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Zkuste to sami →

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

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

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

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Rozdíl mezi poli a objekty

V JavaScriptu pole používají číslované indexy.

V JavaScriptu objekty používají pojmenované indexy.

Pole jsou speciálním druhem objektů s číslovanými indexy.

Kdy použít pole. Kdy použít objekty.

JavaScript nepodporuje asociativní pole.
Chcete-li mít názvy prvků, měli byste použít objekty řetězce (text).
Chcete-li mít názvy prvků, měli byste použít pole čísla.

JavaScript new Array()

JavaScript má vestavěný konstruktor pole nové Array().

Místo toho však můžete bezpečně použít [].

Tyto dva různé příkazy vytvářejí nové prázdné pole s názvem body:

const points = new Array();
const points = [];

Tyto dva různé příkazy vytvářejí nové pole obsahující 6 čísel:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

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

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Klíčové slovo nové může způsobit neočekávané výsledky:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

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

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with two elements:
const points = new Array(40, 100);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

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

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with one element ???
const points = new Array(40);

Zkuste to sami →

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

Běžná chyba

const points = [40];

není totéž jako:

const points = new Array(40);

// Create an array with one element:
const points = [40];

Zkuste to sami →

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

<p>Create an Array with one element.</p>

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

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with 40 undefined elements:
const points = new Array(40);

Zkuste to sami →

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

<p>Avoid using new Array().</p>

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

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Jak rozpoznat pole

Častá otázka zní: Jak poznám, zda je proměnná pole?

Problém je v tom, že vrací JavaScriptový operátor typeof "objekt":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

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

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

</body>
</html>

Operátor typeof vrací objekt, protože pole JavaScriptu je an objekt.

Řešení 1:

K vyřešení tohoto problému ECMAScript 5 (JavaScript 2009) definoval novou metodu Array.isArray():

Array.isArray(fruits);

Zkuste to sami →

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

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

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

</body>
</html>

Řešení 2:

Operátor instanceof vrátí hodnotu true, pokud je vytvořen objekt daným konstruktérem:

const fruits = ["Banana", "Orange", "Apple"];
    
fruits instanceof Array;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

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

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

</body>
</html>

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.