Et array i JavaScript er en datastruktur, der bruges til at gemme flere værdier i en enkelt variabel. Det kan indeholde forskellige datatyper og giver mulighed for dynamisk størrelsesændring. Elementer tilgås af deres indeks, startende fra 0.

JavaScript Array

Du har to måder at oprette JavaScript-arrays på: ved hjælp af Array-konstruktøren eller den stenografi array literal syntaks , som kun er firkantede parenteser. Arrays er fleksible i størrelse, så de kan vokse eller krympe, når du tilføjer eller fjerner elementer.

Indholdsfortegnelse

• Hvad er Array i JavaScript?
• Grundlæggende terminologier for JavaScript-array
• Erklæring af et array
• Grundlæggende handlinger på JavaScript-arrays
• Forskellen mellem JavaScript-arrays og objekter
• Hvornår skal man bruge JavaScript-arrays og -objekter?
• Genkender et JavaScript-array
• JavaScript Array Complete Reference
• Eksempler på JavaScript-array
• JavaScript CheatSheet

Grundlæggende terminologier for JavaScript-array

• Array: En datastruktur i JavaScript, der giver dig mulighed for at gemme flere værdier i en enkelt variabel.
• Array-element: Hver værdi i et array kaldes et element. Elementer tilgås af deres indeks.
• Array-indeks: En numerisk repræsentation, der angiver positionen af ​​et element i arrayet. JavaScript-arrays er nulindekseret, hvilket betyder, at det første element er ved indeks 0.
• Array længde: Antallet af elementer i en matrix. Det kan hentes ved hjælp af egenskaben length.

Erklæring af et array

Der er grundlæggende to måder at erklære et array på, nemlig Array Literal og Array Constructor.

1. Oprettelse af et array ved hjælp af Array Literal

Oprettelse af et array ved hjælp af array literal involverer brug af firkantede parenteser [] til at definere og initialisere arrayet. Denne metode er kortfattet og bredt foretrukket på grund af sin enkelhed.

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. Oprettelse af et array ved hjælp af Array Constructor (JavaScript nyt nøgleord)

Array-konstruktøren henviser til en metode til at skabe arrays ved at påkalde Array-konstruktørfunktionen. Denne tilgang giver mulighed for dynamisk initialisering og kan bruges til at skabe arrays med en specificeret længde 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 ] 

Bemærk: Begge ovenstående metoder gør nøjagtig det samme. Brug array literal-metoden til effektivitet, læsbarhed og hastighed.

Grundlæggende handlinger på JavaScript-arrays

1. Adgang til elementer i et array

Ethvert element i arrayet kan tilgås ved hjælp af indeksnummeret. Indekset i arrays 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. Adgang til det første element i et array

Array-indekseringen starter fra 0, så vi kan få adgang til det første element i arrayet ved hjælp af 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. Adgang til det sidste element i et array

Vi kan få adgang til det sidste array-element ved hjælp af [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. Ændring af Array-elementerne

Elementer i et array kan ændres ved at tildele en ny værdi 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. Tilføjelse af elementer til arrayet

Elementer kan tilføjes til arrayet ved hjælp af 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. Fjernelse af elementer fra et array

Fjern elementer ved hjælp af 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); 

Produktion

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. Array længde

Få længden af ​​et array ved hjælp af egenskaben 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. Forøg og formindsk Array-længden

Vi kan øge og mindske array-længden ved hjælp af JavaScript-længde-egenskaben.

// 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. Iteration gennem array-elementer

Vi kan iterere array og få adgang til array-elementer ved at bruge 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() sløjfe.

// 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-sammenkædning

Kombiner to eller flere arrays ved hjælp af concat()-metoden. Ir returnerer et nyt array, der indeholder sammenføjede arrays-elementer.

// 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 af et array til streng

Vi har en indbygget metode toString() at konvertere en matrix 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. Kontroller typen af ​​et array

JavaScript type operator bruges til at kontrollere typen af ​​et array. Det returnerer objekt for arrays.

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

object 

Forskellen mellem JavaScript-arrays og objekter

• JavaScript-arrays bruger indekser som tal.
• objekter bruger indekser som navne..

Hvornår skal man bruge JavaScript-arrays og -objekter?

• Arrays bruges, når vi ønsker at elementnavne skal være numeriske.
• Objekter bruges, når vi ønsker at elementnavne skal være strenge.

Genkender et JavaScript-array

Der er to metoder, hvorpå vi kan genkende et JavaScript-array:

• Ved hjælp af Array.isArray() metode
• Ved hjælp af forekomst af metode

Nedenfor er et eksempel, der viser begge tilgange:

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 

Bemærk: Der opstår en almindelig fejl under skrivning af arrays:

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

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

Ovenstående to udsagn er ikke det samme.

Produktion: Denne sætning opretter et array med et element [5] .

[5] 

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

[ ] 

JavaScript Array Complete Reference

Vi har en komplet liste over Javascript Array, for at kontrollere dem, gå venligst igennem dette JavaScript Array Reference artikel. Den indeholder en detaljeret beskrivelse og eksempler på alle Array-egenskaber og -metoder.

Eksempler på JavaScript-array

JavaScript-array-eksempler indeholder en liste over spørgsmål, der ofte stilles i interviews. Tjek venligst denne artikel Eksempler på JavaScript-array for flere detaljer.

JavaScript CheatSheet

Vi har et snydeark på Javascript, hvor vi har dækket alle de vigtige emner i Javascript for at tjekke dem, gå venligst igennem Javascript Cheat Sheet-En grundlæggende guide til JavaScript .