[자바스크립트] sort,map,filter

var arr=[4,203,44,3,29];
arr.sort();

이런 array를 정렬하기 위한 sort메소드가 있다.

과연 잘 정렬되었을까?

정렬이 되긴 되었지만 우리가 기대하는 값이 나오지 않았다.

 

아마 맨 앞 문자 기준으로 정렬이 되지 않았나 싶다.

 

그럼 숫자순으로 정렬하려면 어떻게 해야할까?

 

arr.sort(function(a,b){
    return a - b;
});

이렇게 sort안에 콜백함수를 넣어주면 된다.

이 콜백함수는 자바에서 쓰던 compareTo와 비슷하다고 보면 될 것 같다.

리턴값이 음수인지, 양수인지에 따라 위치가 바뀌는데,

a-b를 리턴하면 오름차순 정렬이 된다.

 

var c_arr=['a','c','d','b'];

c_arr.sort(function(o1,o2){
    if(o1<o2)
        return -1;
    else if(o1>o2)
        return 1;
    else
        return 0;
})

문자 정렬은 이렇게 했다.

문자는 비교연산이 가능한데, 이를 이용해 작성했다.

---

var arr=[7,3,5,2,49];

var new_arr=arr.filter(function(a){
    return a<4;
});

필터 기능이다.

위 예시는 arr에서 4보다 작은 요소들만 new arr에 남기는 것이다.

필터와 맵은 꼭 새 변수에 저장해주어야 한다.

 

var new_arr=arr.map(function(a){
    return a*4;
});

맵은 모든 요소에 일괄적용시키는 것인데

위 예시는 모든 요소에 4를 곱하여 new arr에 저장하는 것이다.

꼭 새 변수에 저장해야 한다.

---

가격순 정렬하기

$('#sort-price').click(function () {
    products.sort(function (o1, o2) {
        return o1.price - o2.price;
    });

    $('.row').eq(0).html('');
    for (var i = 0; i < products.length; i++) {
        makeCard(products[i]);
    }
});

가격순 정렬 버튼을 누르면,

물품을 가격순으로 정렬하고,

.row에 있던 html을 모두 지운다음,

가격순으로 카드를 생성하면 된다.

 

---

6만원 이하 물품만 보기

$('#filter-price').click(function(){
    var new_arr=products.filter(function(a){
        return a.price<=60000;
    });
    
    $('.row').html('');
    for (var i = 0; i < new_arr.length; i++) {
            makeCard(new_arr[i]);
        }
    
})

---

가나다/다나가 순 정렬

var sortABCcount = 0;
$('#sort-abc').click(function () {
    sortABCcount++;
    if (sortABCcount % 2 == 1) {
        $(this).html('다나가 순으로 변경하기');
        products.sort(function (o1, o2) {
            if (o1.title < o2.title)
                return -1;
            else if (o1.title > o2.title)
                return 1;

            else
                return 0;
        });
        $('.row').eq(0).html('');
        for (var i = 0; i < products.length; i++) {
            makeCard(products[i]);
        }

    }
    else{
        $(this).html('가나다 순으로 변경하기');
         products.sort(function (o2, o1) {
            if (o1.title < o2.title)
                return -1;
            else if (o1.title > o2.title)
                return 1;

            else
                return 0;
        });
        $('.row').eq(0).html('');
        for (var i = 0; i < products.length; i++) {
            makeCard(products[i]);
        }
    }


});

한번 누르면 가나다순 정렬되고, 버튼이 "다나가순으로 변경하기"로 바뀐다.