使用數(shù)字和字母對(duì)數(shù)組元素進(jìn)行自然排序

確定包含數(shù)字值和字母字符的數(shù)組元素的順序可能具有挑戰(zhàn)性。需要使用自然排序來(lái)處理這種情況，它根據(jù)元素的真實(shí)值來(lái)排列元素。

示例數(shù)組和所需結(jié)果

考慮以下輸入數(shù)組：

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

所需的排序順序是：

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

樸素排序方法

一個(gè)簡(jiǎn)單的比較函數(shù)，如提供的函數(shù)，僅根據(jù)初始部分（2 個(gè)字母）對(duì)元素進(jìn)行排序，并且忽略數(shù)字部分：

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

自然排序?qū)崿F(xiàn)JavaScript

要實(shí)現(xiàn)自然排序，可以使用以下函數(shù)：

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;
}

此函數(shù)將每個(gè)元素拆分為對(duì)數(shù)組，其中第一個(gè)元素是數(shù)字（如果沒(méi)有數(shù)字則為無(wú)窮大）并且第二個(gè)元素是字符串：

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

比較邏輯然后一對(duì)一地進(jìn)行比較，給予優(yōu)先級(jí)為數(shù)值。如果數(shù)值相等，則使用 localeCompare 比較字符串。

示例用法和結(jié)果

使用 naturalCompare 函數(shù)對(duì)示例數(shù)組進(jìn)行排序：

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)

排序后的數(shù)組將是：

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

以上是如何在 JavaScript 中為包含混合字母數(shù)字元素的數(shù)組實(shí)現(xiàn)自然排序算法？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！