Maison > interface Web > js tutoriel > Comment trier un tableau d'objets à l'aide de plusieurs champs en JavaScript ?

Comment trier un tableau d'objets à l'aide de plusieurs champs en JavaScript ?

DDD
Libérer: 2024-12-25 18:37:10
original
693 Les gens l'ont consulté

How can I sort an array of objects using multiple fields in JavaScript?

Tri multi-champs de tableaux d'objets

Dans les cas où un tri est requis en fonction de plusieurs champs dans un tableau d'objets, un tri en chaîne une approche peut être employée. Cette méthode consiste à comparer les valeurs de chaque champ dans l'ordre, jusqu'à ce qu'une différence non nulle soit obtenue.

Mise en œuvre

Considérez le tableau d'objets suivant :

var homes = [
    {"h_id":"3", "city":"Dallas", "state":"TX", "zip":"75201", "price":"162500"},
    {"h_id":"4", "city":"Bevery Hills", "state":"CA", "zip":"90210", "price":"319250"},
    {"h_id":"6", "city":"Dallas", "state":"TX", "zip":"75000", "price":"556699"},
    {"h_id":"5", "city":"New York", "state":"NY", "zip":"00010", "price":"962500"}
];
Copier après la connexion

Pour trier ce tableau en fonction de la ville (ascendant) puis du prix (décroissant), utilisez le tri suivant fonction :

data.sort(function (a, b) {
    return a.city.localeCompare(b.city) || b.price - a.price;
});
Copier après la connexion

Explication

La fonction de tri prend un rappel comme argument, qui compare deux objets a et b. Il renvoie une valeur qui détermine l'ordre des éléments :

  • Si a.city.localeCompare(b.city) est inférieur à zéro, a est placé avant b.
  • Si a.city.localeCompare(b.city) est supérieur à zéro, b est placé avant a.
  • Si a.city.localeCompare(b.city) est égal à zéro, b.price - a.price est utilisé pour comparer les prix. Une valeur positive place b avant a et une valeur négative place a avant b.

Exemple de sortie

Après le tri, le tableau des maisons est réorganisé comme suit :

[{
    "h_id": "3",
    "city": "Dallas",
    "state": "TX",
    "zip": "75201",
    "price": "162500"
},
{
    "h_id": "6",
    "city": "Dallas",
    "state": "TX",
    "zip": "75000",
    "price": "556699"
},
{
    "h_id": "4",
    "city": "Bevery Hills",
    "state": "CA",
    "zip": "90210",
    "price": "319250"
},
{
    "h_id": "5",
    "city": "New York",
    "state": "NY",
    "zip": "00010",
    "price": "962500"
}]
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal