JavaScript : trier un tableau d'objets par valeur de propriété

Tri des objets JavaScript par propriété de chaîne

Le tri de tableaux d'objets est une tâche courante en JavaScript, en particulier lorsque vous travaillez avec des données qui doivent être affichées dans un ordre spécifique. Un scénario typique consiste à trier un tableau d'objets en fonction d'une valeur de propriété de chaîne, telle qu'un nom de famille ou un titre.

Dans cet article, nous verrons comment trier un tableau d'objets JavaScript en fonction de la valeur d'une propriété de chaîne. Nous examinerons l'utilisation de la méthode `sort()` et verrons si des étapes supplémentaires, comme l'ajout d'une méthode `toString()` aux objets, sont nécessaires.

Explication détaillée du tri des objets JavaScript

Les scripts fournis ci-dessus sont conçus pour trier un tableau d'objets JavaScript en fonction de la valeur d'une propriété de chaîne appelée last_nom. Dans le premier exemple, nous utilisons le sort(function(a, b) {...}) méthode, qui nous permet de définir une fonction de tri personnalisée. Cette fonction compare le last_nom propriété de chaque objet. Si le premier objet last_nom est inférieur à celui du deuxième objet last_nom, il renvoie -1, indiquant que le premier objet doit précéder le second. Si le premier objet last_nom est supérieur, il renvoie 1, ce qui signifie que le premier objet doit venir après le second. S'ils sont égaux, il renvoie 0, indiquant que leurs positions doivent rester inchangées.

Le deuxième script utilise une syntaxe ES6 plus concise. Le localeCompare() méthode est employée dans le sort() fonction pour comparer les last_nom propriétés des objets. Cette méthode renvoie un nombre qui indique si une chaîne vient avant, après ou est identique à une autre chaîne dans les paramètres régionaux actuels. Le console.log() La fonction est utilisée dans les deux scripts pour afficher le tableau trié sur la console pour vérification. Les deux méthodes trient efficacement le tableau d'objets selon le last_nom propriété, montrant comment gérer le tri des propriétés d’objet en JavaScript.

Tri d'un tableau d'objets par une propriété de chaîne en JavaScript

JavaScript côté client

var objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort(function(a, b) {
    if (a.last_nom < b.last_nom) {
        return -1;
    }
    if (a.last_nom > b.last_nom) {
        return 1;
    }
    return 0;
});

console.log(objs);

Tri d'un tableau d'objets par une propriété de chaîne à l'aide de la syntaxe ES6

Javascript ES6

const objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));

console.log(objs);

Tri d'un tableau d'objets par une propriété de chaîne en JavaScript

JavaScript côté client

var objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort(function(a, b) {
    if (a.last_nom < b.last_nom) {
        return -1;
    }
    if (a.last_nom > b.last_nom) {
        return 1;
    }
    return 0;
});

console.log(objs);

Tri d'un tableau d'objets par une propriété de chaîne à l'aide de la syntaxe ES6

Javascript ES6

const objs = [
    {first_nom: 'Laszlo', last_nom: 'Jamf'},
    {first_nom: 'Pig', last_nom: 'Bodine'},
    {first_nom: 'Pirate', last_nom: 'Prentice'}
];

objs.sort((a, b) => a.last_nom.localeCompare(b.last_nom));

console.log(objs);

Techniques avancées pour trier les objets en JavaScript

Lors du tri d'un tableau d'objets par une propriété de chaîne en JavaScript, il est essentiel de comprendre les subtilités de la propriété sort() méthode. Par défaut, le sort() La méthode trie les éléments sous forme de chaînes. Cela peut conduire à des résultats inattendus lorsqu'il s'agit de chiffres ou de caractères spéciaux. Pour garantir un tri précis, en particulier avec les propriétés de chaîne, vous devez utiliser une fonction de comparaison personnalisée. En plus de localeCompare(), une autre technique utile consiste à gérer le respect de la casse. La comparaison de chaînes de JavaScript est sensible à la casse par défaut, donc « a » sera considéré comme inférieur à « A ». Pour éviter cela, vous pouvez convertir toutes les chaînes en minuscules ou en majuscules dans votre fonction de comparaison.

Un autre aspect important à considérer est le tri selon plusieurs propriétés. Par exemple, si deux objets ont le même last_nom valeur, vous souhaiterez peut-être les trier davantage par first_nom. Ceci peut être réalisé en étendant la fonction de comparaison personnalisée pour inclure des conditions supplémentaires. Un tel tri à plusieurs niveaux garantit que les données sont classées de manière exhaustive, fournissant ainsi des résultats plus significatifs. En comprenant et en appliquant ces techniques de tri avancées, vous pouvez gérer efficacement des scénarios de tri de données plus complexes en JavaScript.

Questions courantes sur le tri des objets JavaScript

1. Comment trier un tableau d’objets par une propriété de chaîne ?
2. Utilisez le sort() méthode avec une fonction de comparaison personnalisée, utilisant localeCompare() pour la comparaison de chaînes.
3. Le tri JavaScript est-il sensible à la casse ?
4. Oui, par défaut. Convertissez les chaînes en minuscules ou en majuscules dans la fonction de comparaison pour éviter cela.
5. Comment gérer le tri selon plusieurs propriétés ?
6. Étendez la fonction de comparaison personnalisée pour inclure des conditions supplémentaires pour le tri par propriétés secondaires.
7. Avez-vous besoin d'ajouter un toString() méthode à vos objets pour le tri ?
8. Non, l'utilisation d'une fonction de comparaison personnalisée est suffisante.
9. Qu'est-ce que localeCompare() faire?
10. Il compare deux chaînes dans les paramètres régionaux actuels et renvoie un nombre indiquant leur ordre.
11. Pouvez-vous trier les objets par propriétés numériques en utilisant la même méthode ?
12. Oui, vous pouvez personnaliser la fonction de comparaison pour gérer également les comparaisons numériques.
13. Comment afficher le tableau trié ?
14. Utiliser console.log() pour imprimer le tableau trié sur la console pour vérification.
15. Quelle est la signification des valeurs de retour dans la fonction de comparaison ?
16. Ils déterminent l'ordre des éléments : -1 pour inférieur à, 1 pour supérieur à et 0 pour égal.

Conclusion du tri des objets en JavaScript

Le tri d'un tableau d'objets par une propriété de chaîne en JavaScript peut être réalisé efficacement à l'aide de l'outil sort() méthode avec une fonction de comparaison personnalisée. En tirant parti localeCompare() et en gérant le respect de la casse, vous pouvez garantir un tri précis et significatif des données. Comprendre ces techniques permet une meilleure manipulation et présentation des données, répondant ainsi facilement à des scénarios plus complexes. De plus, le tri selon plusieurs propriétés ajoute une autre couche de sophistication, rendant la sortie triée plus pertinente et organisée.