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

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

array.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()는 값을 문자열의 유니코드 포인트 기준으로 정렬. 따라서, 숫자 정렬 시 별도의 비교함수 필요.

array.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() 실행.

array.sort() 정의 

 

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

 

---

1.

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

  

2. cf.

• array.reverse() 메서드 - 배열 역순 정렬.
• 배열 내림차순 정렬 - array.sort() 메서드 적용 후, array.reverse() 메서드 적용.

 

3.

• ECMAScript1 (ES1: JavaScript 1997)
• 모든 브라우저 지원.

 

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

 

array.sort() 구문

 

arr.sort(function(a,b))

 

---

[매개변수]

 

function(a, b)

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

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

 

---

[반환값]

 

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

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

 

array.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)

array.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)

array.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>

 

결과보기

array.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