首页 >web前端 >js教程 >如何按自然顺序对包含字符串和数字的元素(例如'img12.png”和'img10.png”)进行排序?

如何按自然顺序对包含字符串和数字的元素(例如'img12.png”和'img10.png”)进行排序?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-16 15:53:17956浏览

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

使用字符串和数字组成的数组元素的自然排序

在某些情况下,我们会遇到包含遵循特定格式的元素的数组,例如作为嵌入数字的字符串。按逻辑顺序对此类数组进行排序(称为“自然排序”)是一项挑战。

挑战

考虑一个如下数组:

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

达到想要的效果排序:

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

解决方案

自然排序需要一个比较函数来考虑每个元素中的数字和文本部分。这是一个 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;
}

说明

  • 该函数用子数组数组替换任何数字或非数字。
  • 每个子数组的元素代表相应的数字和文本组件substring。
  • 该函数迭代两个字符串的子数组,首先比较数值,然后比较文本值。
  • 如果数字比较没有结果,则该函数对文本组件执行字典顺序比较.
  • 每个字符串的剩余子数组的长度之间的分布决定了自然排序。

示例

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)

排序后的数组将是:

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

以上是如何按自然顺序对包含字符串和数字的元素(例如'img12.png”和'img10.png”)进行排序?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn