목차
- array.sort() 예제 - 문자열 오름차순 (=순차) 정렬
- array.sort() 예제 - 문자열 내림차순 (=역순) 정렬
- array.sort() 정의
- array.sort() 구문
- array.sort() 예제 - 숫자 오름차순 (=순차) 정렬
- array.sort() 예제 - 숫자 내림차순 (=역순) 정렬
- array.sort() 예제 - 객체 정렬
- 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
