如何在 JavaScript 中为包含混合字母数字元素的数组实现自然排序算法？

使用数字和字母对数组元素进行自然排序

确定包含数字值和字母字符的数组元素的顺序可能具有挑战性。需要使用自然排序来处理这种情况，它根据元素的真实值来排列元素。

示例数组和所需结果

考虑以下输入数组：

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

所需的排序顺序是：

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

朴素排序方法

一个简单的比较函数，如提供的函数，仅根据初始部分（2 个字母）对元素进行排序，并且忽略数字部分：

function compare(a, b) {
  if (a  b) return 1;
  return 0;
}

自然排序实现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;
}

此函数将每个元素拆分为对数组，其中第一个元素是数字（如果没有数字则为无穷大）并且第二个元素是字符串：

["IL0 Foo"] -> [["0", "IL"], ["Foo", ""]]
["PI0 Bar"] -> [["0", "PI"], ["Bar", ""]]

比较逻辑然后一对一地进行比较，给予优先级为数值。如果数值相等，则使用 localeCompare 比较字符串。

示例用法和结果

使用 naturalCompare 函数对示例数组进行排序：

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"]

以上是如何在 JavaScript 中为包含混合字母数字元素的数组实现自然排序算法？的详细内容。更多信息请关注PHP中文网其他相关文章！