[javascript] 23. sort/map/filter -> array

array에서 사용 가능한 메소드

1. filter ( )
2. map ( )
3. sort ( ) < 원본 변형 >

모두 return 이 필요하다

---

map ( )

array 안의 자료들을 하나씩 가져오기

📢 map은 원본을 변형시키지 않고 새로운 배열을 생성하여 반환한다

그래서 변수에 담아야한다

var array = [7, 5, 3, 6, 1];

var newarray = array.map(function (data) {
  return data * 4;
      });
console.log(newarray);

filter ( )

array 자료에서 원하는 자료만 필터링

📢 filter는 원본을 변형시키지 않고 새로운 배열을 생성하여 반환한다

그래서 변수에 담아야한다

var array = [7, 5, 3, 6, 1];

var newarray = array.filter(function (data) {
  return data < 4;
});
console.log(newarray);

sort ( )

array 정렬하기

sort 함수는 원본을 변형시킨다

그래서 array/object 자료 변경 시에는 원본을 따로 복사해두는 편이 좋다

var array = [3, 6, 2, 54, 7, 1];
array.sort(); //문자정렬 [1, 2, 3, 54, 6, 7]

array.sort(function (a, b) {
	return a - b;   // 양수면 a를 오른쪽 음수면 b를 오른쪽으로 정렬
  }); // 숫자 오름차순 정렬 [1, 2, 3, 6, 7, 54]
console.log(array);

📢 응용

💪 가격 오름차순 정렬 버튼 구현

정렬 버튼 id인 sort 값을 클릭했을 때 가격이 오름차순이 되도록 구현하였다

그리고 html을 비워주고 정렬된 products를 다시 makeCard 함수를 통해 로드해주었다

  let products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];

  function makeCard(i, data) {
        let cards = `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${data.title}</h5>
          <p>가격 : ${data.price}</p>
        </div>`;
        $(".row").append(cards);
      }

      products.forEach(function (data, i) {
        makeCard(i, data);
      });
  
		//가격 오름차순 버튼
      $("#sort").click(function () {
        products.sort((a, b) => {
          return a.price - b.price;
        });
        $(".row").html("");
        products.forEach((data, i) => {
          console.log(i, data);
          makeCard(i, data);
        });
      });

  let count = 0;

  $("#more").click(function () {
        count++;
        if (count == 1) {
          url = "https://codingapple1.github.io/js/more1.json";
        } else if (count == 2) {
          url = "https://codingapple1.github.io/js/more2.json";
          $("#more").attr("disabled", true);
        }

        $.get(url).then((moreproducts) => {
          moreproducts.forEach((data, i) => {
            products.push(data);
            console.log(data.id, data);
            makeCard(data.id, data);
          });
        });
      });
      

💪 다나가 버튼, 가격 필터 버튼 구현

  <div class="container">
      <div class="row"></div>
    </div>
    <div class="container">
      <button class="btn btn-danger" id="more">더보기</button>
    </div>
    <div class="container my-3">
      <button class="btn btn-danger" id="sort">가격 오름차순 정렬</button>
    </div>
    <div class="container my-3">
      <button class="btn btn-danger" id="word">다나가 순 정렬</button>
    </div>
    <div class="container my-3">
      <button class="btn btn-danger" id="underprice">
        6만원 이하 상품 보기
      </button>
    </div>

    <script>
      let products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];

      function makeCard(data) {
        let cards = `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${data.title}</h5>
          <p>가격 : ${data.price}</p>
        </div>`;
        $(".row").append(cards);
      }

      //첫번째 상품들
      products.forEach(function (data) {
        makeCard(data);
      });

      // 두번째,세번째 상품들

      let count = 0;

      $("#more").click(function () {
        count++;
        if (count == 1) {
          url = "https://codingapple1.github.io/js/more1.json";
        } else if (count == 2) {
          url = "https://codingapple1.github.io/js/more2.json";
          $("#more").attr("disabled", true);
        }

        $.get(url).then((moreproducts) => {
          moreproducts.forEach((data) => {
            products.push(data);
            makeCard(data);
          });
        });
      });

      //가격 오름차순 정렬버튼
      $("#sort").click(function () {
        console.log(products);
        products.sort((a, b) => {
          return a.price - b.price;
        });
        $(".row").html("");
        products.forEach((data) => {
          makeCard(data);
        });
      });

      // 다나가 순 정렬
      $("#word").click(function () {
        products.sort((a, b) => {
          if (a.title < b.title) {
            return 1;
          } else if (a.title == b.title) {
            return 0;
          } else return -1;
        });
        $(".row").html("");
        products.forEach((data) => {
          makeCard(data);
        });
      });

      // 6만원 이하 상품만 보기
      $("#underprice").click(function () {
        products = products.filter((data) => {
          return data.price <= 60000;
        });
        $(".row").html("");
        products.forEach((data) => {
          makeCard(data);
        });
      });