JavaScript-matriser


Innehållsförteckning

    Visa innehållsförteckning

En array är en speciell variabel som kan innehålla mer än ett värde:

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

Prova själv →

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

Varför använda Arrays?

Om du har en lista med objekt (till exempel en lista med bilnamn), lagrar du bilar i enskilda variabler kan se ut så här:

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

Men vad händer om du vill gå igenom bilarna och hitta en specifik? Och tänk om du inte hade 3 bilar utan 300?

Lösningen är en rad!

En array kan innehålla många värden under ett enda namn, och du kan komma åt värdena genom att referera till ett indexnummer.


Skapa en Array

Att använda en array literal är det enklaste sättet att skapa en JavaScript-array.

Syntax:

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

Det är vanligt att deklarera arrayer med nyckelordet const.

Läs mer om const med arrayer i kapitlet: JS Array Const.

Exempel

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

Prova själv →

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

Mellanslag och radbrytningar är inte viktiga. En deklaration kan sträcka sig över flera rader:

Exempel

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

Prova själv →

<!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 också skapa en array och sedan tillhandahålla elementen:

Exempel

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

Prova själv →

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

Använda JavaScript-nyckelordet nytt

Följande exempel skapar också en Array och tilldelar värden till den:

Exempel

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

Prova själv →

<!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 två exemplen ovan gör exakt samma sak.

Det finns inget behov av att använda new Array().

För enkelhet, läsbarhet och exekveringshastighet, använd array literal-metoden.



Åtkomst till Array Elements

Du kommer åt ett matriselement genom att hänvisa till indexnumret:

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

Prova själv →

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

Obs! Arrayindex börjar med 0.

[0] är det första elementet. [1] är det andra elementet.


Ändra ett arrayelement

Denna sats ändrar värdet på det första elementet i bilar:

cars[0] = "Opel";

Exempel

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

Prova själv →

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


Konvertera en array till en sträng

JavaScript-metoden toString() konverterar en array till en sträng av (kommaseparerade) matrisvärden.

Exempel

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

Resultat :

Banana,Orange,Apple,Mango

Prova själv →

<!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å tillgång till hela arrayen

Med JavaScript kan hela arrayen nås genom att hänvisa till arrayen namn:

Exempel

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

Prova själv →

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


Arrayer är objekt

Arrayer är en speciell typ av objekt. Operatorn typeof i JavaScript returnerar "object" för matriser.

Men JavaScript-matriser beskrivs bäst som matriser.

Matriser använder siffror för att komma åt dess "element". I denna exempel, person[0] återkommer John:

Array:

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

Prova själv →

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

Objekt använder namn för att komma åt dess "medlemmar". I det här exemplet, person.firstName återkommer John:

Objekt :

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

Prova själv →

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


Arrayelement kan vara objekt

JavaScript-variabler kan vara objekt. Arrayer är speciella typer av objekt.

På grund av detta kan du ha variabler av olika typer i samma Array.

Du kan ha objekt i en Array. Du kan ha funktioner i en Array. Du kan har arrayer i en array:

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

Arrayegenskaper och metoder

Den verkliga styrkan hos JavaScript-matriser är de inbyggda matrisegenskaperna och metoder:

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

Arraymetoder behandlas i nästa kapitel.


Längden Fastighet

Egenskapen length för en array returnerar längden på en array (antalet array element).

Exempel

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

Prova själv →

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

Egenskapen length är alltid en mer än det högsta arrayindexet.


Åtkomst till det första arrayelementet

Exempel

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

Prova själv →

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

Åtkomst till Last Array Element

Exempel

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

Prova själv →

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

Ett sätt att loopa genom en array är att använda en for-loop:

Exempel

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

Prova själv →

<!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 också använda funktionen Array.forEach():

Exempel

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

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

Prova själv →

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

Lägga till arrayelement

Det enklaste sättet att lägga till ett nytt element i en array är att använda metoden push():

Exempel

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

Prova själv →

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

Nytt element kan också läggas till i en array med egenskapen length:

Exempel

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

Prova själv →

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

VARNING!
<p>Att lägga till element med höga index kan skapa odefinierade "hål" i en array:

Exempel

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

Prova själv →

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

Associativa arrayer

Många programmeringsspråk stöder arrayer med namngivna index.

Arrayer med namngivna index kallas associativa matriser (eller hash).

JavaScript stöder inte arrayer med namngivna index.

I JavaScript använder matriser alltid numrerade index.

Exempel

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

Prova själv →

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

VARNING !!
Om du använder namngivna index kommer JavaScript att omdefiniera arrayen till ett objekt.

Efter det kommer vissa arraymetoder och egenskaper att producera felaktiga resultat.

Exempel:

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

Prova själv →

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


Skillnaden mellan matriser och objekt

I JavaScript använder matriser numrerade index.

I JavaScript använder objekt namngivna index.

Arrayer är en speciell typ av objekt, med numrerade index.


När ska man använda matriser. När ska man använda objekt.

  • JavaScript stöder inte associativa arrayer.

  • Du bör använda objekt när du vill att elementnamnen ska vara strängar (text).

  • Du bör använda matriser när du vill att elementnamnen ska vara nummer.


JavaScript new Array()

JavaScript har en inbyggd array-konstruktor new Array().

Men du kan säkert använda [] istället.

Dessa två olika påståenden skapar båda en ny tom array med namnet punkter:

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

Dessa två olika påståenden skapar båda en ny array som innehåller 6 nummer:

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

Prova själv →

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

Nyckelordet nya kan ge några oväntade resultat:

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

Prova själv →

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

Prova själv →

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

Prova själv →

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

Ett vanligt fel

const points = [40];

är inte samma sak som:

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

Prova själv →

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

Prova själv →

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

Hur man känner igen en array

En vanlig fråga är: Hur vet jag om en variabel är en matris?

Problemet är att JavaScript-operatorn typeof returnerar "objekt":

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

Prova själv →

<!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 returnerar objekt eftersom en JavaScript-matris är en objekt.

Lösning 1:

För att lösa detta problem definierade ECMAScript 5 (JavaScript 2009) en ny metod Array.isArray():

Array.isArray(fruits);

Prova själv →

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

Operatorn instanceof returnerar true om ett objekt skapas av en given konstruktör:

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

Prova själv →

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

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.