JavaScript taulukko

JavaScript-taulukot käytetään useiden arvojen tallentamiseen yhdessä muuttujassa.

Esimerkki

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

Kokeile itse

Mitä taulukko on?

Taulukko on erityinen muuttuja, joka voi sisältää useita arvoja kerralla.

Jos sinulla on hankeluettelo (esim. autovalmistajien luettelo), sinun tulisi tallentaa autovalmistajat yhdessä muuttujaan tällä tavalla:

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

Mutta, jos haluat käydä läpi kaikki autot ja löytää tietyn arvon? Jos ei ole kolmea autovalmistajaa vaan kolmesataa?

Ratkaisu on taulukko!

Taulukko voi sisältää useita arvoja yhdessä nimessä, ja arvoja voidaan tarkastella viittaamalla indeksiin.

Luo taulukko

Taulukon tekstimenetelmä on yksinkertaisin tapa luoda JavaScript-taulukko.

Syntaksi:

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

Esimerkki

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

Kokeile itse

Välilyönnit ja rivinvaihdot eivät ole tärkeitä. Ilmoitus voi ulottua useille riveille:

Esimerkki

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

Kokeile itse

Älä kirjoita viimeistä elementtiä jälkeen pilkku (esim. "BMW",).

Voivat olla selaimen yhdenmukaisuusongelmia.

JavaScript-avainsanalla new

Seuraava esimerkki luo myös taulukon ja asettaa sille arvon:

Esimerkki

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

Kokeile itse

Nämä kaksi esimerkkiä ovat täysin samanlaisia. Ei tarvitse käyttää new Array().

Yksinkertaisuuden, luettavuuden ja suorituskyvyn vuoksi käytä ensimmäistä menetelmää (taulukon tekstimenetelmää).

tarkastella taulukon elementtiä

Käytämme viittaustaIndeksinumero (alaviiva)viitata taulukon elementtiin.

Tämä lause hakee cars-taulukon ensimmäisen elementin arvon:

var name = cars[0];

Tämä lause muuttaa cars-taulukon ensimmäisen elementin:

cars[0] = "Opel";

Esimerkki

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

Kokeile itse

[0] on taulukon ensimmäinen elementti. [1] on toinen. Taulukon indeksit alkavat 0:sta.

Muuta taulukon elementtiä

Tämä lause muuttaa cars-taulukon ensimmäisen elementin arvon:

cars[0] = "Opel";

Esimerkki

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

Kokeile itse

Kutsu täysin taulukkoa

JavaScriptin avulla voit käyttää taulukon nimeä täysin olevaan taulukkoon:

Esimerkki

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

Kokeile itse

Taulukot ovat objekteja

Taulukot ovat erityisiä objektityyppejä. JavaScriptissä käytetään taulukoita: typeof Operaattorit palauttavat "object".

Mutta, JavaScript-taulukot on parasta kuvata taulukkojen avulla.

Taulukon käyttönumeroitakäyttääksesi sen "elementtejä". Tässä tapauksessa,person[0] Palauta Bill:

Taulukko:

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

Kokeile itse

Objekti käyttääNimikäyttääksesi sen "jäseniä". Tässä tapauksessa,person.firstName Palauta Bill:

Objekti:

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

Kokeile itse

Taulukon elementit voivat olla objekteja

JavaScript-muuttujat voivat olla objekteja. Taulukot ovat erityisiä objektityyppejä.

Tämän vuoksi voit tallentaa erilaisia tyyppisiä muuttujia samaan taulukkoon.

Voit tallentaa objekteja taulukkoon. Voit tallentaa funktioita taulukkoon. Voit jopa tallentaa taulukon taulukkoon:

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

Taulukon ominaisuudet ja metodit

JavaScript-taulukon todellinen voima piilee taulukon ominaisuuksissa ja metodeissa:

Esimerkki

var x = cars.length;   // length ominaisuus palauttaa elementtien määrän
var y = cars.sort();   // sort() metodi järjestää taulukon

Opimme taulukkometodit seuraavassa luvussa.

length ominaisuus

length ominaisuus palauttaa taulukon pituuden (taulukon elementtien määrän).

Esimerkki

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits:n pituus on 4

Kokeile itse

length ominaisuus on aina suurempi kuin korkein taulukon indeksi (alaviittaus).

kutsua ensimmäistä taulukon elementtiä

Esimerkki

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

Kokeile itse

kutsua viimeistä taulukon elementtiä

Esimerkki

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

Kokeile itse

käydä läpi taulukon elementit

Turvallisin tapa käydä läpi taulukon on käyttää "for"Silmukka:"

Esimerkki

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

Kokeile itse

Voit myös käyttää Array.foreach() Funktio:

Esimerkki

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

Kokeile itse

Lisää taulukon elementti

Paras tapa lisätä uusi elementti taulukkoon on käyttää push() Metodi:

Esimerkki

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Lisää uusi elementti (Lemon) fruitsiin

Kokeile itse

Voi myös käyttää length Lisää uusi elementti taulukkoon

Esimerkki

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Lisää uusi elementti (Lemon) fruitsiin

Kokeile itse

Varoitus!

Lisäämällä korkeimman indeksin elementti voi luoda taulukkoon määrittelemättömiä "kuoppia":

Esimerkki

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Lisää uusi elementti (Lemon) fruitsiin

Kokeile itse

Liitetty taulukko

Monet ohjelmointielementit tukevat nimettyjen indeksien taulukoita.

Nimettyjen indeksien taulukot kutsutaan liitetyiksi taulukoiksi (tai hajautuksiksi).

JavaScriptissa Nimettyjen indeksien taulukoita ei tuetanimettyjen indeksien taulukoissa.

JavaScriptissa taulukot voidaan käyttää vainnumeeriset indeksit.

Esimerkki

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

Kokeile itse

Varoitus!

Jos käytät nimettyjä indeksejä, JavaScript määrittää taulukon standardiksi objektiksi.

Jälkeen tämä, kaikki taulukon metodit ja ominaisuudet tuottavat epäoikeita tuloksia.

Esimerkki:

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

Kokeile itse

Taulukon ja objektin välinen ero

JavaScriptissäTaulukkoKäytänumeeriset indeksit.

JavaScriptissäobjektiKäytäNimetty indeksi.

Taulukko on erityinen objektityyppi, jolla on numeeriset indeksit.

Kun käytetään taulukkoa ja kun käytetään objektia?

  • JavaScript ei tue yhdistettyjä taulukoita
  • Jos haluat elementtien nimetmerkkijono (teksti)Silloin tulisi käyttääobjekti.
  • Jos haluat elementtien nimetnumeroitaSilloin tulisi käyttääTaulukko.

Vältä new Array()

Ei ole tarpeen käyttää JavaScriptin sisäänrakennettua taulukkoconstruktoria new Array().

Käytä [] Sen sijaan!

Alla olevat kaksi eri lauseet luovat uuden tyhjän taulukon nimeltä points:

var points = new Array();         // Epäedullinen
var points = [];                  // Edullinen

Alla olevat kaksi eri lauseet luovat uuden taulukon, joka sisältää kuusi numeroa:

var points = new Array(40, 100, 1, 5, 25, 10); // Epäedullinen
var points = [40, 100, 1, 5, 25, 10];          // Edullinen

Kokeile itse

new Avainsanat voivat monimutkaistaa koodia. Ne voivat myös tuottaa odottamattomia tuloksia:

var points = new Array(40, 100);  // Luo taulukko, joka sisältää kaksi elementtiä (40 ja 100)

Mitä tapahtuu, jos poistaa yhden elementin?

var points = new Array(40);       // Luo taulukko, joka sisältää 40 määrittelemätöntä elementtiä!!!

Kokeile itse

Miten tunnistaa taulukko

Yleinen kysymys on: Miten tiedän, onko jokin muuttuja taulukko?

Ongelma on JavaScript-laskin typeof Palauttaa "object":

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

Kokeile itse

Tyyppilaskin palauttaa "object", koska JavaScript-taulukko kuuluu objekteihin.

Ratkaisu 1:

Tämän ongelman ratkaisemiseksi ECMAScript 5 määritteli uuden metodin Array.isArray():

Array.isArray(fruits);     // Palauttaa true

Kokeile itse

Tämän suunnitelman ongelma on ECMAScript 5 Tämä menetelmä ei tue vanhoja selaimia.

Ratkaisu 2:

Luo oma isArray() Funktio ratkaisee tämän ongelman:

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

Kokeile itse

Jos parametri on taulukko, yllä oleva funktio palauttaa aina true.

Tai tarkemmin sanottuna: jos objekti prototyypissä sisältää sanan "Array", palautetaan true.

Ratkaisu 3:

Jos objekti on luotu annetun rakentajan avulla: instanceof Operatori palauttaa true:

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

Kokeile itse