JavaScript array

JavaScript-array bruges til at gemme flere værdier i én enkelt variabel.

Eksempel

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

Prøv det selv

Hvad er et array?

Array er en speciel variabel, der kan gemme en eller flere værdier ad gangen.

Hvis du har en projektliste (f.eks. en liste over bilmærker), skal bilmærkerne gemmes i én enkelt variabel på denne måde:

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

Men hvad hvis du vil gennemgå alle biler og finde en bestemt værdi? Hvis det ikke er tre bilmærker, men tre hundred?

Løsningen er et array!

Array kan gemme mange værdier i én enkelt navn og kan også få adgang til disse værdier ved at referere til indeksnumre.

Opret array

Brug af array-tekst er den nemmeste metode til at oprette JavaScript-array.

Syntax:

var array-name = [item1, item2, ...];

Eksempel

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

Prøv det selv

Mellemrum og linjeskift er ikke vigtige. Erklæringen kan strækkes over flere linjer:

Eksempel

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

Prøv det selv

Skriv ikke komma efter den sidste element (f.eks. "BMW",).

Der kan være problemer med browserkompatibilitet.

Brug JavaScript-nøglen new

Følgende eksempel vil også oprette et array og tildel værdier til det:

Eksempel

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

Prøv det selv

Disse to eksempler har fuldstændig samme effekt. Der er ingen grund til at bruge new Array().

For at opnå enkelhed, læsbarhed og udførelseshastighed, brug den første metode (array-tekstmetode).

adgang til array-elementer

Vi kan få adgang til array-elementer gennemIndeksnummer (underscore)for at referere til et array-element.

Denne sætning adgang til værdien af den første element i cars:

var name = cars[0];

Denne sætning ændrer den første element i cars:

cars[0] = "Opel";

Eksempel

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

Prøv det selv

[0] er den første element i arrayet. [1] er den anden. Arrayindekser starter fra 0.

Ændre array-element

Denne sætning ændrer værdien af den første element i cars:

cars[0] = "Opel";

Eksempel

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

Prøv det selv

Åtkomsten till hela arrayen

Genom JavaScript kan du komma åt hela arrayen genom att referera till arraynamnet:

Eksempel

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

Prøv det selv

Arrayer är objekt

Arrayer är en särskild typ av objekt. I JavaScript används typeof Operatören returnerar "object".

Men, JavaScript-arrayer är bäst beskrivna som arrayer.

Array används数字För att komma åt dess "element". I detta fall,person[0] Returnera Bill:

Array:

var person = ["Bill", "Gates", 62];

Prøv det selv

Objekt användsNamnFör att komma åt dess "medlemmar". I detta fall,person.firstName Returnera Bill:

Objekt:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Prøv det selv

Arrayelement kan vara objekt

JavaScript-variabler kan vara objekt. Arrayer är en särskild typ av objekt.

Av den anledningen kan du lagra olika typer av variabler i samma array.

Du kan lagra objekt i en array. Du kan lagra funktioner i en array. Du kan till och med lagra en array i en array:

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

Arrayegenskaper och metoder

JavaScript-arrayers verkliga styrka döljs i arrayernas egenskaper och metoder:

Eksempel

var x = cars.length;   // length-egenskapen returnerar antalet element
var y = cars.sort();   // sort() metoden sorterar arrayen

Vi kommer att lära oss om arraymetoder i nästa kapitel.

length-egenskapen

length Egenskapen returnerar arrayens längd (antal element).

Eksempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // Längden på fruits är 4

Prøv det selv

length Egenskapen är alltid större än den högsta arrayindexen (index).

Åtkomsten till det första arrayelementet

Eksempel

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Prøv det selv

Åtkomsten till den sista arrayelementet

Eksempel

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Prøv det selv

Traversera arrayelement

Det sikreste sättet att traversera en array är att använda "for"Løkke:"

Eksempel

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Prøv det selv

Man kan også bruge Array.forEach() Funktion:

Eksempel

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Prøv det selv

Lägg till arrayelement

Det bedste sätt att lägga till element till arrayen är att använda push() Metode:

Eksempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Tilføj et nyt element (Lemon) til fruits

Prøv det selv

Man kan også bruge length Tilføj et nyt element til arrayet ved hjælp af

Eksempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Tilføj et nyt element (Lemon) til fruits

Prøv det selv

Advarsel!

Tilføjelse af elementet med den højeste indeks kan skabe udefinerede "huller" i arrayet:

Eksempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Tilføj et nyt element (Lemon) til fruits

Prøv det selv

Associative array

Mange programmeringselementer understøtter navngivne indekser.

Arrayer med navngivne indekser kaldes associative arrayer (eller hash).

JavaScript Der er ikke understøttetnavngivne indekser.

I JavaScript kan arrayer kun bruge数字索引.

Eksempel

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length returnerer 3
var y = person[0];              // person[0] returnerer "Bill"

Prøv det selv

Advarsel!

Hvis du bruger navngivne indekser, vil JavaScript definere arrayet som en standardobjekt.

Efterfølgende vil alle metoder og egenskaber for arrayet give forkerte resultater.

Eksempel:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length 将返回 0
var y = person[0];              // person[0] 将返回 undefined

Prøv det selv

数组和对象的区别

在 JavaScript 中，数组使用数字索引.

在 JavaScript 中，对象使用命名索引.

数组是特殊类型的对象，具有数字索引。

何时使用数组，何时使用对象？

  • JavaScript 不支持关联数组
  • 如果希望元素名为字符串（文本）则应该使用对象.
  • 如果希望元素名为数字则应该使用数组.

避免 new Array()

没有必要使用 JavaScript 的内建数组构造器 new Array().

请使用 [] 取而代之！

下面两条不同的语句创建了名为 points 的新空数组：

var points = new Array();         // 差
var points = [];                  // 优

下面两条不同的语句创建包含六个数字的新数组：

var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优

Prøv det selv

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果：

var points = new Array(40, 100);  // 创建包含两个元素的数组（40 和 100）

假如删除其中一个元素会怎么样？

var points = new Array(40);       // 创建包含 40 个未定义元素的数组！！！

Prøv det selv

如何识别数组

常见的问题是：我如何知晓某个变量是否是数组？

问题在于 JavaScript 运算符 typeof 返回 "object"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // 返回 object

Prøv det selv

运算符 typeof 返回 "object"，因为 JavaScript 数组属于对象。

Løsning 1:

For at løse dette problem definerede ECMAScript 5 en ny metode Array.isArray():

Array.isArray(fruits);     // returnerer true

Prøv det selv

Problemet med denne løsning er ECMAScript 5 Ikke understøttet i gamle browsere.

Løsning 2:

Opret din egen isArray() Funktionen løser dette problem:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Prøv det selv

Hvis parameteren er en array, returnerer den ovennævnte funktion altid true.

eller en mere præcis forklaring er: Hvis objektets prototype indeholder ordet "Array", så returneres true.

Løsning 3:

Hvis objektet er oprettet af den givne constructor, så instanceof Operator returnerer true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // returnerer true

Prøv det selv