Array.prototype.sort

../aubade/lecon-139.jpg

Editée le : 2020-04-29

Array.prototype.sort()

Array.sort() permet divers tris sur les Array.

Table des matières ici

Fonctionnement de Array.sort()

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort

 La méthode la plus simple consiste à écrire:

var s = [ "matin", "après-midi", "soir", "nuit" ];
document.write( s.sort() );

Tri alphabétique croissant

 var tab = [1,2,3,4,2,5,10];
document.write( tab.slice() );

 aucun tri n'est effectué

 Pour effectuer certains tri, nous aurons donc besoin d'une autre forme d'écriture.
Fort heureusement, il est possible de joindre en paramètre une fonction de tri à slice()

Exemple de fonction de tri jointe à slice()

 

 code javascript

 exemple de tri

 Commentaires

var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
var t = items.sort((a, b) => a - b);  
document.write( _.stringifyObject( t ) );

  • tri alphbétique croissant
  • le tri reste imparfait suite à la présence de caractères accentués.
var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
var t = items.sort((a, b) => a.localeCompare(b));   
document.write( _.stringifyObject( t ) );

  • tri alphbétique croissant correct

 

 

 

var tab = [1,2,3,4,2,5,6];
var t =  tab.sort((a, b) => a - b);
document.write( _.stringifyObject( t ) );

  • tri numérique croissant
var tab = [1,2,3,4,2,5,6];
var t =  tab.sort((a, b) => b - a);
document.write( _.stringifyObject( t ) );

  • tri numérique décroissant

 

 

 

var DVD = [ [2,'D','releasedate2','details2'], [1,'B','releasedate1','details1'], [4,'E','releasedaten','detailsn'], [4,'C','releasedaten','detailsn'], [30,'F','releasedaten','detailsn'], [29,'G','releasedaten','detailsn'], [3,'A','releasedatea','detailsa'] ];

var t = DVD.sort((a, b) => a[1].localeCompare(b[1]) );
document.write( _.stringifyObject( t ) );

  • Array 2D
  • cri croissant sur la colonne 1
  • pour mémoire la col 1 est la deuxième colonne
var t = DVD.sort((a, b) => a[1].localeCompare(b[1]) ||  a[0] - b[0]);
document.write( _.stringifyObject( t ) );

  • Array 2D
  • cri croissant sur la colonne 1
  • puis tri croissant sur la col 0 (la première en fait)

 

 

 

var employees = [ { firstName: "Julie", lastName: "Choisy", age: 43, gender: "F"}, { firstName: "Sophie", lastName: "Durant", age: 23, gender: "F" }, { firstName: "Jean", lastName: "Dupont", age: 34, gender: "M" }, { firstName: "Pierre", lastName: "Martin", age: 40, gender: "M" }, { firstName: "Dimitri", lastName: "Marcel", age: 54, gender: "M" } ];

var t = employees.sort((a, b) => a.age - b.age);  
document.write( _.stringifyObject( t ) );

  • Array 2D avec {}
  • tri croissant sur le champ age
var t = employees.sort((a, b) => a.lastName.localeCompare( b.lastName ) || a.age - b.age);  
document.write( _.stringifyObject( t ) );

  • Array 2D avec {}
  • tri croissant sur la champ lastName
  • puis tri croissant sur le champ age

 

 

 

var dev = [['1','6'],   ['1','5'],   ['2','3'],   ['0','3']];
var t = dev.sort((a, b) => (a[1].localeCompare( b[1]) ) );
document.write( _.stringifyObject( t ) );

  • Array 2D
  • tri ASC, croissant col 1
 var t = dev.sort((a, b) => (a[1].localeCompare( b[1] ) ) || (a[0].localeCompare( b[0] ) ) );
document.write( _.stringifyObject( t ) );

 

  •  Array 2D
  • tri ASC, croissant col 1
  • puis tri ASC col 0
 dev.sort((a, b) => (a[1] - b[1]) || (a[0] - b[0]));
document.write( _.stringifyObject( dev ) );

 

  •   Array 2D
  • tri ASC, croissant col 1
  • puis tri ASC col 0

 

 

 

 

Conclusion

Pour obtenir des tris corrects il faut:

 

Compatibilité de la page web

Méthode

../images/idea.png ../images/warning.gif ../images/stop.png ../images/sensinterdit.png ../images/danger.png

../images/firefox_22.gif

Firefox: 52 et +

../images/ie_22.gif

Edge

../images/chrome_22.gif

Chrome: 60 et +

../images/opera_22.gif

Opéra: 49 et +

../images/ie_22.gif

IE8 non testé

../images/safari_22.gif

Safari non testé

Vous pouvez charger la bibliothèque cnx jQuery Addons comme ceci entre vos balises <head>
<script src="../dossier/cnx.version.js"></script>
Dossier est le nom du répertoire où vous avez placé le fichier cnx; et cnx.version.js le nom de ce fichier.
Pour nous contacter: claudecnx@blanquefort.net