JavaScript Array Iteration


Indholdsfortegnelse

    Vis indholdsfortegnelse


Array iteration metoder fungerer på hvert array element.


JavaScript Array forEach()

Metoden forEach() kalder en funktion (en tilbagekaldsfunktion) én gang for hvert array-element.

Eksempel

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
   
txt += value + "<br>";
}

Prøv det selv →

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

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

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

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Eksemplet ovenfor bruger kun værdiparameteren. Eksemplet kan omskrives til:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
   
txt += value + "<br>"; 
}

Prøv det selv →

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

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

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

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

JavaScript Array map()

Metoden map() opretter en ny matrix ved at udføre en funktion på hvert matrixelement.

Metoden map() udfører ikke funktionen for array elementer uden værdier.

Metoden map() ændrer ikke det oprindelige array.

Dette eksempel multiplicerer hver matrixværdi med 2:

Eksempel

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
  
function myFunction(value, index, array) {
    return value * 2;
}

Prøv det selv →

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

<p>Create a new array by performing a function on each array element:</p>

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

<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

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

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Når en tilbagekaldsfunktion kun bruger værdiparameteren, indekset og arrayet parametre kan udelades:

Eksempel

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
  
function myFunction(value) {
    return value * 2;
}

Prøv det selv →

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

<p>Create a new array by performing a function on each array element:</p>

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

<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

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

function myFunction(value) {
  return value * 2;
}
</script>

</body>
</html>

JavaScript Array flatMap()

ES2019 tilføjede Array flatMap() metoden til JavaScript.

Metoden flatMap() kortlægger først alle elementer i et array og opretter derefter et nyt array ved at udjævne arrayet.

Eksempel

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Prøv det selv →

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

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

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Browser support

JavaScript Array flatMap() er understøttet i alle moderne browsere siden januar 2020:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018


JavaScript Array filter()

Metoden filter() opretter en ny matrix med matrixelementer, der består en test.

Dette eksempel opretter en ny matrix fra elementer med en værdi større end 18:

Eksempel

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
} 

Prøv det selv →

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

<p>Create a new array from all array elements that passes a test:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

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

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

I eksemplet ovenfor bruger tilbagekaldsfunktionen ikke indekset og arrayet parametre, så de kan udelades:

Eksempel

const numbers = [45, 4, 9, 16, 25];
const over18 = 
  numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
} 

Prøv det selv →

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

<p>Create a new array with all array elements that passes a test.</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

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

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

JavaScript Array reduce()

Metoden reduce() kører en funktion på hvert array-element for at producere (reducere det til) en enkelt værdi.

Metoden reduce() fungerer fra venstre mod højre i arrayet. Se også reduceRight().

Metoden reduce() reducerer ikke det oprindelige array.

Dette eksempel finder summen af alle tal i en matrix:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
  
function myFunction(total, value, index, array) {
  
  return total + value;
} 

Prøv det selv →

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

<p>Find the sum of all numbers in an array:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

Bemærk, at funktionen tager 4 argumenter:

  • Den samlede værdi (startværdien/tidligere returneret værdi)

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Eksemplet ovenfor bruger ikke indeks- og array-parametrene. Det kan være omskrevet til:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
  
function myFunction(total, value) {
  
  return total + value;
} 

Prøv det selv →

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

<p>Find the sum of all numbers in an array:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

Metoden reduce() kan acceptere en startværdi:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 
  100);
  
function myFunction(total, value) {
  return total + value;
} 

Prøv det selv →

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

<p>Find the sum of all numbers in an array:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

JavaScript Array reduceRight()

Metoden reduceRight() kører en funktion på hvert array-element for at producere (reducere det til) en enkelt værdi.

reduceRight() fungerer fra højre mod venstre i arrayet. Se også reduce().

Metoden reduceRight() reducerer ikke det oprindelige array.

Dette eksempel finder summen af alle tal i en matrix:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
  
function myFunction(total, value, index, array) {
  
  return total + value;
} 

Prøv det selv →

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

<p>Find the sum of all numbers in an array:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

Bemærk, at funktionen tager 4 argumenter:

  • Den samlede værdi (startværdien/tidligere returneret værdi)

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Eksemplet ovenfor bruger ikke indeks- og array-parametrene. Det kan være omskrevet til:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
  
function myFunction(total, value) {
  return total + value;
} 

Prøv det selv →

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

<p>Find the sum of all numbers in an array:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

JavaScript Array every()

Metoden every() kontrollerer, om alle matrixværdier består en test.

Dette eksempel kontrollerer, om alle matrixværdier er større end 18:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let allOver18 = 
  numbers.every(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

Prøv det selv →

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

<p>The every() method checks if all array values pass a test.</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Når en tilbagekaldsfunktion kun bruger den første parameter (værdi), den anden parametre kan udelades:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let allOver18 = 
  numbers.every(myFunction);
function myFunction(value) {
  return 
  value > 18;
} 

Prøv det selv →

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

<p>The every() method checks if all array values pass a test.</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

JavaScript Array some()

Metoden some() kontrollerer, om nogle array-værdier består en test.

Dette eksempel kontrollerer, om nogle matrixværdier er større end 18:

Eksempel

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

Prøv det selv →

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

<p>The some() method checks if some array values pass a test:</p>

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

<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet


JavaScript Array indexOf()

Metoden indexOf() søger i en matrix efter en elementværdi og returnerer dens position.

Bemærk: Det første element har position 0, det andet element har position 1, og så videre.

Eksempel

Søg i et array efter emnet "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

Prøv det selv →

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

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

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

Syntaks

array.indexOf(item, start)
item

Påkrævet. Varen der skal søges efter.

start

Valgfri. Hvor skal man starte søgningen. Negative værdier starter ved den givne position fra slutningen og søger til slutningen.

Array.indexOf() returnerer -1, hvis varen ikke findes.

Hvis varen er til stede mere end én gang, returnerer den positionen for den første Hændelse.


JavaScript Array lastIndexOf()

Array.lastIndexOf() er det samme som Array.indexOf(), men returnerer positionen for den sidste forekomst af det angivne element.

Eksempel

Søg i et array efter emnet "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

Prøv det selv →

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

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

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

Syntaks

array.lastIndexOf(item, start)
item

Påkrævet. Varen der skal søges efter

start

Valgfri. Hvor skal man starte søgningen. Negative værdier vil starte ved den givne position tælle fra slutningen og søge til begyndelsen


JavaScript Array find()

Metoden find() returnerer værdien af det første array-element, der sender en test funktion.

Dette eksempel finder (returnerer værdien af) det første element, der er større end 18:

Eksempel

const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
  return 
  value > 18;
} 

Prøv det selv →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Browser support

find() er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

find() understøttes ikke i Internet Explorer.


JavaScript Array findIndex()

Metoden findIndex() returnerer indekset for det første matrixelement, der består en testfunktion.

Dette eksempel finder indekset for det første element, der er større end 18:

Eksempel

const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
} 

Prøv det selv →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Bemærk at funktionen tager 3 argumenter:

  • Varens værdi

  • Vareindekset

  • Selve arrayet

Browser support

findIndex() er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

findIndex() understøttes ikke i Internet Explorer.


JavaScript Array.from()

Metoden Array.from() returnerer et Array-objekt fra ethvert objekt med en længde egenskab eller ethvert iterbart objekt.

Eksempel

Opret et array fra en streng:

Array.from("ABCDEFG");

Prøv det selv →

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

<p>Return an array object from any object with a length property or any iterable object.</p>

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

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Browser support

from() er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

from() understøttes ikke i Internet Explorer.


JavaScript Array Keys()

Metoden Array.keys() returnerer et Array Iterator-objekt med nøglerne til et array.

Eksempel

Opret et Array Iterator-objekt, der indeholder nøglerne til arrayet:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

Prøv det selv →

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

<p>Return an Array Iterator object with the keys of the array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

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

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Browser support

keys() er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

keys() understøttes ikke i Internet Explorer.


JavaScript Array entries()

Eksempel

Opret en Array Iterator, og gentag derefter nøgle/værdi-parrene:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

Metoden entries() returnerer et Array Iterator-objekt med nøgle/værdi-par:

[0, "Banana"]
[1, "Orange"]
[2, "Æble"]
[3, "Mango"]

Metoden entries() ændrer ikke det originale array.

Browser support

entries() er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

entries() understøttes ikke i Internet Explorer.


JavaScript Array includes()

ECMAScript 2016 introducerede Array.includes() til arrays. Dette giver os mulighed for at kontrollere, om et element er til stede i et array (inklusive NaN, i modsætning til indexOf).

Eksempel

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

fruits.includes("Mango"); // is true

Prøv det selv →

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

<p>Check if the fruit array contains "Mango":</p>

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

<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>

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

</body>
</html>

Syntaks

array.includes(search-item)

Array.includes() gør det muligt at tjekke for NaN-værdier. I modsætning til Array.indexOf().

Browser support

includes() er en ECMAScript 2016-funktion.

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

includes() understøttes ikke i Internet Explorer.


JavaScript Array Spread (...)

Operatoren ... udvider en iterabel (som et array) til flere elementer:

Eksempel

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

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

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

Browser support

... er en ES6-funktion (JavaScript 2015).

Det understøttes i alle moderne browsere:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

... er ikke understøttet i Internet Explorer.


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.