En array i JavaScript är en datastruktur som används för att lagra flera värden i en enda variabel. Den kan innehålla olika datatyper och möjliggör dynamisk storleksändring. Elementen nås av deras index, från 0.

JavaScript Array

Du har två sätt att skapa JavaScript-matriser: med hjälp av Array-konstruktorn eller den stenografi array literal syntax , vilket bara är hakparenteser. Matriser är flexibla i storlek, så de kan växa eller krympa när du lägger till eller tar bort element.

Innehållsförteckning

• Vad är Array i JavaScript?
• Grundläggande terminologier för JavaScript Array
• Deklaration av en array
• Grundläggande operationer på JavaScript-matriser
• Skillnaden mellan JavaScript-matriser och objekt
• När ska man använda JavaScript-matriser och -objekt?
• Känner igen en JavaScript-array
• JavaScript Array Komplett referens
• JavaScript-arrayexempel
• JavaScript CheatSheet

Grundläggande terminologier för JavaScript Array

• Array: En datastruktur i JavaScript som låter dig lagra flera värden i en enda variabel.
• Matriselement: Varje värde inom en array kallas ett element. Elementen nås av deras index.
• Array Index: En numerisk representation som indikerar positionen för ett element i matrisen. JavaScript-matriser är nollindexerade, vilket betyder att det första elementet är på index 0.
• Arraylängd: Antalet element i en array. Det kan hämtas med egenskapen length.

Deklaration av en array

Det finns i princip två sätt att deklarera en array, dvs Array Literal och Array Constructor.

1. Skapa en array med Array Literal

Att skapa en array med hjälp av array literal innebär att använda hakparenteser [] för att definiera och initiera arrayen. Denna metod är kortfattad och allmänt föredragen för sin enkelhet.

Syntax:

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

Exempel:

// 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. Skapa en array med Array Constructor (JavaScript nytt nyckelord)

Array-konstruktorn hänvisar till en metod för att skapa arrayer genom att anropa Array-konstruktorfunktionen. Detta tillvägagångssätt möjliggör dynamisk initiering och kan användas för att skapa arrayer med en specificerad längd eller element.

Syntax:

let arrayName = new Array();>

Exempel:

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

Notera: Båda ovanstående metoder gör exakt samma sak. Använd array literal-metoden för effektivitet, läsbarhet och hastighet.

Grundläggande operationer på JavaScript-matriser

1. Åtkomst till element i en array

Alla element i arrayen kan nås med hjälp av indexnumret. Indexet i arrayerna börjar 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. Åtkomst till det första elementet i en array

Arrayindexeringen börjar från 0, så vi kan komma åt första elementet i arrayen med hjälp av indexnumret.

// 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. Åtkomst till det sista elementet i en array

Vi kan komma åt det sista arrayelementet med [array.length – 1] indexnummer.

java vs c++

// 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. Ändra arrayelementen

Element i en array kan modifieras genom att tilldela ett nytt värde till deras motsvarande index.

// 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. Lägga till element i arrayen

Element kan läggas till i arrayen med metoder som push() och 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. Ta bort element från en array

Ta bort element med 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. Arraylängd

Få längden på en array med 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. Öka och minska arraylängden

Vi kan öka och minska arraylängden med 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. Iteration genom matriselement

Vi kan iterera array och komma åt arrayelement med hjälp av for och forEach loop.

Exempel: Det är ett exempel på för 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>

Exempel: Det är exemplet på Array.forEach() slinga.

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

Kombinera två eller flera arrayer med metoden concat() . Ir returnerar ny array som innehåller sammanfogade arrayelement.

// 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 array till sträng

Vi har en inbyggd metod att stränga() to konverterar en array till en sträng.

// 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. Kontrollera typen av en array

JavaScriptet sorts operatorn används för att kontrollera typen av en array. Den returnerar objekt för arrayer.

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

object>

Skillnaden mellan JavaScript-matriser och objekt

• JavaScript-matriser använder index som siffror.
• objekt använder index som namn..

När ska man använda JavaScript-matriser och -objekt?

• Matriser används när vi vill att elementnamn ska vara numeriska.
• Objekt används när vi vill att elementnamn ska vara strängar.

Känner igen en JavaScript-array

Det finns två metoder för att känna igen en JavaScript-array:

romersk siffra 1 till 100

• Genom att använda Array.isArray() metod
• Genom att använda instans av metod

Nedan är ett exempel som visar båda tillvägagångssätten:

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>

Notera: Ett vanligt fel uppstår när du skriver arrayerna:

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

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

Ovanstående två uttalanden är inte samma sak.

Produktion: Denna sats skapar en array med ett element [5] .

[5]>

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

[ ]>

JavaScript Array Komplett referens

Vi har en komplett lista med Javascript Array, gå igenom detta för att kontrollera dem JavaScript Array Referens artikel. Den innehåller en detaljerad beskrivning och exempel på alla arrayegenskaper och metoder.

JavaScript-arrayexempel

JavaScript Array-exempel innehåller en lista med frågor som ofta ställs i intervjuer. Vänligen kontrollera den här artikeln JavaScript-arrayexempel för mer information.

JavaScript CheatSheet

Vi har ett fuskblad på Javascript där vi har täckt alla viktiga ämnen i Javascript för att kontrollera dem, gå igenom Javascript Cheat Sheet-En grundläggande guide till JavaScript .