Tri de tableau d'objet javascript

04/05/2009

Javascript est riche de méthodes en tout genre qui parfois nous laisse perplexe quant à ses possibilités. Notamment, ma dernière découverte en date, est le tri de tableau. Mais pas n’importe quel tableau: les tableaux d’objets.

En effet, un tri de tableau simple se fait de cette manière: var a = [4,6,7,2,10,1]; a.sort();

Mais voilà, j’ai un tableau d’objet et j’ai besoin de le classer selon une propriété particulière, regardons ce tableau: var a = [ {x:1, y:2, z:5}, {x:4, y:6, z:2}, {x:2, y:3, z:10}, {x:6, y:1, z:3} ]; Si j’ai envie de reclasser mes objets selon “z”, je vais devoir boucler dans mes valeurs et reclasser selon des algos bien particulier (tri à bulles, tri récursif…). Or javascript ne me permettra pas d’avoir la vitesse dont j’ai besoin sachant que la fonction “sort” exécutée par le moteur javascript en natif…

Et bien en fait, il y a plus optimal, plus simple et plus rapide ! Il suffit de donner en paramètre une fonction de tri qui prend 2 argument. Ces arguments seront en fait les éléments d’index “i” et “i+1”… Il nous suffit de retourner une valeur booléenne, ou un entier positif ou négatif. Pour notre exemple, voici la fonction:

function sortByZ(a,b){
    return b.z - a.z;
}

De ce fait, pour utiliser notre tri d’objets:

` var a = [ {x:1, y:2, z:5}, {x:4, y:6, z:2}, {x:2, y:3, z:10}, {x:6, y:1, z:3} ];

function sortByZ(a,b){ return b.z - a.z; } a.sort(sortByZ); `

La fonction sortByZ est envoyée par référence (car tout est objet en javascript). Mais vous pouvez tout aussi bien la passer anonymement:

` var a = [ {x:1, y:2, z:5}, {x:4, y:6, z:2}, {x:2, y:3, z:10}, {x:6, y:1, z:3} ];

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

`

Du coup, plus de déclaration, simplement la définition du tri à donner! Vous imaginez bien évidemment que la fonction peut être encore plus complexe… Le résultat est une vitesse d’exécution très appréciable et surtout une somme de code à taper en moins. Seule la comparaison doit être définie.

En espérant que cela vous serve !

Ça peut vous intéresser aussi


Jquery vs Mootools

Je suis en proie à Jquery depuis quelques semaines que ...


Mootools plus rapide que JQuery

C’est Thomas, un ancien collègue, qui a fait tomber ...


Titanium le développement révolutionnaire

Voilà des années que je me tue à le dire,...


Les closures javascript et la notion de classe

NodeJS, JQuery, Mootools, HTML5… le javascript s’est imposé. Mais un sujet encore ...

Merci de m'aider à financer mes services

Si vous avez apprécié cet article, je vous serai reconnaissant de m'aider à me payer une petite bière :)

Si vous voulez en savoir plus sur l'utilisation de flattr sur mon blog, lisez cette page: Ayez pitié de moi

Commentaires

Ajouter un commentaire

canvasdev - 09/03/2013

Un grand merci pour ma part aussi!

damien - 29/11/2010

Merci beaucoup, je ne savais pas qu’on pouvait atteindre comme ça les propriétés de l’objet. C’est parfait !

loic - 05/05/2010

MILLE MILLIARDS DE MILLE MERCIS

Ton billet a sauvé ma journée !!!

Loic www.loicaigon.com www.scriptopedia.org

Belo - 17/02/2010

Un grand merci. Je n’avais rien trouvé dans le O’REILLY à ce sujet.

Ajouter un commentaire

(*) Votre e-mail ne sera ni revendu, ni rendu public, ni utilisé pour vous proposer des mails commerciaux. Il n'est utilisé que pour vous contacter en cas de souci avec le contenu du commentaire, ou pour vous prévenir d'un nouveau commentaire si vous avez coché la case prévue à cet effet.