Maison >interface Web >js tutoriel >Comment trier un tableau avec des éléments contenant à la fois des chaînes et des nombres dans un ordre naturel, comme « img12.png » et « img10.png » ?

Comment trier un tableau avec des éléments contenant à la fois des chaînes et des nombres dans un ordre naturel, comme « img12.png » et « img10.png » ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-16 15:53:17956parcourir

How do you sort an array with elements containing both strings and numbers in a natural order, like

Tri naturel des éléments d'un tableau avec des composants de chaîne et numériques

Dans certains cas, nous rencontrons des tableaux contenant des éléments qui suivent un format particulier, comme sous forme de chaînes avec des nombres incorporés. Trier de tels tableaux dans un ordre logique, appelé « tri naturel », présente un défi.

Défi

Considérez un tableau comme :

["IL0 Foo", "PI0 Bar", "IL10 Baz", "IL3 Bob says hello"]

Pour atteindre le résultat souhaité tri :

["IL0 Foo", "IL3 Bob says hello", "IL10 Baz", "PI0 Bar"]

Solution

Le tri naturel nécessite une fonction de comparaison qui prend en compte à la fois les composants numériques et textuels au sein de chaque élément. Voici une implémentation JavaScript :

function naturalCompare(a, b) {
    var ax = [], bx = [];

    a.replace(/(\d+)|(\D+)/g, function(_, , ) { ax.push([ || Infinity,  || ""]) });
    b.replace(/(\d+)|(\D+)/g, function(_, , ) { bx.push([ || Infinity,  || ""]) });

    while(ax.length && bx.length) {
        var an = ax.shift();
        var bn = bx.shift();
        var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
        if(nn) return nn;
    }

    return ax.length - bx.length;
}

Explication

  • La fonction remplace tous les chiffres ou non-chiffres par un tableau de sous-tableaux.
  • Les éléments de chaque sous-tableau représentent les composants numériques et textuels de la sous-chaîne correspondante.
  • Le La fonction parcourt les sous-tableaux des deux chaînes, en comparant d'abord les valeurs numériques, puis les valeurs textuelles.
  • Si une comparaison numérique n'est pas concluante, la fonction effectue une comparaison lexicographique des composants textuels.
  • La propagation entre les longueurs des sous-tableaux restants pour chaque chaîne détermine le naturel commande.

Exemple

test = [
    "img12.png",
    "img10.png",
    "img2.png",
    "img1.png",
    "img101.png",
    "img101a.png",
    "abc10.jpg",
    "abc10",
    "abc2.jpg",
    "20.jpg",
    "20",
    "abc",
    "abc2",
    ""
];

test.sort(naturalCompare)

Le tableau trié serait :

["", "20", "20.jpg", "abc", "abc2", "abc2.jpg", "abc10", "abc10.jpg", "img1.png", "img2.png", "img10.png", "img12.png", "img101.png", "img101a.png"]

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!

Déclaration:
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