JavaScript Array Iteration


Innehållsförteckning

    Visa innehållsförteckning


Array-iterationsmetoder fungerar på varje array-objekt.


JavaScript Array forEach()

Metoden forEach() anropar en funktion (en callback-funktion) en gång för varje matriselement.

Exempel

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

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

Exemplet ovan använder endast värdeparametern. Exemplet kan skrivas om till:

Exempel

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

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

Prova själv →

<!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() skapar en ny array genom att utföra en funktion på varje arrayelement.

Metoden map() kör inte funktionen för array element utan värden.

Metoden map() ändrar inte den ursprungliga arrayen.

Detta exempel multiplicerar varje matrisvärde med 2:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

När en återuppringningsfunktion endast använder värdeparametern, indexet och matrisen parametrar kan utelämnas:

Exempel

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

Prova själv →

<!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 lade till Array flatMap()-metoden i JavaScript.

Metoden flatMap() mappar först alla element i en array och skapar sedan en ny array genom att platta till arrayen.

Exempel

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

Prova själv →

<!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>

Webbläsarstöd

JavaScript Array flatMap() stöds i alla moderna webbläsare sedan januari 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() skapar en ny array med arrayelement som klarar ett test.

Det här exemplet skapar en ny array från element med ett värde större än 18:

Exempel

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

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

I exemplet ovan använder inte callback-funktionen index och array parametrar, så att de kan utelämnas:

Exempel

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

Prova själv →

<!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ör en funktion på varje arrayelement för att producera (reducera det till) ett enda värde.

Metoden reduce() fungerar från vänster till höger i arrayen. Se även reduceRight().

Metoden reduce() reducerar inte den ursprungliga arrayen.

Detta exempel hittar summan av alla tal i en matris:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 4 argument:

  • Summan (startvärdet/tidigare returnerat värde)

  • Varans värde

  • Artikelindex

  • Själva arrayen

Exemplet ovan använder inte parametrarna index och array. Det kan vara omskriven till:

Exempel

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

Prova själv →

<!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 acceptera ett initialvärde:

Exempel

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

Prova själv →

<!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ör en funktion på varje arrayelement för att producera (reducera det till) ett enda värde.

reduceRight() fungerar från höger till vänster i arrayen. Se även reduce().

Metoden reduceRight() reducerar inte den ursprungliga arrayen.

Detta exempel hittar summan av alla tal i en matris:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 4 argument:

  • Summan (startvärdet/tidigare returnerat värde)

  • Varans värde

  • Artikelindex

  • Själva arrayen

Exemplet ovan använder inte parametrarna index och array. Det kan vara omskriven till:

Exempel

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

Prova själv →

<!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() kontrollerar om alla arrayvärden klarar ett test.

Det här exemplet kontrollerar om alla matrisvärden är större än 18:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

När en återuppringningsfunktion endast använder den första parametern (värde), den andra parametrar kan utelämnas:

Exempel

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

Prova själv →

<!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() kontrollerar om vissa matrisvärden klarar ett test.

Det här exemplet kontrollerar om vissa matrisvärden är större än 18:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen


JavaScript Array indexOf()

Metoden indexOf() söker i en array efter ett elementvärde och returnerar dess position.

Obs! Det första objektet har position 0, det andra objektet har position 1, och så vidare.

Exempel

Sök i en array efter objektet "Apple":

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

Prova själv →

<!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>

Syntax

array.indexOf(item, start)
item

Nödvändig. Objektet att söka efter.

start

Frivillig. Var ska du börja sökningen. Negativa värden börjar vid den givna positionen från slutet och söker till slutet.

Array.indexOf() returnerar -1 om objektet inte hittas.

Om föremålet är närvarande mer än en gång, returnerar det positionen för den första förekomst.


JavaScript Array lastIndexOf()

Array.lastIndexOf() är samma som Array.indexOf(), men returnerar positionen för den senaste förekomsten av det angivna elementet.

Exempel

Sök i en array efter objektet "Apple":

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

Prova själv →

<!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>

Syntax

array.lastIndexOf(item, start)
item

Nödvändig. Objektet att söka efter

start

Frivillig. Var ska du börja sökningen. Negativa värden börjar vid den givna positionen från slutet och söker till början


JavaScript Array find()

Metoden find() returnerar värdet på det första matriselementet som skickar en testfunktion.

Detta exempel hittar (returnerar värdet av) det första elementet som är större än 18:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

Webbläsarstöd

find() är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

find() stöds inte i Internet Explorer.


JavaScript Array findIndex()

Metoden findIndex() returnerar indexet för det första matriselementet som klarar en testfunktion.

Det här exemplet hittar indexet för det första elementet som är större än 18:

Exempel

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

Prova själv →

<!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>

Observera att funktionen tar 3 argument:

  • Varans värde

  • Artikelindex

  • Själva arrayen

Webbläsarstöd

findIndex() är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

findIndex() stöds inte i Internet Explorer.


JavaScript Array.from()

Metoden Array.from() returnerar ett Array-objekt från alla objekt med en längd egendom eller något itererbart objekt.

Exempel

Skapa en matris från en sträng:

Array.from("ABCDEFG");

Prova själv →

<!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>

Webbläsarstöd

from() är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

from() stöds inte i Internet Explorer.


JavaScript Array Keys()

Metoden Array.keys() returnerar ett Array Iterator-objekt med nycklarna till en array.

Exempel

Skapa ett Array Iterator-objekt som innehåller arrayens nycklar:

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

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

Prova själv →

<!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>

Webbläsarstöd

nycklar() är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

nycklar() stöds inte i Internet Explorer.


JavaScript Array entries()

Exempel

Skapa en Array Iterator och iterera sedan över nyckel/värdeparen:

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

Prova själv →

<!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() returnerar ett Array Iterator-objekt med nyckel/värdepar:

[0, "Banan"]
[1, "Orange"]
[2, "Äpple"]
[3, "Mango"]

Metoden entries() ändrar inte den ursprungliga arrayen.

Webbläsarstöd

entries() är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

entries() stöds inte i Internet Explorer.


JavaScript Array includes()

ECMAScript 2016 introducerade Array.includes() till arrayer. Detta låter oss kontrollera om ett element finns i en array (inklusive NaN, till skillnad från indexOf).

Exempel

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

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

Prova själv →

<!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>

Syntax

array.includes(search-item)

Array.includes() gör det möjligt att söka efter NaN-värden. Till skillnad från Array.indexOf().

Webbläsarstöd

includes() är en ECMAScript 2016-funktion.

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

includes() stöds inte i Internet Explorer.


JavaScript Array Spread (...)

Operatorn ... expanderar en iterabel (som en array) till fler element:

Exempel

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

Prova själv →

<!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>

Webbläsarstöd

... är en ES6-funktion (JavaScript 2015).

Det stöds i alla moderna webbläsare:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

... stöds inte i Internet Explorer.


Komplett arrayreferens

För en komplett Array-referens, gå till vår:

Komplett JavaScript Array Reference.

Referensen innehåller beskrivningar och exempel på alla Array egenskaper och metoder.