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 -sorteermatrices


Een array sorteren

De sort()methode sorteert een array alfabetisch:

Voorbeeld

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

Een array omkeren

De reverse()methode keert de elementen in een array om.

U kunt het gebruiken om een ​​array in aflopende volgorde te sorteren:

Voorbeeld

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

Numerieke sortering

Standaard sort()sorteert de functie waarden als strings .

Dit werkt goed voor strings ("Apple" komt voor "Banana").

Als getallen echter als tekenreeksen worden gesorteerd, is "25" groter dan "100", omdat "2" groter is dan "1".

Hierdoor zal de sort()methode een onjuist resultaat opleveren bij het sorteren van getallen.

U kunt dit oplossen door een vergelijkingsfunctie aan te bieden :

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Gebruik dezelfde truc om een ​​array aflopend te sorteren:

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});


De vergelijkingsfunctie

Het doel van de vergelijkingsfunctie is om een ​​alternatieve sorteervolgorde te definiëren.

De vergelijkingsfunctie moet een negatieve, nul of positieve waarde retourneren, afhankelijk van de argumenten:

function(a, b){return a - b}

Wanneer de sort()functie twee waarden vergelijkt, verzendt deze de waarden naar de vergelijkingsfunctie en sorteert de waarden volgens de geretourneerde (negatieve, nul, positieve) waarde.

Als het resultaat negatief ais, wordt eerder gesorteerd b.

Als het resultaat positief bis, wordt eerder gesorteerd a.

Als het resultaat 0 is, worden er geen wijzigingen aangebracht in de sorteervolgorde van de twee waarden.

Voorbeeld:

De vergelijkingsfunctie vergelijkt alle waarden in de array, twee waarden tegelijk (a, b).

Bij het vergelijken van 40 en 100 sort()roept de methode de vergelijkingsfunctie aan (40, 100).

De functie berekent 40 - 100 (a - b), en aangezien het resultaat negatief is (-60), zal de sorteerfunctie 40 sorteren als een waarde lager dan 100.

U kunt dit codefragment gebruiken om te experimenteren met numeriek en alfabetisch sorteren:

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}

function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

Een array in willekeurige volgorde sorteren

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});


De Fisher Yates-methode

Het bovenstaande voorbeeld, array .sort(), is niet nauwkeurig, het geeft de voorkeur aan sommige getallen boven de andere.

De meest populaire correcte methode heet de Fisher Yates shuffle en werd al in 1938 geïntroduceerd in de datawetenschap!

In JavaScript kan de methode hiernaar worden vertaald:

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * i)
  let k = points[i]
  points[i] = points[j]
  points[j] = k
}


Vind de hoogste (of laagste) arraywaarde

Er zijn geen ingebouwde functies voor het vinden van de maximale of minimale waarde in een array.

Nadat u echter een array hebt gesorteerd, kunt u de index gebruiken om de hoogste en laagste waarden te verkrijgen.

Oplopend sorteren:

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

Aflopend sorteren:

Voorbeeld

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

Het sorteren van een hele array is een zeer inefficiënte methode als u alleen de hoogste (of laagste) waarde wilt vinden.


Math.max() gebruiken op een array

U kunt gebruiken Math.max.applyom het hoogste getal in een array te vinden:

Voorbeeld

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}

Math.max.apply(null, [1, 2, 3])is gelijk aan Math.max(1, 2, 3).


Math.min() gebruiken op een array

U kunt gebruiken Math.min.applyom het laagste getal in een array te vinden:

Voorbeeld

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

Math.min.apply(null, [1, 2, 3])is gelijk aan Math.min(1, 2, 3).


Mijn min./max. JavaScript-methoden

De snelste oplossing is om een ​​"home made" methode te gebruiken.

Deze functie doorloopt een array en vergelijkt elke waarde met de hoogste gevonden waarde:

Voorbeeld (Max zoeken)

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}

Deze functie doorloopt een array en vergelijkt elke waarde met de laagste gevonden waarde:

Voorbeeld (Vind min)

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}


Objectmatrices sorteren

JavaScript-arrays bevatten vaak objecten:

Voorbeeld

const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

Zelfs als objecten eigenschappen van verschillende gegevenstypen hebben, kan de sort()methode worden gebruikt om de array te sorteren.

De oplossing is om een ​​vergelijkingsfunctie te schrijven om de eigenschapswaarden te vergelijken:

Voorbeeld

cars.sort(function(a, b){return a.year - b.year});

Het vergelijken van stringeigenschappen is iets ingewikkelder:

Voorbeeld

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

Volledige matrixreferentie

Ga voor een volledige array-referentie naar onze:

Volledige JavaScript-arrayreferentie .

De referentie bevat beschrijvingen en voorbeelden van alle array-eigenschappen en -methoden.

Test jezelf met oefeningen

Oefening:

Gebruik de juiste array-methode om de fruitsarray alfabetisch te sorteren.

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