JavaScript-arrayer

JavaScript-arrayer används för att lagra flera värden i en enda variabel.

Exempel

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

Prova själv

Vad är en array?

En array är en speciell variabel som kan lagra en eller flera värden på en gång.

Om du har en projektlista (t.ex. en lista över bilvarumärken), bör du lagra bilvarumärkena i en enskild variabel på detta sätt:

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

Men vad om du vill iterera över alla bilar och hitta ett specifikt värde? Vad om det inte är tre bilvarumärken utan trettiohundra?

Lösningen är array!

En array kan lagra många värden under ett enskilt namn och kan också komma åt dessa värden genom att använda indexnummer.

Skapa array

Användning av arraytext är den enklaste metoden för att skapa JavaScript-arrayer.

Syntax:

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

Exempel

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

Prova själv

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

Exempel

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

Prova själv

Skriv inte en komma efter den sista elementet (t.ex. "BMW",).

Det kan finnas korsbrowserkompabilitetsproblem.

Använda JavaScript-nyckelordet new

Nedanstående exempel skapar också en array och tilldelar värden till den:

Exempel

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

Prova själv

De två föregående exemplen har samma effekt. Det är inte nödvändigt att använda new Array().

För enkelhet, läsbarhet och exekveringshastighet, använd den första metoden (arraytextmetoden).

för att komma åt arrayelement

Vi använder referenserIndexnummer (subscript)för att hänvisa till ett arrayelement.

Detta uttryck hämtar värdet på det första elementet i cars:

var name = cars[0];

Detta uttryck ändrar det första elementet i cars:

cars[0] = "Opel";

Exempel

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

Prova själv

[0] är den första elementet i arrayen. [1] är det andra. Arrayindex börjar från 0.

Ändra arrayelement

Detta uttryck ändrar värdet på den första elementet i cars:

cars[0] = "Opel";

Exempel

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

Prova själv

Åtkomsten till hela arrayen

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

Exempel

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

Prova själv

Arrayer är objekt

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

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

Array användsnumberFör att komma åt dess "element". I detta exempel,person[0] Returnera Bill:

Array:

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

Prova själv

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

Objekt:

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

Prova själv

Arrayelement kan vara objekt

JavaScript-variabler kan vara objekt. Arrayer är en speciel 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-arrayns verkliga styrka döljs i arrayens egenskaper och metoder:

Exempel

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).

Exempel

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

Prova själv

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

Åtkomsten till det första elementet i en array

Exempel

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

Prova själv

Åtkomsten till den sista elementet i en array

Exempel

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

Prova själv

Traversera elementen i en array

Det säkraste sättet att traversera en array är att använda "for"Cirkelrörelse:",

Exempel

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

Prova själv

Du kan också använda Array.forEach() Funktion:

Exempel

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

Prova själv

lägg till arrayelement

Det bästa sättet att lägga till nya element till en array är att använda push() Metoder:

Exempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Lägg till ett nytt element (Lemon) till fruits

Prova själv

Det kan också användas length Egenskapar lägger till nya element till arrayen:

Exempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Lägg till en ny element (Lemon) till fruits

Prova själv

Varning!

Att lägga till elementet med den högsta indexen kan skapa odefinierade "hål" i arrayen:

Exempel

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Lägg till en ny element (Lemon) till fruits

Prova själv

Associationer

Många programmeringselement stöder arrayer med namngivna index.

Arrayer med namngivna index kallas för associationer (eller hash-tabeller).

JavaScript Det stöds intemed namngivna index.

I JavaScript kan arrayer endast användasnumeric indices.

Exempel

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

Prova själv

Varning!

Om du använder namngivna index kommer JavaScript att omdefiniera arrayn som en standardobjekt.

Efter det kommer alla arrayns metoder och egenskaper att ge felaktiga resultat.

Exempel:

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

Prova själv

The difference between arrays and objects

In JavaScript,Arrayusenumeric indices.

In JavaScript,objectuseNamed indices.

Arrays are a special type of object that has numeric indices.

When to use an array, when to use an object?

  • JavaScript does not support associative arrays
  • If you want the element name to bestring (text)then you should useobject.
  • If you want the element name to benumberthen you should useArray.

Avoid new Array()

There is no need to use JavaScript's built-in array constructor new Array().

Please use [] Instead!

The following two different statements create a new empty array named points:

var points = new Array();         // Bad
var points = [];                  // Good

The following two different statements create a new array with six numbers:

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

Prova själv

new Keywords can only complicate the code. It can also produce some unexpected results:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

What if I delete one of the elements?

var points = new Array(40);       // Creates an array with 40 undefined elements!!!

Prova själv

How to identify an array

A common question is: How do I know if a variable is an array?

The problem lies with JavaScript operators typeof Returns "object" :

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

Prova själv

typeof operator returns "object", because JavaScript arrays are objects.

Lösning 1:

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

Array.isArray(fruits);     // Returnerar true

Prova själv

Problemet med detta är ECMAScript 5 Stödjer inte gamla webbläsare.

Lösning 2:

Skapa din egen isArray() Funktionen löser detta problem:

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

Prova själv

Om parametern är en array, returnerar den ovanstående funktionen alltid true.

eller en mer exakt förklaring är: om objektets prototyp innehåller ordet "Array" då returneras true.

Lösning 3:

Om objektet skapats av den angivna konstruktören då instanceof Operatorn returnerar true:

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

Prova själv