JavaScript-arrays

Indholdsfortegnelse

    Vis indholdsfortegnelse

Et array er en speciel variabel, som kan indeholde mere end én værdi:

const cars = ["Saab", "Volvo", "BMW"];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Hvorfor bruge arrays?

Hvis du har en liste over elementer (for eksempel en liste over bilnavne), skal du gemme biler i enkelte variable kunne se sådan ud:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Men hvad nu hvis du vil gå igennem bilerne og finde en bestemt? Og hvad hvis du ikke havde 3 biler, men 300?

Løsningen er en række!

Et array kan indeholde mange værdier under et enkelt navn, og det kan du få adgang til værdierne ved at henvise til et indeksnummer.

Oprettelse af et array

Brug af et array literal er den nemmeste måde at oprette et JavaScript-array på.

Syntaks:

const array_name = [item1, item2, ...];      

Det er almindelig praksis at erklære arrays med søgeordet const.

Lær mere om const med arrays i kapitlet: JS Array Const.

Eksempel

const cars = ["Saab", "Volvo", "BMW"];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Mellemrum og linjeskift er ikke vigtige. En erklæring kan strække sig over flere linjer:

Eksempel

const cars = [
  "Saab",
    "Volvo",
    "BMW"
];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Du kan også oprette et array og derefter levere elementerne:

Eksempel

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Brug af JavaScript-nøgleordet nyt

Følgende eksempel opretter også et array og tildeler værdier til det:

Eksempel

const cars = new Array("Saab", "Volvo", "BMW");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

De to eksempler ovenfor gør præcis det samme.

Der er ingen grund til at bruge new Array().

For enkelhed, læsbarhed og udførelseshastighed skal du bruge array literal-metoden.

Adgang til Array Elements

Du får adgang til et array-element ved at henvise til indeksnummeret:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Bemærk: Array-indekser starter med 0.

[0] er det første element. [1] er det andet element.

Ændring af et array-element

Denne sætning ændrer værdien af det første element i biler:

cars[0] = "Opel";

Eksempel

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Konvertering af et array til en streng

JavaScript-metoden toString() konverterer en matrix til en streng af (kommaseparerede) matrixværdier.

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultat :

Banana,Orange,Apple,Mango

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>

</body>
</html>

Få adgang til det fulde array

Med JavaScript kan hele arrayet tilgås ved at henvise til arrayet navn:

Eksempel

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Arrays er objekter

Arrays er en speciel type objekter. Operatoren typeof i JavaScript returnerer "objekt" for arrays.

Men JavaScript-arrays beskrives bedst som arrays.

Arrays bruger tal til at få adgang til dets "elementer". Heri eksempel, person[0] svarer John:

Array:

const person = ["John", "Doe", 46];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Objekter bruger navne til at få adgang til dets "medlemmer". I dette eksempel, person.firstName svarer John:

Objekt:

const person = {firstName:"John", lastName:"Doe", age:46};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>

<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>

</body>
</html>

Array-elementer kan være objekter

JavaScript-variabler kan være objekter. Arrays er specielle slags objekter.

På grund af dette kan du have variabler af forskellige typer i samme Array.

Du kan have objekter i et array. Du kan have funktioner i et array. Du kan har arrays i et array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array-egenskaber og metoder

Den virkelige styrke ved JavaScript-arrays er de indbyggede array-egenskaber og metoder:

cars.length   // Returns the number of elements
cars.sort()   // Sorts the array

Array-metoder er dækket i de næste kapitler.

Længden Ejendom

Egenskaben length for et array returnerer længden af et array (antallet af array elementer).

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Egenskaben length er altid én mere end det højeste matrixindeks.

Adgang til First Array Element

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>

</body>
</html>

Adgang til Last Array Element

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>

</body>
</html>

Looping Array Elements

En måde at sløjfe gennem et array på er at bruge en for sløjfe:

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text 
  += "</ul>";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Du kan også bruge funktionen Array.forEach():

Eksempel

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
  
function 
  myFunction(value) {
  
 text += "<li>" + value + "</li>";
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function for each array element:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Tilføjelse af array-elementer

Den nemmeste måde at tilføje et nyt element til et array er at bruge push() metoden:

Eksempel

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Adds a new element (Lemon) to fruits

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Nyt element kan også tilføjes til et array ved hjælp af egenskaben length:

Eksempel

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Adds "Lemon" to fruits

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

ADVARSEL!
<p>Tilføjelse af elementer med høje indekser kan skabe udefinerede "huller" i en matrix:

Eksempel

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Creates undefined "holes" in fruits

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";

let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Associative Arrays

Mange programmeringssprog understøtter arrays med navngivne indekser.

Arrays med navngivne indekser kaldes associative arrays (eller hashes).

JavaScript understøtter ikke arrays med navngivne indekser.

I JavaScript bruger arrays altid nummererede indekser.

Eksempel

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Will return 3
person[0];        // Will return "John"

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

ADVARSEL !!
Hvis du bruger navngivne indekser, omdefinerer JavaScript arrayet til et objekt.

Derefter vil nogle array-metoder og egenskaber producere forkerte resultater.

Eksempel:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Will return 0
person[0];         // Will return undefined

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Forskellen mellem arrays og objekter

I JavaScript bruger arrays nummererede indekser.

I JavaScript bruger objekter navngivne indekser.

Arrays er en speciel slags objekter med nummererede indekser.

Hvornår skal man bruge arrays. Hvornår skal man bruge objekter.

  • JavaScript understøtter ikke associative arrays.

  • Du bør bruge objekter, når du vil have elementnavnene strenge (tekst).

  • Du bør bruge arrays, når du vil have elementnavnene numre.

JavaScript new Array()

JavaScript har en indbygget array-konstruktør new Array().

Men du kan roligt bruge [] i stedet for.

Disse to forskellige udsagn skaber begge et nyt tomt array med navnet punkter:

const points = new Array();
const points = [];

Disse to forskellige udsagn skaber begge et nyt array, der indeholder 6 numre:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>

<p>Avoid using new Array(). Use [] instead.</p>

<p id="demo"></p>

<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

nye søgeordet kan give nogle uventede resultater:

// Create an array with three elements:
const points = new Array(40, 100, 1);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with three elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with two elements:
const points = new Array(40, 100);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Create an Array with two elements.</p>

<p id="demo"></p>

<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with one element ???
const points = new Array(40);  

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

En almindelig fejl

const points = [40];

er ikke det samme som:

const points = new Array(40);
// Create an array with one element:
const points = [40];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Create an Array with one element.</p>

<p id="demo"></p>

<script>
var points = [40];
document.getElementById("demo").innerHTML = points;  
</script>

</body>
</html>

// Create an array with 40 undefined elements:
const points = new Array(40);  

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Sådan genkender du et array

Et almindeligt spørgsmål er: Hvordan ved jeg, om en variabel er en matrix?

Problemet er, at JavaScript-operatoren typeof returnerer "objekt":

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The typeof Operator</h2>

<p>The typeof operator, when used on an array, returns object:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

Operatortypen returnerer objekt, fordi et JavaScript-array er en objekt.

Løsning 1:

For at løse dette problem definerede ECMAScript 5 (JavaScript 2009) en ny metode Array.isArray():

Array.isArray(fruits);

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Løsning 2:

Operatoren instanceof returnerer sand, hvis et objekt oprettes af en given konstruktør:

const fruits = ["Banana", "Orange", "Apple"];
    
fruits instanceof Array;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

Komplet Array Reference

For en komplet Array-reference, gå til vores:

Komplet JavaScript Array Reference.

Referencen indeholder beskrivelser og eksempler på alle Array egenskaber og metoder.