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

[Array] JS - sort() 메서드 ★ - 배열오름차순정렬 (= 오름차순배열정렬 = 소트메서드) ※ shuffle함수 = 셔플함수

목차
  1. sort() 예제 - 문자열 오름차순 (=순차) 정렬
  2. sort() 예제 - 문자열 내림차순 (=역순) 정렬
  3. sort() 정의
  4. sort() 구문
  5. sort() 예제 - 숫자 오름차순 (=순차) 정렬
  6. sort() 예제 - 숫자 내림차순 (=역순) 정렬
  7. sort() 예제 - 객체 정렬
  8. sort() 예제 - 배열 순서 랜덤 적용 (= shuffle)

 

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() 정의 

 

배열 요소를 자체적으로 정렬.

 



1.

  • 기본 정렬 순서: 오름차순
  • 배열 요소를 문자열로 변환 후, UTF-16 코드 단위 값의 순서 비교.

  

2. MDN sort() 예제 보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

 

sort() 구문

 

arr.sort(function(a,b))

 


[매개변수]

 

function(a, b)

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

  • a : 비교 위한 첫 번째 요소. 
  • b : 비교 위한 두 번째 요소.

 


[반환값]

 

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

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

 

 

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>

 

결과보기

 

sort() 예제 - 배열 순서 랜덤 적용 (= shuffle)

※ JS엔 shuffle() 함수 존재 X (∴ 아래 사용자정의함수 필요.)

 

function shuffle(array) {

    array.sort(() => Math.random() - 0.5);

 

var nums = [1, 2, 3];

shuffle(nums);

 

console.log(nums);

 

결과보기 

강한남v 님 (220217) https://sir.kr/qa/449765

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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