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>
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.
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.
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:
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:
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>
Följande exempel skapar också en Array och tilldelar värden till den:
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.
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.
Denna sats ändrar värdet på det första elementet i bilar
:
cars[0] = "Opel";
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>
JavaScript-metoden toString()
konverterar en array till en sträng av (kommaseparerade) matrisvärden.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Resultat :
Banana,Orange,Apple,MangoProva 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>
Med JavaScript kan hela arrayen nås genom att hänvisa till arrayen namn:
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 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:
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:
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>
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;
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.
Egenskapen length
för en array returnerar längden på en array (antalet array element).
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.
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>
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>
Ett sätt att loopa genom en array är att använda en for
-loop:
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()
:
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>
Det enklaste sättet att lägga till ett nytt element i en array är att använda metoden push()
:
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
:
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:
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>
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.
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.
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>
I JavaScript använder matriser numrerade index.
I JavaScript använder objekt namngivna index.
Arrayer är en speciell typ av objekt, med numrerade index.
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 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>
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>
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.
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>
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>
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.