JS Tutoriaal

JS TUIS JS Inleiding JS Waarheen JS Uitset JS Verklarings JS sintaksis JS Kommentaar JS veranderlikes JS Laat JS Konst JS-operateurs JS Rekenkunde JS Opdrag JS datatipes JS Funksies JS Voorwerpe JS Events JS Strings JS String Metodes JS String Soek JS String Templates JS nommers JS-nommermetodes JS Skikkings JS Skikking Metodes JS Array Sorteer JS Skikking Iterasie JS Array Konst JS Datums JS Datum Formate JS Datum Kry Metodes JS Datum Stel Metodes JS Wiskunde JS Random JS Booleans JS Vergelykings JS Voorwaardes JS Skakelaar JS Loop Vir JS Loop For In JS Loop Vir Van JS Loop Terwyl JS Break JS Iterables JS-stelle JS Kaarte JS tipe JS Tipe Omskakeling JS Bitwise JS RegExp JS foute JS Bestek JS Hysing JS Streng modus JS hierdie sleutelwoord JS Arrow Funksie JS Klasse JS JSON JS Ontfouting JS Stylgids JS Beste Praktyke JS foute JS prestasie JS Voorbehou Woorde

JS weergawes

JS weergawes JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS Geskiedenis

JS Voorwerpe

Voorwerpdefinisies Voorwerp Eienskappe Voorwerp Metodes Voorwerp vertoon Voorwerptoebehore Voorwerpkonstrukteurs Voorwerpprototipes Object Iterables Voorwerpstelle Voorwerpkaarte Voorwerpverwysing

JS Funksies

Funksie definisies Funksie parameters Funksie Aanroep Funksie oproep Funksie Pas toe Funksie sluitings

JS Klasse

Klasintro Klas Erfenis Klas Staties

JS Async

JS Terugbelle JS Asynchroon JS Beloftes JS Async/Wag

JS HTML DOM

DOM Inleiding DOM Metodes DOM-dokument DOM Elemente DOM HTML DOM-vorms DOM CSS DOM-animasies DOM-geleenthede DOM Gebeurtenis Luisteraar DOM-navigasie DOM nodusse DOM Versamelings DOM Node lyste

JS Browser BOM

JS venster JS skerm JS ligging JS Geskiedenis JS Navigator JS Popup Alert JS Tydsberekening JS koekies

JS Web API's

Web API Inleiding Webvorms API Webgeskiedenis API Webberging API Webwerker API Web haal API Web Geolocation API

JS AJAX

AJAX Intro AJAX XMLHttp AJAX-versoek AJAX-reaksie AJAX XML-lêer AJAX PHP AJAX ASP AJAX-databasis AJAX toepassings AJAX voorbeelde

JS JSON

JSON Inleiding JSON-sintaksis JSON vs XML JSON-datatipes JSON Ontleed JSON Stringify JSON-voorwerpe JSON-skikkings JSON-bediener JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery keurders jQuery HTML jQuery CSS jQuery DOM

JS grafika

JS grafika JS Canvas JS Plot JS Chart.js JS Google Chart JS D3.js

JS Voorbeelde

JS Voorbeelde JS HTML DOM JS HTML-invoer JS HTML-voorwerpe JS HTML-geleenthede JS Blaaier JS Redakteur JS Oefeninge JS Vasvra JS Sertifikaat

JS Verwysings

JavaScript-voorwerpe HTML DOM-voorwerpe


JavaScript -skikkings

'n Skikking is 'n spesiale veranderlike wat meer as een waarde kan hou:

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

Waarom gebruik u 'n skikking?

As jy 'n lys items het (byvoorbeeld 'n lys motorname), kan die stoor van die motors in enkele veranderlikes soos volg lyk:

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

Wat as jy egter deur die motors wil loop en 'n spesifieke een wil vind? En wat as jy nie 3 karre gehad het nie, maar 300?

Die oplossing is 'n skikking!

'n Skikking kan baie waardes onder 'n enkele naam hou, en jy kan toegang tot die waardes kry deur na 'n indeksnommer te verwys.


Die skep van 'n skikking

Die gebruik van 'n skikking letterlik is die maklikste manier om 'n JavaScript-skikking te skep.

Sintaksis:

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

Dit is 'n algemene praktyk om skikkings met die const - sleutelwoord te verklaar.

Kom meer te wete oor const met skikkings in die hoofstuk: JS Array Const .

Voorbeeld

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

Spasies en lynbreuke is nie belangrik nie. 'n Verklaring kan oor verskeie reëls strek:

Voorbeeld

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

Jy kan ook 'n skikking skep en dan die elemente verskaf:

Voorbeeld

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

Gebruik die JavaScript-sleutelwoord nuut

Die volgende voorbeeld skep ook 'n Skikking en ken waardes daaraan toe:

Voorbeeld

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

Die twee voorbeelde hierbo doen presies dieselfde.

Dit is nie nodig om te gebruik nie new Array().

Vir eenvoud, leesbaarheid en uitvoeringspoed, gebruik die skikking letterlike metode.



Toegang tot Array Elements

Jy kry toegang tot 'n skikkingselement deur na die indeksnommer te verwys :

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

Let wel: Skikkingsindekse begin met 0.

[0] is die eerste element. [1] is die tweede element.


Verandering van 'n skikkingselement

Hierdie stelling verander die waarde van die eerste element in cars:

cars[0] = "Opel";

Voorbeeld

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

Toegang tot die volledige skikking

Met JavaScript kan die volledige skikking verkry word deur na die skikkingnaam te verwys:

Voorbeeld

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

Skikkings is objekte

Skikkings is 'n spesiale tipe voorwerpe. Die typeofoperateur in JavaScript gee "objek" vir skikkings terug.

Maar JavaScript-skikkings word die beste beskryf as skikkings.

Skikkings gebruik getalle om toegang te verkry tot sy "elemente". In hierdie voorbeeld person[0] gee John terug:

Skikking:

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

Voorwerpe gebruik name om toegang tot sy "lede" te kry. In hierdie voorbeeld person.firstName gee John terug:

Voorwerp:

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

Skikkingselemente kan objekte wees

JavaScript-veranderlikes kan objekte wees. Skikkings is spesiale soorte voorwerpe.

As gevolg hiervan kan jy veranderlikes van verskillende tipes in dieselfde Array hê.

Jy kan voorwerpe in 'n skikking hê. Jy kan funksies in 'n Array hê. Jy kan skikkings in 'n skikking hê:

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

Skikking eienskappe en metodes

Die werklike sterkte van JavaScript-skikkings is die ingeboude skikkingseienskappe en -metodes:

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

Skikkingsmetodes word in die volgende hoofstukke behandel.


Die lengte Eiendom

Die lengtheienskap van 'n skikking gee die lengte van 'n skikking terug (die aantal skikkingselemente).

Voorbeeld

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

Die lengtheiendom is altyd een meer as die hoogste skikkingsindeks.


Toegang tot die eerste skikkingselement

Voorbeeld

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

Toegang tot die Last Array Element

Voorbeeld

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

Looping Array Elements

Een manier om deur 'n skikking te loop, is om 'n forlus te gebruik:

Voorbeeld

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

Jy kan ook die Array.forEach()funksie gebruik:

Voorbeeld

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

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Voeg skikkingselemente by

Die maklikste manier om 'n nuwe element by 'n skikking te voeg, is om die push()metode te gebruik:

Voorbeeld

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

Nuwe element kan ook by 'n skikking gevoeg word deur die lengtheiendom te gebruik:

Voorbeeld

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

WAARSKUWING!

Die byvoeging van elemente met hoë indekse kan ongedefinieerde "gate" in 'n skikking skep:

Voorbeeld

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

Assosiatiewe Skikkings

Baie programmeertale ondersteun skikkings met benoemde indekse.

Skikkings met benoemde indekse word assosiatiewe skikkings (of hashes) genoem.

JavaScript ondersteun nie skikkings met benoemde indekse nie.

In JavaScript gebruik skikkings altyd genommerde indekse .  

Voorbeeld

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

WAARSKUWING!!
As jy benoemde indekse gebruik, sal JavaScript die skikking na 'n voorwerp herdefinieer.

Daarna sal sommige skikkingsmetodes en -eienskappe verkeerde resultate lewer .

 Voorbeeld:

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

Die verskil tussen skikkings en voorwerpe

In JavaScript gebruik skikkings genommerde indekse .  

In JavaScript gebruik voorwerpe benoemde indekse .

Skikkings is 'n spesiale soort voorwerpe, met genommerde indekse.


Wanneer om skikkings te gebruik. Wanneer om voorwerpe te gebruik.

  • JavaScript ondersteun nie assosiatiewe skikkings nie.
  • Jy moet voorwerpe gebruik wanneer jy wil hê dat die elementname stringe (teks) moet wees .
  • Jy moet skikkings gebruik wanneer jy wil hê dat die elementname getalle moet wees .

JavaScript nuwe Array()

JavaScript het 'n ingeboude skikking-konstruktor new Array().

Maar jy kan dit veilig gebruik [].

Hierdie twee verskillende stellings skep albei 'n nuwe leë skikking genaamd punte:

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

Hierdie twee verskillende stellings skep albei 'n nuwe skikking wat 6 nommers bevat:

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

Die newsleutelwoord kan 'n paar onverwagte resultate lewer:

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

'n Algemene fout

const points = [40];

is nie dieselfde as:

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

Hoe om 'n skikking te herken

'n Algemene vraag is: Hoe weet ek of 'n veranderlike 'n skikking is?

The problem is that the JavaScript operator typeof returns "object":

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

The typeof operator returns object because a JavaScript array is an object.

Solution 1:

To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():

Array.isArray(fruits);

Solution 2:

The instanceof operator returns true if an object is created by a given constructor:

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

fruits instanceof Array;

Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.

Test Yourself With Exercises

Exercise:

Get the value "Volvo" from the cars array.

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