Pole v JavaScripte je dátová štruktúra používaná na ukladanie viacerých hodnôt do jednej premennej. Môže obsahovať rôzne typy údajov a umožňuje dynamickú zmenu veľkosti. K prvkom sa pristupuje podľa ich indexu, ktorý začína od 0.

Pole JavaScript

Máte dva spôsoby, ako vytvoriť polia JavaScript: pomocou konštruktora Array alebo stenografická doslovná syntax poľa , čo sú len hranaté zátvorky. Polia majú flexibilnú veľkosť, takže sa môžu pri pridávaní alebo odstraňovaní prvkov zväčšovať alebo zmenšovať.

Obsah

• Čo je Array v JavaScripte?
• Základná terminológia poľa JavaScript
• Vyhlásenie poľa
• Základné operácie na poliach JavaScript
• Rozdiel medzi poľami JavaScriptu a objektmi
• Kedy použiť polia a objekty JavaScriptu?
• Rozpoznanie poľa JavaScript
• Úplná referencia poľa JavaScript
• Príklady poľa JavaScript
• CheatSheet JavaScript

Základná terminológia poľa JavaScript

• Pole: Dátová štruktúra v JavaScripte, ktorá vám umožňuje uložiť viacero hodnôt do jednej premennej.
• Prvok poľa: Každá hodnota v poli sa nazýva prvok. Prvky sú prístupné pomocou ich indexu.
• Index poľa: Číselná reprezentácia, ktorá označuje pozíciu prvku v poli. Polia JavaScriptu majú nulový index, čo znamená, že prvý prvok má index 0.
• Dĺžka poľa: Počet prvkov v poli. Dá sa získať pomocou vlastnosti length.

Vyhlásenie poľa

V zásade existujú dva spôsoby, ako deklarovať pole, tj Array Literal a Array Constructor.

1. Vytvorenie poľa pomocou Array Literal

Vytvorenie poľa pomocou literálu poľa zahŕňa použitie hranatých zátvoriek [] na definovanie a inicializáciu poľa. Táto metóda je stručná a široko preferovaná pre svoju jednoduchosť.

Syntax:

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

Prí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. Vytvorenie poľa pomocou nástroja Array Constructor (nové kľúčové slovo JavaScript)

Konštruktor poľa odkazuje na metódu vytvárania polí vyvolaním funkcie konštruktora poľa. Tento prístup umožňuje dynamickú inicializáciu a možno ho použiť na vytváranie polí so špecifikovanou dĺžkou alebo prvkami.

Syntax:

let arrayName = new Array(); 

Prí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: Obe vyššie uvedené metódy robia presne to isté. Pre efektívnosť, čitateľnosť a rýchlosť použite metódu doslovného poľa.

Základné operácie na poliach JavaScript

1. Prístup k prvkom poľa

K akémukoľvek prvku v poli je možné pristupovať pomocou indexového čísla. Index v poliach začína 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. Prístup k prvému prvku poľa

Indexovanie poľa začína od 0, takže k prvému prvku poľa môžeme pristupovať pomocou čísla indexu.

// 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. Prístup k poslednému prvku poľa

K poslednému prvku poľa môžeme pristupovať pomocou 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 prvkov poľa

Prvky v poli je možné upraviť priradením novej hodnoty ich zodpovedajúcemu 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. Pridanie prvkov do poľa

Prvky možno do poľa pridať pomocou metód ako 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. Odstránenie prvkov z poľa

Odstráňte prvky pomocou metód ako pop(), shift() alebo 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ýkon

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ĺžka poľa

Získajte dĺžku poľa pomocou 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. Zvýšte a znížte dĺžku poľa

Dĺžku poľa môžeme zväčšiť a zmenšiť pomocou vlastnosti dĺžky JavaScriptu.

// 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. Iterácia cez prvky poľa

Môžeme iterovať pole a pristupovať k prvkom poľa pomocou cyklu for a forEach.

Príklad: Je to príklad cyklu 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 

Príklad: Je to príklad Array.forEach() sluč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. Zreťazenie poľa

Skombinujte dve alebo viac polí pomocou metódy concat(). Ir vráti nové pole obsahujúce 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. Konverzia poľa na reťazec

Máme zabudovanú metódu natiahnuť() to skonvertuje pole na reťazec.

// 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. Skontrolujte typ polí

JavaScript Typ Operátor sa používa na kontrolu typu poľa. Vracia objekt pre polia.

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

object 

Rozdiel medzi poľami JavaScriptu a objektmi

• Polia JavaScript používajú indexy ako čísla.
• objekty používajú indexy ako názvy..

Kedy použiť polia a objekty JavaScriptu?

• Polia sa používajú, keď chceme, aby názvy prvkov boli číselné.
• Objekty sa používajú, keď chceme, aby názvy prvkov boli reťazce.

Rozpoznanie poľa JavaScript

Existujú dva spôsoby, pomocou ktorých môžeme rozpoznať pole JavaScript:

• Používaním Array.isArray() metóda
• Používaním instanceof metóda

Nižšie je uvedený príklad zobrazujúci oba prí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: Pri písaní polí sa vyskytuje bežná chyba:

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

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

Vyššie uvedené dve vyhlásenia nie sú rovnaké.

Výkon: Tento príkaz vytvorí pole s prvkom [5] .

[5] 

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

[ ] 

Úplná referencia poľa JavaScript

Máme kompletný zoznam Javascript Array, aby ste ich skontrolovali, prejdite si toto Odkaz na pole JavaScript článok. Obsahuje podrobný popis a príklady všetkých vlastností a metód poľa.

Príklady poľa JavaScript

Príklady poľa JavaScript obsahujú zoznam otázok, ktoré sa väčšinou kladú pri rozhovoroch. Skontrolujte tento článok Príklady poľa JavaScript pre viac podrobností.

CheatSheet JavaScript

Máme Cheat Sheet na Javascript, kde sme pokryli všetky dôležité témy Javascriptu, aby sme si ich mohli skontrolovať Javascript Cheat Sheet-Základný sprievodca JavaScriptom .