'img12.png' 및 'img10.png'와 같이 문자열과 숫자가 모두 포함된 요소가 있는 배열을 자연 순서로 정렬하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

'img12.png' 및 'img10.png'와 같이 문자열과 숫자가 모두 포함된 요소가 있는 배열을 자연 순서로 정렬하려면 어떻게 해야 합니까?

Mary-Kate Olsen

풀어 주다： 2024-12-16 15:53:17

원래의

949명이 탐색했습니다.

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

로그인 후 복사

설명

이 함수는 모든 숫자 또는 숫자가 아닌 숫자를 하위 배열 배열로 바꿉니다.
각 하위 배열의 요소는 해당 배열의 숫자 및 텍스트 구성 요소를 나타냅니다. 하위 문자열.
이 함수는 두 문자열의 하위 배열을 반복하여 숫자 값을 먼저 비교한 다음 텍스트 값을 비교합니다.
숫자 비교 결과가 만족스럽지 않으면 함수는 텍스트 구성 요소의 사전식 비교를 수행합니다. .
각 문자열의 나머지 하위 배열 길이 사이의 확산에 따라 자연적인 배열이 결정됩니다.

예

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