Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


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 typeofv 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 lengthpole vrací délku pole (počet prvků pole).

Příklad

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

Vlastnost lengthje 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 forsmyč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í lengthvlastnosti:

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é newslovo 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.

Test Yourself With Exercises

Exercise:

Get the value "Volvo" from the cars array.

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