Pole JavaScriptu
Pole je speciální proměnná, která může obsahovat více než jednu hodnotu:
const cars = ["Saab", "Volvo", "BMW"];
Proč používat pole?
Pokud máte seznam položek (například seznam názvů aut), uložení aut do jednotlivých proměnných by mohlo 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 měli ne 3 auta, ale 300?
Řešením je pole!
Pole může obsahovat mnoho hodnot pod jedním názvem a k hodnotám můžete přistupovat 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"];
Mezery a zalomení řádků nejsou důležité. Deklarace může zahrnovat více řádků:
Příklad
const cars = [
"Saab",
"Volvo",
"BMW"
];
Můžete také vytvořit pole a poté poskytnout prvky:
Příklad
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
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");
Dva výše uvedené příklady dělají přesně totéž.
Není potř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 přistupujete odkazem na číslo indexu :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Poznámka: Indexy polí 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 cars
:
cars[0] = "Opel";
Příklad
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Přístup k úplnému poli
Pomocí JavaScriptu lze získat přístup k celému poli pomocí názvu pole:
Příklad
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Pole jsou objekty
Pole jsou zvláštním typem objektů. Operátor typeof
v JavaScriptu vrací "objekt" pro pole.
Pole JavaScriptu se však nejlépe popisují jako pole.
Pole používají čísla pro přístup ke svým "prvkům". V tomto příkladu person[0]
vrátí John:
Pole:
const person = ["John", "Doe", 46];
Objekty používají jména pro přístup ke svým "členům". V tomto příkladu
person.firstName
vrátí John:
Objekt:
const person = {firstName:"John", lastName:"Doe", age:46};
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 proměnné různých typů ve stejném poli.
Objekty můžete mít v poli. Můžete mít funkce v poli. Pole můžete mít v poli:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Vlastnosti a metody pole
Skutečná síla polí JavaScriptu 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 prvků pole).
Příklad
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Vlastnost length
je vždy o jednu vyšší než nejvyšší index pole.
Přístup k prvnímu prvku pole
Příklad
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Přístup k poslednímu prvku pole
Příklad
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Looping Array Elements
Jedním ze způsobů, jak procházet polem, je použít for
smyčku:
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>";
Můžete také použít Array.forEach()
funkci:
Příklad
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Přidání prvků pole
Nejjednodušší způsob, jak přidat nový prvek do pole, je pomocí push()
metody:
Příklad
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Nový prvek lze také přidat do pole pomocí length
vlastnosti:
Příklad
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
VAROVÁNÍ !
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
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"
VAROVÁNÍ !!
Pokud použijete pojmenované indexy, JavaScript předefinuje pole na objekt.
Poté některé metody a vlastnosti pole přinesou 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
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.
- Objekty byste měli používat , když chcete, aby názvy prvků byly řetězce (text) .
- Pokud chcete, aby názvy prvků byly čísla , měli byste použít pole .
JavaScript new Array()
JavaScript má vestavěný konstruktor pole new 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];
Klíčové new
slovo může způsobit neočekávané výsledky:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Běžná chyba
const points = [40];
není totéž jako:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Jak rozpoznat pole
Častá otázka zní: Jak poznám, zda je proměnná pole?
The problem is that the JavaScript operator typeof
returns
"object
":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray()
:
Array.isArray(fruits);
Solution 2:
The instanceof
operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.