Array iteration metoder fungerer på hvert array element.
forEach()
Metoden forEach()
kalder en funktion (en tilbagekaldsfunktion) én gang for hvert array-element.
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:
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>
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:
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:
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>
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.
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>
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 |
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:
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:
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>
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:
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:
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:
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>
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:
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:
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>
every()
Metoden every()
kontrollerer, om alle matrixværdier består en test.
Dette eksempel kontrollerer, om alle matrixværdier er større end 18:
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:
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>
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:
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
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.
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>
array.indexOf(item, start)
Påkrævet. Varen der skal søges efter.
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.
lastIndexOf()
Array.lastIndexOf()
er det samme som Array.indexOf()
, men returnerer positionen for den sidste forekomst af det angivne element.
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>
array.lastIndexOf(item, start)
Påkrævet. Varen der skal søges efter
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
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:
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
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.
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:
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
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.
Array.from()
Metoden Array.from()
returnerer et Array-objekt fra ethvert objekt med en længde egenskab eller ethvert iterbart objekt.
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>
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.
Keys()
Metoden Array.keys()
returnerer et Array Iterator-objekt med nøglerne til et array.
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>
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.
entries()
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.
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.
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).
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>
array.includes(search-item)
Array.includes() gør det muligt at tjekke for NaN-værdier. I modsætning til Array.indexOf().
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.
Operatoren ... udvider en iterabel (som et array) til flere elementer:
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>
...
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.
For en komplet Array-reference, gå til vores:
Komplet JavaScript Array Reference.
Referencen indeholder beskrivelser og eksempler på alle Array egenskaber og metoder.