Tutoriel JavaScript

JS ACCUEIL Présentation de JS JS Où aller Sortie JS Déclarations JS Syntaxe JS Commentaires JS Variables JS JS Let Const JS Opérateurs JS Arithmétique JS Affectation JS Types de données JS Fonctions JavaScript Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherche de chaîne JS Modèles de chaîne JS Numéros JS Méthodes de nombre JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const tableau JS Dates JS Formats de date JS Méthodes d'obtention de date JS Méthodes de définition de date JS JS Mathématiques JS Aléatoire Booléens JS Comparaisons JS Conditions JS Commutateur JS Boucle JS pour Boucle JS pour dans Boucle JS pour de Boucle JS pendant Pause JS Itérables JS Ensembles JS Cartes JS Type de JS Conversion de type JS JS au niveau du bit JS RegExp Erreurs JS Portée JS JS Levage Mode JS strict JS ce mot clé Fonction flèche JS Cours JS JSJSON Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performances JS Mots réservés JS

Versions JavaScript

Versions JavaScript JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historique JS

Objets JS

Définitions d'objet Propriétés de l'objet Méthodes d'objet Affichage d'objet Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

Fonctions JavaScript

Définitions des fonctions Paramètres de fonction Appel de fonction Appel de fonction Fonction Appliquer Fermetures de fonction

Cours JS

Introduction de classe Héritage de classe Classe Statique

JS asynchrone

Rappels JS JS asynchrone JS promet JS asynchrone/en attente

JS HTML DOM

Introduction DOM Méthodes DOM Documents DOM Éléments DOM HTML DOM Formulaires DOM DOM CSS Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds DOM

Nomenclature du navigateur JS

Fenêtre JS Écran JavaScript Emplacement JS Historique JS Navigateur JS Alerte contextuelle JS Calendrier JS Cookies JavaScript

API Web JS

Présentation de l'API Web API des formulaires Web API d'historique Web API de stockage Web API de travail Web API de récupération Web API de géolocalisation Web

JS AJAX

Introduction à AJAX AJAX XMLHttp Requête AJAX Réponse AJAX Fichier XML AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples AJAX

JSJSON

Présentation JSON Syntaxe JSON JSON contre XML Types de données JSON Analyse JSON Chaîne JSON Objets JSON Tableaux JSON Serveur JSON JSON PHP HTML JSON JSON JSONP

JS contre jQuery

Sélecteurs jQuery jQuery HTML jQuery CSS jQuery DOM

Graphiques JS

Graphiques JS Canevas JS JS Complot JS Chart.js Graphique Google JS JS D3.js

Exemples JS

Exemples JS JS HTML DOM Entrée HTML JS Objets HTML JS Événements HTML JS Navigateur JS Éditeur JavaScript Exercices JS Questionnaire JS Certificat JS

Références JavaScript

Objets JavaScript Objets DOM HTML


Tableaux de tri JavaScript


Trier un tableau

La sort()méthode trie un tableau par ordre alphabétique :

Exemple

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

Inverser un tableau

La reverse()méthode inverse les éléments d'un tableau.

Vous pouvez l'utiliser pour trier un tableau par ordre décroissant :

Exemple

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

Tri numérique

Par défaut, la sort()fonction trie les valeurs sous forme de chaînes .

Cela fonctionne bien pour les chaînes ("Apple" vient avant "Banana").

Cependant, si les nombres sont triés sous forme de chaînes, "25" est plus grand que "100", car "2" est plus grand que "1".

Pour cette raison, la sort()méthode produira un résultat incorrect lors du tri des nombres.

Vous pouvez résoudre ce problème en fournissant une fonction de comparaison :

Exemple

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

Utilisez la même astuce pour trier un tableau par ordre décroissant :

Exemple

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


La fonction de comparaison

Le but de la fonction de comparaison est de définir un ordre de tri alternatif.

La fonction de comparaison doit renvoyer une valeur négative, nulle ou positive, selon les arguments :

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

Lorsque la sort()fonction compare deux valeurs, elle envoie les valeurs à la fonction de comparaison et trie les valeurs en fonction de la valeur renvoyée (négative, zéro, positive).

Si le résultat est négatif aest trié avant b.

Si le résultat est positif best trié avant a.

Si le résultat est 0, aucune modification n'est apportée à l'ordre de tri des deux valeurs.

Exemple:

La fonction de comparaison compare toutes les valeurs du tableau, deux valeurs à la fois (a, b).

Lors de la comparaison de 40 et 100, la sort()méthode appelle la fonction de comparaison (40, 100).

La fonction calcule 40 - 100 (a - b), et puisque le résultat est négatif (-60), la fonction de tri triera 40 comme une valeur inférieure à 100.

Vous pouvez utiliser cet extrait de code pour tester le tri numérique et alphabétique :

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

Trier un tableau dans un ordre aléatoire

Exemple

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


La méthode Fisher Yates

L'exemple ci-dessus, array .sort(), n'est pas précis, il favorisera certains nombres par rapport aux autres.

La méthode correcte la plus populaire, appelée mélange de Fisher Yates, a été introduite dans la science des données dès 1938 !

En JavaScript, la méthode peut être traduite en ceci :

Exemple

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
}


Trouver la valeur de tableau la plus élevée (ou la plus basse)

Il n'y a pas de fonctions intégrées pour trouver la valeur max ou min dans un tableau.

Cependant, après avoir trié un tableau, vous pouvez utiliser l'index pour obtenir les valeurs les plus élevées et les plus basses.

Tri croissant :

Exemple

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

Tri décroissant :

Exemple

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

Trier un tableau entier est une méthode très inefficace si vous ne voulez trouver que la valeur la plus élevée (ou la plus basse).


Utiliser Math.max() sur un tableau

Vous pouvez utiliser Math.max.applypour trouver le nombre le plus élevé dans un tableau :

Exemple

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

Math.max.apply(null, [1, 2, 3])est équivalent à Math.max(1, 2, 3).


Utilisation de Math.min() sur un tableau

Vous pouvez utiliser Math.min.applypour trouver le plus petit nombre dans un tableau :

Exemple

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

Math.min.apply(null, [1, 2, 3])est équivalent à Math.min(1, 2, 3).


Mes méthodes JavaScript Min / Max

La solution la plus rapide est d'utiliser une méthode "maison".

Cette fonction parcourt un tableau en comparant chaque valeur à la valeur la plus élevée trouvée :

Exemple (Rechercher Max)

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

Cette fonction parcourt un tableau en comparant chaque valeur à la valeur la plus basse trouvée :

Exemple (Rechercher Min)

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


Tri des tableaux d'objets

Les tableaux JavaScript contiennent souvent des objets :

Exemple

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

Même si les objets ont des propriétés de différents types de données, la sort()méthode peut être utilisée pour trier le tableau.

La solution consiste à écrire une fonction de comparaison pour comparer les valeurs des propriétés :

Exemple

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

La comparaison des propriétés de chaîne est un peu plus complexe :

Exemple

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

Référence complète de la baie

Pour une référence Array complète, rendez-vous sur :

Référence complète du tableau JavaScript .

La référence contient des descriptions et des exemples de toutes les propriétés et méthodes Array.

Testez-vous avec des exercices

Exercer:

Utilisez la méthode Array appropriée pour trier le fruitstableau par ordre alphabétique.

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