sort, map, filter 함수 (2)

728x90

준비물

- 버튼 누르면
- products 안에 있는 자료들을 다나가순 정렬하고
- 카드들 싹 지웠다가 products 순으로 다시 만들기

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
     <!-- -- 14) 정렬 -->
    <div class="container">
      <div class="row"></div>
      <button class="btn btn-danger" id="more">더보기</button>
      <button class="btn btn-danger" id="price">가격순 정렬</button>
      <button class="btn btn-danger" id="sort1">다나가순 정렬</button>
    </div>

    <!-- 스크립트 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="list.js"></script>
  </body>
</html>

#sort1 생성

가나다 순 정렬 방법

// 14-1) 가나다 순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort();

// $("#sort1").click(function () {});
console.log(어레이);

변수(어레이) 에 .sort() 사용하면 됨.

콘솔에 출력

다나가 순 정렬 방법

// 14-1) 다나가순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort(function (a, b) {});

$("#sort1").click(function () {});

console.log(어레이);

.sort1 버튼에 클릭이벤트리스너 연결

a, b 는?

- array 안에 있는 하나하나의 데이터
- array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄

가 = a , 다 = b 로 가정하면

b가 더 큰 경우, ( 가 = a , 다 = b )

즉 b가 더 뒤에 오는 경우 ( "다" 가 더 뒤에 옴 )

양수를 return.

(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야 다나가순 정렬이 됩니다.
(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.

a < b 일 경우 return 우측에 양수

a > b 일 경우 return 우측에 음수

// 14-1) 다나가순 정렬
var 어레이 = ["가", "다", "나"];
어레이.sort(function (a, b) {
  if (a > b) {
    return -1; // a가 b보다 크면 a를 더 앞으로 배치
  }
  if (a < b) {
    return 1; // a가 b보다 작으면 b를 더 앞으로 배치
  }
  return 0; // 같으면 변경하지 않음});
});

console.log(어레이);

만약 글자 두 개가 완전 같을 경우,

return 0 = 조작 필요 없음

버튼누르면 다나가순 정렬

// 14-1) 버튼 누르면 다나가순
$("#sort1").click(function () {
  products.sort(function (a, b) {
    if (a < b) {
      return 1;
    } else {
      return -1;
    }
  });
});

아까 참고해서 코드짜기.

a 하고 b 의 의미
= products 안에 있던 하나하나의 object (데이터)
= 중괄호 들

제목을 비교하는 경우

$("#sort1").click(function () {
  products.sort(function (a, b) {
    if (a.title < b.title) {
      return 1;
    } else {
      return -1;
    }
  });
  console.log(products);
});

.title 붙여준다.

중괄호 끼리 비교할 수 없으므로.

// 14-1) 버튼 누르면 다나가순
$("#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(템플릿);
  });
  // console.log(products);
});

기존 html 지우고 = $(".row").html("");

새로 html 까지 생성해주면 된다.

728x90

저작자표시 비영리 변경금지

'> 메모 > JS' 카테고리의 다른 글

[JS] 헷갈리는 querySelectAll과 Jqeury 포함 범위 (1)	2024.04.27
sort, map, filter 함수 (1) (0)	2024.04.08
[JS] Ajax 정리 (3) (0)	2024.04.07
[JS] arrow function 문법 (화살표 함수) (0)	2024.04.07
[JS] Ajax 정리 (2) (1)	2024.04.05