Pole v JavaScriptu je datová struktura používaná k uložení více hodnot do jedné proměnné. Může obsahovat různé typy dat a umožňuje dynamickou změnu velikosti. K prvkům se přistupuje podle jejich indexu počínaje 0.

Pole JavaScriptu

Máte dva způsoby, jak vytvořit pole JavaScript: pomocí konstruktoru Array nebo zkrácená doslovná syntaxe pole , což jsou jen hranaté závorky. Pole mají flexibilní velikost, takže se mohou zvětšovat nebo zmenšovat, když přidáváte nebo odebíráte prvky.

Obsah

• Co je Array v JavaScriptu?
• Základní terminologie JavaScript Array
• Deklarace pole
• Základní operace na polích JavaScript
• Rozdíl mezi JavaScriptovými poli a objekty
• Kdy použít pole a objekty JavaScriptu?
• Rozpoznání pole JavaScriptu
• Kompletní reference pole JavaScript
• Příklady pole JavaScript
• CheatSheet JavaScriptu

Základní terminologie JavaScript Array

• Pole: Datová struktura v JavaScriptu, která umožňuje uložit více hodnot do jedné proměnné.
• Prvek pole: Každá hodnota v poli se nazývá prvek. Prvky jsou přístupné pomocí jejich indexu.
• Index pole: Číselná reprezentace, která označuje pozici prvku v poli. Pole JavaScriptu mají nulový index, což znamená, že první prvek je na indexu 0.
• Délka pole: Počet prvků v poli. Lze jej získat pomocí vlastnosti length.

Deklarace pole

V zásadě existují dva způsoby, jak deklarovat pole, tj. Array Literal a Array Constructor.

1. Vytvoření pole pomocí Array Literal

Vytvoření pole pomocí literálu pole zahrnuje použití hranatých závorek [] k definování a inicializaci pole. Tato metoda je stručná a široce preferovaná pro svou jednoduchost.

Syntax:

let arrayName = [value1, value2, ...];>

Příklad:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Vytvoření pole pomocí Array Constructor (nové klíčové slovo JavaScript)

Konstruktor pole odkazuje na metodu vytváření polí vyvoláním funkce konstruktoru pole. Tento přístup umožňuje dynamickou inicializaci a lze jej použít k vytvoření polí se zadanou délkou nebo prvky.

Syntax:

let arrayName = new Array();>

Příklad:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Poznámka: Obě výše uvedené metody fungují úplně stejně. Pro efektivitu, čitelnost a rychlost použijte metodu pole literal.

Základní operace na polích JavaScript

1. Přístup k prvkům pole

K jakémukoli prvku v poli lze přistupovat pomocí čísla indexu. Index v polích začíná 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Přístup k prvnímu prvku pole

Indexování pole začíná od 0, takže k prvnímu prvku pole můžeme přistupovat pomocí čísla indexu.

jak najít blokovaná čísla na android

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Přístup k poslednímu prvku pole

K poslednímu prvku pole můžeme přistupovat pomocí indexového čísla [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Úprava prvků pole

Prvky v poli lze upravit přiřazením nové hodnoty jejich odpovídajícímu indexu.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Přidání prvků do pole

Prvky lze do pole přidat pomocí metod jako push() a unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Odebrání prvků z pole

Odstraňte prvky pomocí metod jako pop(), shift() nebo splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Výstup

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Délka pole

Získejte délku pole pomocí vlastnosti length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Zvyšte a snižte délku pole

Délku pole můžeme zvětšit a zmenšit pomocí vlastnosti JavaScript length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Iterace přes prvky pole

Můžeme iterovat pole a přistupovat k prvkům pole pomocí cyklu for a forEach.

Příklad: Je to příklad smyčky for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Příklad: Je to příklad Array.forEach() smyčka.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Zřetězení pole

Zkombinujte dvě nebo více polí pomocí metody concat(). Ir vrátí nové pole obsahující prvky spojených polí.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Konverze pole na řetězec

Máme vestavěnou metodu toString() to převede pole na řetězec.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Zkontrolujte typ pole

JavaScript Typ Operátor se používá pro kontrolu typu pole. Vrací objekt pro pole.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Rozdíl mezi JavaScriptovými poli a objekty

• Pole JavaScriptu používají indexy jako čísla.
• objekty používají indexy jako názvy..

Kdy použít pole a objekty JavaScriptu?

• Pole se používají, když chceme, aby názvy prvků byly číselné.
• Objekty se používají, když chceme, aby názvy prvků byly řetězce.

Rozpoznání pole JavaScriptu

Existují dva způsoby, jak rozpoznat pole JavaScriptu:

• Používáním Array.isArray() metoda
• Používáním instanceof metoda

Níže je uveden příklad ukazující oba přístupy:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Poznámka: Při psaní polí se vyskytuje běžná chyba:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Výše uvedená dvě tvrzení nejsou stejná.

Výstup: Tento příkaz vytvoří pole s prvkem [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

Kompletní reference pole JavaScript

Máme kompletní seznam Javascript Array, pro kontrolu si je prosím projděte toto Reference pole JavaScript článek. Obsahuje podrobný popis a příklady všech vlastností pole a metod.

pokud rudyardem kipling řádek po řádku vysvětlení

Příklady pole JavaScript

Příklady JavaScript Array obsahují seznam otázek, které jsou většinou kladeny v rozhovorech. Zkontrolujte prosím tento článek Příklady pole JavaScript pro více podrobností.

CheatSheet pro JavaScript

Máme Cheat Sheet na Javascript, kde jsme pokryli všechna důležitá témata Javascriptu, abychom si je prošli Javascript Cheat Sheet-Základní průvodce JavaScriptem .