ホームページ >ウェブフロントエンド >jsチュートリアル >「img12.png」と「img10.png」のように、文字列と数値の両方を含む要素を含む配列を自然な順序で並べ替えるにはどうすればよいですか?
文字列コンポーネントと数値コンポーネントを含む配列要素の自然な並べ替え
場合によっては、次のような特定の形式に従う要素を含む配列が発生することがあります。数値が埋め込まれた文字列として。このような配列を論理的な順序で並べ替える (「自然な並べ替え」と呼ばれる) ことには、課題が伴います。
課題
次のような配列を考えてみましょう。
["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; }
説明
例
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 中国語 Web サイトの他の関連記事を参照してください。