혼합된 영숫자 요소가 포함된 배열에 대해 JavaScript에서 자연 정렬 알고리즘을 어떻게 구현합니까?

Susan Sarandon
풀어 주다: 2024-11-09 16:06:02
원래의
962명이 탐색했습니다.

How do you implement a natural sort algorithm in JavaScript for arrays containing mixed alphanumeric elements?

숫자 및 알파벳을 사용한 배열 요소의 자연 정렬

숫자 값과 알파벳 문자가 포함된 배열 요소의 순서를 결정하는 것은 어려울 수 있습니다. 이 시나리오를 처리하려면 실제 값을 기준으로 요소를 정렬하는 자연스러운 정렬이 필요합니다.

샘플 배열 및 원하는 결과

다음 입력 배열을 고려하세요.

["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;
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿