En matrise i JavaScript er en datastruktur som brukes til å lagre flere verdier i en enkelt variabel. Den kan inneholde ulike datatyper og gir mulighet for dynamisk endring av størrelse. Elementer er tilgjengelige av deres indeks, fra 0.

JavaScript-array

Du har to måter å lage JavaScript-matriser på: ved å bruke Array-konstruktøren eller stenografi array literal syntaks , som bare er firkantede parenteser. Arrays er fleksible i størrelse, slik at de kan vokse eller krympe når du legger til eller fjerner elementer.

Innholdsfortegnelse

• Hva er Array i JavaScript?
• Grunnleggende terminologier for JavaScript-array
• Erklæring av en matrise
• Grunnleggende operasjoner på JavaScript-matriser
• Forskjellen mellom JavaScript-matriser og objekter
• Når skal jeg bruke JavaScript-matriser og -objekter?
• Gjenkjenne en JavaScript-array
• JavaScript Array Complete Reference
• JavaScript-array-eksempler
• JavaScript CheatSheet

Grunnleggende terminologier for JavaScript-array

• Matrise: En datastruktur i JavaScript som lar deg lagre flere verdier i en enkelt variabel.
• Matriseelement: Hver verdi i en matrise kalles et element. Elementer er tilgjengelige av deres indeks.
• Matriseindeks: En numerisk representasjon som indikerer posisjonen til et element i matrisen. JavaScript-matriser er nullindeksert, noe som betyr at det første elementet er på indeks 0.
• Matriselengde: Antall elementer i en matrise. Den kan hentes ved hjelp av egenskapen length.

Erklæring av en matrise

Det er i utgangspunktet to måter å erklære en matrise på, dvs. Array Literal og Array Constructor.

1. Opprette en matrise ved hjelp av Array Literal

Å lage en matrise ved å bruke matriseliteral innebærer å bruke firkantede parenteser [] for å definere og initialisere matrisen. Denne metoden er kortfattet og mye foretrukket på grunn av sin enkelhet.

Syntaks:

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

Eksempel:

// 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. Opprette en matrise ved hjelp av Array Constructor (JavaScript nytt nøkkelord)

Array Constructor refererer til en metode for å lage arrays ved å påkalle Array constructor-funksjonen. Denne tilnærmingen tillater dynamisk initialisering og kan brukes til å lage arrays med en spesifisert lengde eller elementer.

Syntaks:

let arrayName = new Array(); 

Eksempel:

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

Merk: Begge metodene ovenfor gjør nøyaktig det samme. Bruk array literal-metoden for effektivitet, lesbarhet og hastighet.

Grunnleggende operasjoner på JavaScript-matriser

1. Tilgang til elementer i en matrise

Ethvert element i matrisen kan nås ved å bruke indeksnummeret. Indeksen i matrisene starter med 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. Få tilgang til det første elementet i en matrise

Array-indekseringen starter fra 0, så vi kan få tilgang til det første elementet i matrisen ved å bruke indeksnummeret.

// 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. Få tilgang til det siste elementet i en matrise

Vi kan få tilgang til det siste array-elementet ved å bruke [array.length – 1] indeksnummer.

// 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. Endre matriseelementene

Elementer i en matrise kan endres ved å tilordne en ny verdi til deres tilsvarende indeks.

// 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. Legge til elementer i matrisen

Elementer kan legges til matrisen ved hjelp av metoder som push() og 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. Fjerne elementer fra en matrise

Fjern elementer ved hjelp av metoder som pop(), shift() eller 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); 

Produksjon

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. Matriselengde

Få lengden på en matrise ved å bruke egenskapen 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. Øk og reduser arraylengden

Vi kan øke og redusere arraylengden ved å bruke JavaScript length-egenskapen.

// 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. Iterering gjennom matriseelementer

Vi kan iterere array og få tilgang til array-elementer ved å bruke for og forEach loop.

Eksempel: Det er et eksempel på for loop.

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

Eksempel: Det er eksemplet på Array.forEach() Løkke.

// 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. Array-sammenkobling

Kombiner to eller flere arrays ved å bruke concat()-metoden. Ir returnerer ny matrise som inneholder sammenføyde matriseelementer.

// 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. Konvertering av en matrise til streng

Vi har en innebygd metode toString() for å konvertere en matrise til en streng.

// 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. Sjekk typen til en matrise

JavaScript type operator brukes til å sjekke typen av en matrise. Den returnerer objekt for matriser.

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

object 

Forskjellen mellom JavaScript-matriser og objekter

• JavaScript-matriser bruker indekser som tall.
• objekter bruker indekser som navn..

Når skal jeg bruke JavaScript-matriser og -objekter?

• Matriser brukes når vi vil at elementnavn skal være numeriske.
• Objekter brukes når vi vil at elementnavn skal være strenger.

Gjenkjenne en JavaScript-array

Det er to metoder som vi kan gjenkjenne en JavaScript-matrise på:

• Ved bruk av Array.isArray() metode
• Ved bruk av tilfelle av metode

Nedenfor er et eksempel som viser begge tilnærmingene:

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 

Merk: En vanlig feil oppstår når du skriver matrisene:

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

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

De to påstandene ovenfor er ikke de samme.

Produksjon: Denne setningen lager en matrise med et element [5] .

[5] 

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

[ ] 

JavaScript Array Complete Reference

Vi har en komplett liste over Javascript Array, for å sjekke dem, gå gjennom dette JavaScript Array Reference artikkel. Den inneholder en detaljert beskrivelse og eksempler på alle Array-egenskaper og -metoder.

JavaScript-array-eksempler

Eksempler på JavaScript-array inneholder en liste over spørsmål som ofte stilles i intervjuer. Vennligst sjekk denne artikkelen JavaScript-array-eksempler for flere detaljer.

JavaScript CheatSheet

Vi har et jukseark på Javascript der vi har dekket alle viktige emner i Javascript for å sjekke dem, vennligst gå gjennom Javascript Cheat Sheet-En grunnleggende guide til JavaScript .