Niz v JavaScriptu je podatkovna struktura, ki se uporablja za shranjevanje več vrednosti v eno spremenljivko. Vsebuje lahko različne vrste podatkov in omogoča dinamično spreminjanje velikosti. Do elementov se dostopa z njihovim indeksom, ki se začne od 0.

Niz JavaScript

Obstajata dva načina za ustvarjanje nizov JavaScript: z uporabo konstruktorja Array ali skrajšana sintaksa matričnega dobeseda , ki je samo oglati oklepaj. Nizi so prilagodljivi po velikosti, tako da se lahko povečajo ali zmanjšajo, ko dodate ali odstranite elemente.

Kazalo

• Kaj je Array v JavaScriptu?
• Osnovna terminologija matrike JavaScript
• Deklaracija matrike
• Osnovne operacije nad nizi JavaScript
• Razlika med nizi JavaScript in objekti
• Kdaj uporabiti nize in predmete JavaScript?
• Prepoznavanje polja JavaScript
• JavaScript Array Complete Reference
• Primeri nizov JavaScript
• JavaScript CheatSheet

Osnovna terminologija matrike JavaScript

• niz: Podatkovna struktura v JavaScriptu, ki vam omogoča shranjevanje več vrednosti v eno spremenljivko.
• Element matrike: Vsaka vrednost v matriki se imenuje element. Do elementov se dostopa z njihovim indeksom.
• Indeks polja: Številska predstavitev, ki označuje položaj elementa v matriki. Matrike JavaScript so indeksirane z nič, kar pomeni, da je prvi element pri indeksu 0.
• Dolžina polja: Število elementov v matriki. Pridobite ga lahko z lastnostjo dolžine.

Deklaracija matrike

V bistvu obstajata dva načina za deklaracijo matrike, to sta Array Literal in Array Constructor.

1. Ustvarjanje matrike z uporabo matričnega dobeseda

Ustvarjanje matrike z uporabo literala matrike vključuje uporabo oglatih oklepajev [] za definiranje in inicializacijo matrike. Ta metoda je jedrnata in široko priljubljena zaradi svoje preprostosti.

Sintaksa:

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

primer:

// 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. Ustvarjanje matrike z uporabo konstruktorja matrike (nova ključna beseda JavaScript)

Konstruktor matrike se nanaša na metodo ustvarjanja matrik s priklicem funkcije konstruktorja matrike. Ta pristop omogoča dinamično inicializacijo in se lahko uporablja za ustvarjanje nizov z določeno dolžino ali elementi.

Sintaksa:

let arrayName = new Array(); 

primer:

// 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 ] 

Opomba: Obe zgornji metodi delujeta popolnoma enako. Za učinkovitost, berljivost in hitrost uporabite metodo matričnih literalov.

Osnovne operacije nad nizi JavaScript

1. Dostop do elementov matrike

Do katerega koli elementa v matriki je mogoče dostopati z uporabo indeksne številke. Indeks v nizih se začne z 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. Dostop do prvega elementa matrike

Indeksiranje matrike se začne od 0, tako da lahko do prvega elementa matrike dostopamo s številko indeksa.

// 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. Dostop do zadnjega elementa matrike

Do zadnjega elementa matrike lahko dostopamo z indeksno številko [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. Spreminjanje elementov polja

Elemente v matriki je mogoče spremeniti tako, da njihovemu ustreznemu indeksu dodelite novo vrednost.

// 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. Dodajanje elementov v polje

Elemente je mogoče dodati v matriko z metodami, kot sta push() in 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. Odstranjevanje elementov iz matrike

Odstranite elemente z metodami, kot so pop(), shift() ali 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); 

Izhod

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. Dolžina niza

Pridobite dolžino matrike z lastnostjo 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. Povečajte in zmanjšajte dolžino polja

Dolžino matrike lahko povečamo in zmanjšamo z lastnostjo dolžine JavaScript.

// 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. Ponavljanje skozi elemente polja

Matriko lahko ponavljamo in dostopamo do elementov matrike z uporabo zanke for in forEach.

primer: Je primer zanke 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 

primer: To je primer Array.forEach() zanka.

// 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. Združevanje nizov

Združite dva ali več nizov z metodo concat(). Ir vrne novo matriko, ki vsebuje elemente združenih matrik.

// 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. Pretvorba matrike v niz

Imamo vgrajeno metodo toString() pretvori matriko v niz.

// 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. Preverite vrsto matrike

JavaScript tip operator se uporablja za preverjanje vrste polja. Vrne objekt za nize.

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

object 

Razlika med nizi JavaScript in objekti

• Matrike JavaScript uporabljajo indekse kot številke.
• predmeti uporabljajo indekse kot imena..

Kdaj uporabiti nize in predmete JavaScript?

• Matrike uporabljamo, kadar želimo, da so imena elementov številska.
• Objekti se uporabljajo, ko želimo, da so imena elementov nizi.

Prepoznavanje polja JavaScript

Obstajata dva načina, s katerima lahko prepoznamo niz JavaScript:

• Z uporabo Array.isArray() metoda
• Z uporabo instanceof metoda

Spodaj je primer, ki prikazuje oba pristopa:

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 

Opomba: Med pisanjem nizov se pojavi pogosta napaka:

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

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

Zgornji trditvi nista enaki.

Izhod: Ta stavek ustvari matriko z elementom [5].

[5] 

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

[ ] 

JavaScript Array Complete Reference

Imamo celoten seznam Javascript Array, če ga želite preveriti, pojdite skozi to Referenca JavaScript polja Članek. Vsebuje podroben opis in primere vseh lastnosti in metod polja.

Primeri nizov JavaScript

Primeri JavaScript Array vsebujejo seznam vprašanj, ki se večinoma postavljajo na intervjujih. Preverite ta članek Primeri nizov JavaScript za več podrobnosti.

JavaScript CheatSheet

Imamo Cheat Sheet o Javascriptu, kjer smo zajeli vse pomembne teme Javascripta, da jih preverite. Javascript Cheat Sheet - Osnovni vodnik po JavaScriptu .