JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript-matrixmethoden


Arrays converteren naar strings

De JavaScript-methode toString()converteert een array naar een reeks (door komma's gescheiden) arraywaarden.

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultaat:

Banana,Orange,Apple,Mango

De join()methode voegt ook alle array-elementen samen tot een string.

Het gedraagt ​​zich net als toString(), maar daarnaast kun je het scheidingsteken specificeren:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Resultaat:

Banana * Orange * Apple * Mango

Knallen en duwen

Wanneer u met arrays werkt, is het gemakkelijk om elementen te verwijderen en nieuwe elementen toe te voegen.

Dit is wat knallen en duwen is:

Items uit een array halen of items in een array duwen .



JavaScript-array pop()

De pop()methode verwijdert het laatste element uit een array:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

De pop()methode retourneert de waarde die is "uitgesprongen":

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

JavaScript-array push()

De push()methode voegt een nieuw element toe aan een array (aan het einde):

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

De push()methode retourneert de nieuwe arraylengte:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Verschuivende elementen

Verschuiven is gelijk aan knallen, maar werken aan het eerste element in plaats van aan het laatste.


JavaScript-array shift()

De shift()methode verwijdert het eerste array-element en "verschuift" alle andere elementen naar een lagere index.

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

De shift()methode retourneert de waarde die "uitgeschoven" was:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

JavaScript-array unshift()

De unshift()methode voegt een nieuw element toe aan een array (aan het begin) en "unshift" oudere elementen:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

De unshift()methode retourneert de nieuwe arraylengte.

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Elementen wijzigen

Array-elementen zijn toegankelijk met behulp van hun indexnummer :

Array -indexen beginnen met 0:

[0] is het eerste array-element
[1] is het tweede
[2] is het derde ...

Voorbeeld

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

JavaScript-arraylengte

De lengtheigenschap biedt een eenvoudige manier om een ​​nieuw element aan een array toe te voegen:

Voorbeeld

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

JavaScript-array verwijderen()

Waarschuwing!

Array-elementen kunnen worden verwijderd met behulp van de JavaScript-operator delete.

Met behulp deletevan undefinedgaten in de array.

Gebruik in plaats daarvan pop() of shift().

Voorbeeld

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

Arrays samenvoegen (aaneenschakelen)

De concat()methode creëert een nieuwe array door bestaande arrays samen te voegen (aaneen te schakelen):

Voorbeeld (twee arrays samenvoegen)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

De concat()methode verandert niets aan de bestaande arrays. Het retourneert altijd een nieuwe array.

De concat()methode kan een willekeurig aantal arrayargumenten aannemen:

Voorbeeld (drie arrays samenvoegen)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

De concat()methode kan ook strings als argumenten gebruiken:

Voorbeeld (een array samenvoegen met waarden)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

Arrays splitsen en snijden

De splice()methode voegt nieuwe items toe aan een array.

De slice()methode snijdt een stuk van een array uit.


JavaScript-array splice()

De splice()methode kan worden gebruikt om nieuwe items aan een array toe te voegen:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

De eerste parameter (2) definieert de positie waar nieuwe elementen moeten worden toegevoegd (gesplitst).

De tweede parameter (0) definieert hoeveel elementen verwijderd moeten worden .

De rest van de parameters ("Citroen", "Kiwi") definiëren de nieuwe elementen die moeten worden toegevoegd .

De splice()methode retourneert een array met de verwijderde items:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Splice() gebruiken om elementen te verwijderen

Met slimme parameterinstelling kunt u gebruiken splice()om elementen te verwijderen zonder "gaten" in de array achter te laten:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

De eerste parameter (0) definieert de positie waar nieuwe elementen moeten worden toegevoegd (gesplitst).

De tweede parameter (1) definieert hoeveel elementen verwijderd moeten worden .

De overige parameters zijn weggelaten. Er worden geen nieuwe elementen toegevoegd.


JavaScript-array segment()

De slice()methode snijdt een stuk van een array uit in een nieuwe array.

Dit voorbeeld snijdt een deel van een array uit vanaf arrayelement 1 ("Oranje"):

Voorbeeld

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Opmerking

De slice()methode maakt een nieuwe array aan.

De slice()methode verwijdert geen elementen uit de bronarray.

Dit voorbeeld snijdt een deel van een array uit vanaf arrayelement 3 ("Apple"):

Voorbeeld

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

De slice()methode kan twee argumenten aannemen, zoals slice(1, 3).

De methode selecteert vervolgens elementen van het startargument en tot (maar niet inclusief) het eindargument.

Voorbeeld

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Als het eindargument wordt weggelaten, zoals in de eerste voorbeelden, slice() snijdt de methode de rest van de array uit.

Voorbeeld

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

Automatisch naarString()

JavaScript converteert een array automatisch naar een door komma's gescheiden tekenreeks wanneer een primitieve waarde wordt verwacht.

Dit is altijd het geval wanneer u een array probeert uit te voeren.

Deze twee voorbeelden zullen hetzelfde resultaat opleveren:

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Voorbeeld

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Opmerking

Alle JavaScript-objecten hebben een methode toString().


Max- en minwaarden in een array zoeken

Er zijn geen ingebouwde functies voor het vinden van de hoogste of laagste waarde in een JavaScript-array.

Hoe u dit probleem oplost, leert u in het volgende hoofdstuk van deze tutorial.


Arrays sorteren

Sorteermatrices worden behandeld in het volgende hoofdstuk van deze zelfstudie.

Volledige matrixreferentie

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:

Use the correct Array method to remove the last item of the fruits array.

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