sort, map, filter 함수를 사용하여 정렬 버튼 만들기

우리가 쇼핑몰에서 검색을 할때, 낮은 가격 순으로 정렬할때가 있다.    → sort

또는, 3만원 이하의 상품만 보고 싶으면 3만원 이하를 필터로 걸때가 있다. → filter

혹은 글로벌 쇼핑몰에서 물건을 살때 (달러=>원화) 로 바뀌어서 가격을 등록해야 할때가 있다. →map

 

sort 

var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
  return a - b
});

console.log(어레이)

sort 함수는 문자열을 기준으로 정렬한다. 따라서, 수를 기준으로 정렬하고 싶다면, 위의 코드처럼 짜야 한다

참고로, sort 함수는 원본을 변형시키는 함수다.

 

<원리설명>

1. a, b는 array 안의 자료들입니다.

2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.

3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해줍니다.

4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줍니다. 

이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것입니다. 

 

 

 

Q. 문자정렬과 문자역순정렬은 어떻게 할까요?

var 어레이 = ['다', '가', '나'];

 

sort 함수 작동원리는

- a, b는 array안에 있던 자료들임

- return 우측이 양수면 a를 우측으로 보냄

- return 우측이 음수면 b를 우측으로 보냄 

- array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄

이렇습니다.

 

var 어레이 = ['다', '가', '나'];
  어레이.sort(function(a,b){
  if(a < b){
  return 1
  } else {
    return -1
  }

 

 

1.버튼누르면 다나가순 정렬은?

<div class="container my-3">
  <button class="btn btn-danger" id="sort1">다나가순정렬</button>
</div>

var products = [
  {id:0, price: 70000, title: 'Blossom Dress'},
  {id:1, price: 50000, title: 'Springfield Shirt'},
  {id:0, price: 70000, title: 'Black Monastery'}
  ];

$('#sort1').click(function(){
  
  products.sort(function(a, b){
    if (a.title < b.title) {
      return 1
    } else {
      return -1
    }
  });
  
  $('.row').html(''); //카드 다 없애주셈
  products.forEach((a, i)=>{
    var 템플릿 = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>가격 : ${products[i].price}</p>
      </div>`;
    $('.row').append(템플릿)
  })
});

 

 

 

2. 6만원이하 상품보기 버튼과 기능

<div class="container my-3">
  <button class="btn btn-danger" id="filter">6만원이하</button>
</div>

var products = [
  {id:0, price: 70000, title: 'Blossom Dress'},
  {id:1, price: 50000, title: 'Springfield Shirt'},
  {id:0, price: 70000, title: 'Black Monastery'}
  ];

//필터버튼을 클릭했을때, 6만원 이하인 상품을 필터로 거른다. 
//그후, 거른 배열을 기준으로 forEach를 사용해서 카드를 만든다.

$('#filter').click(function(){
 var newProducts = products.filter(function(item){
 return item.price <= 60000 //filter 은 원본배열 변경 x, sort는 원본배열 변경o
 })
 console.log(newProducts);

 $('.row').html(''); //카드 다 없애주셈
 newProducts.forEach((a, i)=>{
    var 템플릿 = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${newProducts[i].title}</h5>
        <p>가격 : ${newProducts[i].price}</p>
      </div>`;
    $('.row').append(템플릿)
  })

 

 

 

 

 

어쩌다 보니 버튼이 4개가 생김 ㅋㅋㅋ