Maison > interface Web > js tutoriel > Comment puis-je trier les propriétés des objets JavaScript en fonction de leurs valeurs ?

Comment puis-je trier les propriétés des objets JavaScript en fonction de leurs valeurs ?

Susan Sarandon
Libérer: 2024-12-25 16:09:24
original
403 Les gens l'ont consulté

How Can I Sort JavaScript Object Properties by Their Values?

Tri des propriétés d'objet par valeurs

Le tri des propriétés d'un objet en fonction de leurs valeurs en JavaScript peut être réalisé grâce à une solution de contournement ingénieuse. Plutôt que de nous fier à l'ordre des propriétés d'objet dépendant de l'implémentation, nous pouvons les convertir en tableau, trier le tableau et recréer l'objet.

Pour ce faire, nous déplaçons les propriétés de l'objet dans un tableau à l'aide d'un loop :

let sortable = [];
for (var vehicle in maxSpeed) {
    sortable.push([vehicle, maxSpeed[vehicle]]);
}
Copier après la connexion

Une fois sous forme de tableau, nous pouvons utiliser la fonction de tri pour trier les éléments par valeur :

sortable.sort(function(a, b) {
    return a[1] - b[1];
});
Copier après la connexion

Cela donne un tableau dans ordre trié :

// [["bike", 60], ["motorbike", 200], ["car", 300],
// ["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]
Copier après la connexion

À partir du tableau trié, nous pouvons reconstruire l'objet tout en préservant l'ordre souhaité :

let objSorted = {}
sortable.forEach(function(item){
    objSorted[item[0]]=item[1]
})
Copier après la connexion

Alternativement, si ES8 est disponible, nous pouvons utiliser l'objet. entrées et méthodes de réduction pour transformer l'objet en tableau :

const sortable = Object.entries(maxSpeed)
    .sort(([,a],[,b]) => a-b)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
Copier après la connexion

Cette approche reste une solution de contournement en raison de bizarreries d'implémentation, et il faut éviter en s'appuyant sur l'ordre des propriétés des objets en JavaScript.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal