자바스크립트에서 배열의 정렬은 sort 라는 함수를 통해서 할 수 있다.
sort라는 함수는 일반 함수처럼 사용 할 수 있으며, 단순한 기능 뿐만 아니라 익명함수를 넣어주면 사용자가 지정한 옵션에 따라 데이터를 정렬 할 수 있다.
1. 단순 1차원 배열 정렬
var month = ['March', 'Jan', 'Feb', 'Dec'];
month.sort();
console.log(month);
//순서 : Dec, Feb, Jan, March --> 알파벳 순서로 정렬
var array = [1, 30, 4, 21, 1000];
array.sort();
console.log(array);
//순서 : 1, 1000, 21, 30, 4 --> 앞자리가 1부터 정렬됨. 크기순으로 되지 않음.
var array2 = [1, 30, 4, 21, 1000];
array2.sort(function(a, b) { //이렇게 익명함수를 넣어서 정렬 규칙을 재 정의 할 수 있다.
return b - a;
});
console.log(array2);
//순서 : 1000, 30, 21, 4, 1 --> 크기순서로 정렬됨
2. json 형태의 값이 있는 데이터 정렬
- 단순 sort 만 사용해서는 뭘 해야되는지 모르기 때문에 정렬이 되지 않는다.
- 익명함수에서 아래처럼 조건을 주어 정렬을 해 주어야 한다.
//출력 결과는 그대로 나온다...단순 sort 만으로는 뭘 해야되는지 모르기 때문이다.
var jsn = [{number:3, text:'abcd'}, {number:2, text:'zzz'}, {number:4, text:'efg'}];
jsn.sort();
//number를 기준으로 정렬하기
jsn.sort(function(a, b) {
return a.number < b.number ? -1 : a.number > b.number ? 1 : 0;
});
//text를 기준으로 정렬하기
jsn.sort(function(a, b) {
return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
});
* 익명함수에서 계산식의 부호를 반대로 하면 오름차순 -> 내림차순의 개념이 된다.
반응형
'Javascript > [기초] Javascript' 카테고리의 다른 글
Javascript json array loop, for (자바스크립트 json 배열 반복문) Object for Object loop (0) | 2020.01.21 |
---|---|
Javascript 전개 연산자(... 문법, dot dot dot, Spread operator tricks) (0) | 2020.01.10 |
(기본/기초) Jquery checkbox, jquery 체크박스, 제이쿼리 체크박스 (0) | 2019.12.06 |
(기본/기초) Jquery select option tag, html select option 가져오기 (0) | 2019.11.08 |
(기본/기초) javascript setTimeout setInterval clearInterval (0) | 2019.11.08 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글