[JavaScript] 배열 sort()

배열.sort()

대량의 데이터의 경우 정렬하기는 기본적인 기능입니다. 오름차순과 내림차순 정렬을 합니다.

자바스크립트 배열의 sort()메서드는 기본적으로 문자열 정렬을 지원합니다.

매개변수로 함수를 전달하면 함수 내용에 따라 정렬이 됩니다.

함수는 앞의 값이 클경우 양수를 같을경우 0을 뒤의 값이 클경우 음수를 리턴하도록 구현하면 됩니다.

const zodiac = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");

document.write(`띠(${zodiac.length}개) : ${zodiac} `);

// sort() : 배열의 요소를 정렬합니다. 인자로 정렬에 사용될 비교 함수를 줄수 있습니다.
// 매개변수가 없으면 알파벳순으로 오른차순으로 정렬합니다. 배열 자체가 변함

document.write("오름차순정렬 : " + zodiac.sort() + " ");

document.write("내림차순정렬 : " + zodiac.sort().reverse() + " ");

document.write("오름차순정렬 : " + zodiac.sort((s1, s2) => s1.localeCompare(s2) ) + " ");

document.write("내림차순정렬 : " + zodiac.sort((s1, s2) => s2.localeCompare(s1) ) + " ");

document.write("글자수 정렬 : " + zodiac.sort((s1, s2) => s1.length - s2.length ) + " <hr>");

요소 값이 숫자일 경우에도 문자열로 정렬됩니다. 다음과 같이 해야 숫자값으로 정렬을 수행합니다.

document.write("문자 오름차순 정렬 : " + ar.sort() + " ");

document.write("숫자 오름차순 정렬 : " + ar.sort((n, m)=> n-m) + " ");

document.write("숫자 내림차순 정렬 : " + ar.sort((n, m)=> m-n) + " ");

정렬 기분을 바꿀 수 있습니다. 함수의 내용을 잘 구성하면 됩니다.

names.sort((s1, s2)=> s1.charAt(1).localeCompare(s2.charAt(1)))

객체 배열도 정렬이 가능합니다.

let users = [

{name:'한사람', age:22},

{name:'한사람', age:18},

{name:'두사람', age:22},

{name:'두사람', age:18},

{name:'세사람', age:22},

{name:'네사람', age:18},

]

document.write(`원본(${users.length}명) : ${JSON.stringify(users)} `);

document.write(`정렬안됨(${users.length}명) : ${JSON.stringify(users.sort())} `);

document.write(`나이순 정렬(${users.length}명) : ${JSON.stringify(users.sort((o1, o2)=>o1.age-o2.age))} `);

const compare = (o1, o2)=>{

if(o1.age==o2.age){

return o1.name.localeCompare(o2.name);

}else{

return o2.age-o1.age;

}

document.write(`나이역순 이름순 정렬(${users.length}명) : ${JSON.stringify(users.sort(compare))} `);

ex10.html 파일을 다음과 같이 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript Array</title>
    <script>
        const zodiac = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");
        document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
        
        // sort() : 배열의 요소를 정렬합니다. 인자로 정렬에 사용될 비교 함수를 줄수 있습니다. 인자가 없으면 알파벳순으로 오른차순으로 정렬합니다. 배열 자체가 변함
        document.write("오름차순정렬 : " + zodiac.sort() + "<br>");
        document.write("내림차순정렬 : " + zodiac.sort().reverse() + "<br>");
        document.write("오름차순정렬 : " + zodiac.sort((s1, s2) => s1.localeCompare(s2) ) + "<br>");
        document.write("내림차순정렬 : " + zodiac.sort((s1, s2) => s2.localeCompare(s1) ) + "<br>");
        document.write("글자수 정렬 : " + zodiac.sort((s1, s2) => s1.length - s2.length ) + "<br><hr>");
        
 
        let rand = (min = 0, max = 100) => parseInt(Math.random() * (max - min + 1)) + min;
        let ar = [];
        for (let i = 0; i < 10; i++) ar.push(rand(1, 30));
        document.write(`${ar.length}개 : ${ar}<br>`);
 
        // 문자열 정렬이 됨
        document.write("문자 오름차순 정렬 : " + ar.sort() + "<br>"); 
        // 함수를 지정해야 숫자로 정렬됨 : 매개변수가 2개이고 앞의 값이크면 양수, 같으면 0, 적으면 음수가 리턴되게 만들어 줍니다. 
        document.write("숫자 오름차순 정렬 : " + ar.sort((n, m)=> n-m) + "<br>"); 
        document.write("숫자 내림차순 정렬 : " + ar.sort((n, m)=> m-n) + "<br>"); 
 
        document.write(`${ar.length}개 : ${ar}<br><hr>`);
        
        const names = "한놈,두시기,석삼,너구리,오징어,육계장,칠면조,팔다리,구두쇠,쨍그랑".split(",");
        document.write(`${names.length}개 : ${names}<br>`);
        document.write("오름차순정렬 : " + names.sort() + "<br>");
        document.write("두번째 글자로 오름차순정렬 : " + names.sort((s1, s2)=> s1.charAt(1).localeCompare(s2.charAt(1))) + "<br><hr>");
 
        let users = [
            {name:'한사람', age:22},
            {name:'한사람', age:18},
            {name:'두사람', age:22},
            {name:'두사람', age:18},
            {name:'세사람', age:22},
            {name:'네사람', age:18},
        ]
        document.write(`원본(${users.length}명) : ${JSON.stringify(users)}<br>`);
        document.write(`정렬안됨(${users.length}명) : ${JSON.stringify(users.sort())}<br>`);
        document.write(`나이순 정렬(${users.length}명) : ${JSON.stringify(users.sort((o1, o2)=>o1.age-o2.age))}<br>`);
        document.write(`이름순 정렬(${users.length}명) : ${JSON.stringify(users.sort((o1, o2)=>o1.name.localeCompare(o2.name)))}<br>`);
        const compare = (o1, o2)=>{
            if(o1.age==o2.age){
                return o1.name.localeCompare(o2.name);
            }else{
                return o2.age-o1.age;
            }
        }
        document.write(`나이역순 이름순 정렬(${users.length}명) : ${JSON.stringify(users.sort(compare))}<br>`);
    </script>
</head>
 
<body>
 
</body>
 
</html>
Colored by Color Scripter
cs

실행 결과 입니다.

'Front End > Javascript' 카테고리의 다른 글

[JavaScript] 배열 reduce(), reduceRight() (0)	2024.10.23
[JavaScript] 배열 map() (0)	2024.10.23
[JavaScript] 배열 filter(), reverse(), every(), some() (0)	2024.10.23
[JavaScript] 배열 slice(), splice() (0)	2024.10.23
[JavaScript] 배열 indexOf(), lastIndexOf(), find(), findIndex() (0)	2024.10.23

풀 스택 개발자 되기

[JavaScript] 배열 sort()

배열.sort()

'Front End > Javascript' 카테고리의 다른 글

티스토리툴바

[JavaScript] 배열 sort()

배열.sort()

'Front End > Javascript' 카테고리의 다른 글

'Front End/Javascript' Related Articles

티스토리툴바