본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript

(기본/기초) Javascript 배열 정렬, Javascript sort array

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 12. 12.

 

자바스크립트에서 배열의 정렬은 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;
});

 

* 익명함수에서 계산식의 부호를 반대로 하면 오름차순 -> 내림차순의 개념이 된다.

 

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글