• Q&A
  • 회원가입
  • 로그인

[Array] JS - sort() 메서드 ★ - 배열오름차순정렬 (= 오름차순배열정렬 = 소트메서드)

394  

sort() 정의

 

배열 요소를 자체적으로 정렬. (기본 정렬 순서: 오름차순.)

배열 요소를 문자열로 변환 후, UTF-16 코드 단위 값의 순서 비교.

 

 

sort() 구문

 

arr.sort(function(a,b))

 


[매개변수]

 

function(a, b)

선택. 두 요소를 비교하는 함수.

 

a

비교 위한 첫 번째 요소.

 

b

비교 위한 두 번째 요소.

 


[반환값]

 

오름차순으로 정렬된 배열 반환.

주의: 배열 자체가 정렬되며, 새 복사본 배열 생성 X.

 

 


sort() 예제 - 문자열 오름차순 (= 순차) 정렬

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var code = ["HTML", "CSS", "JS", "PHP", "SQL"];

document.getElementById("demo").innerHTML = code;


function homzzang() {

  code.sort();

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과보기

결과값: CSS,HTML,JS,PHP,SQL

주의: sort()는 값을 문자열의 유니코드 포인트 기준으로 정렬. 따라서, 숫자 정렬할 땐 별도의 비교함수 필요.

 

sort() 예제 - 문자열 내림차순 (= 역순) 정렬

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var code = ["HTML", "CSS", "JS", "PHP", "SQL"];

document.getElementById("demo").innerHTML = code;


function homzzang() {

  code.sort();

  code.reverse();

  document.getElementById("demo").innerHTML = code;

}

</script>

 

결과보기

결과값: SQL,PHP,JS,HTML,CSS

주의: 문자열 역순 정렬 경우, sort() 실행 후 reverse() 실행.

 

sort() 예제 - 숫자 오름차순 (= 순차) 정렬

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var nums = [30, 50, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = nums;  


function homzzang() {

  nums.sort(function(a, b){return a - b});

  document.getElementById("demo").innerHTML = nums;

}

</script>

 

결과보기

결과값: 1,5,10,25,30,50

 

sort() 예제 - 숫자 내림차순 (역순) 정렬

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

var nums = [30, 50, 1, 5, 25, 10];

document.getElementById("demo").innerHTML = nums;  


function homzzang() {

  nums.sort(function(a, b){return b - a});

  document.getElementById("demo").innerHTML = nums;

}

</script>

 

결과보기

결과값: 50,30,25,10,5,1

 

sort() 예제 - 객체 정렬

 

<script>

var mbs = [

  { name: 'Eee', age: 20 },

  { name: 'Sss', age: 30 },

  { name: 'Aaa', age: 40 },

  { name: 'Ttt', age: -10 },

  { name: 'Mmm', age: 10 },

  { name: 'Zzz', age: 30 }

];


// age 기준 오름차순 정렬

mbs.sort(function (a, b) {

  return a.age - b.age;

});

console.log(mbs);


// name 기준 오름차순 정렬

mbs.sort(function(a, b) {

  var nameA = a.name.toUpperCase(); // 대소문자 무시

  var nameB = b.name.toUpperCase(); // 대소문자 무시

  if (nameA < nameB) {

    return -1;

  }

  if (nameA > nameB) {

    return 1;

  }

  return 0;

});

console.log(mbs);

</script>

 

결과보기

 

 

PS.

 

mdn sort

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 


 

 


찾아주셔서 감사합니다. Since 2012