JAVASCRIPT

[JavaScript]상품 정렬하기(sort, filter, map)

[JavaScript]상품 정렬하기(sort, filter, map)

sort()

데이터를 재정렬하는 함수.

오름차순 정렬

            var array = [7,3,5,40,8,1];
            array.sort(function(a,b){
                return a-b;
            });

내림차순 정렬

            var array = [7,3,5,40,8,1];
            array.sort(function(a,b){
                return b-a;
            });

문자 정렬

            arrayString.sort(function (a, b) {
                if (a < b == true) {
                    return -1
                } else {
                    return 1
                }
            });

동작 원리

  1. a,b는 array 안의 데이터들을 대입한다.
  2. +를 return 하면 a가 오른쪽, b가 왼쪽으로 재정렬된다.
  3. -를 return 하면 b가 오른쪽, a가 왼쪽으로 재정렬된다.

filter()

조건에 맞는 데이터를 출력하는 함수. 변수에 담아서 사용해야 한다.

            var filterArray = array.filter(function (a) {
                return a < 4;
            });

map()

배열의 모든 값에 같은 연산을 하는 함수. 변수에 담아서 사용해야 한다.

            var mapArray = array.map(function (a) {
                return a * 2;
            });

상품 정렬하기

가격순정렬

가나다순정렬

5만원이하

 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- hammer.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
        integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>

    <link href="css/main.css" rel="stylesheet">

</head>

<body>

    <div class="card-group container">

    </div>

        <div class="container my-4">
            <button class="btn btn-dark" id="sort-price">가격순정렬</button>
            <button class="btn btn-dark" id="sort-abc">가나다순정렬</button>
            <button class="btn btn-dark" id="filter">5만원이하</button>
        </div>

        <script>

            // 상품 데이터
            var products = [
                { id: 0, price: 75000, title: 'Blossom Dress' },
                { id: 1, price: 72000, title: 'Normal Dress' },
                { id: 2, price: 50000, title: 'Springfield Shirt' },
                { id: 3, price: 45000, title: 'Rose Monastery' },
                { id: 4, price: 45000, title: 'Black Monastery' }
            ]

            // 상품 카드 UI를 담은 함수
            function card(title,price){
                $(".card-group").append(`
                <div class="card">
                <img src="https://via.placeholder.com/600">
                <div class="card-body">
                    <h5>`+title+`</h5>
                    <p>가격 : <span>`+price+`</span></p>
                    <button class="btn btn-primary">주문하기</button>
                </div> 
            `);
            }

            // 데이터 바인딩 함수
            function dataBinding() {
                $(".card-group").empty();
                for (var i = 0; i < products.length; i++) {
                    card(products[i].title,products[i].price);
                }
            }

            dataBinding();

            // 가격순정렬(sort)
            $("#sort-price").click(function () {
                products.sort(function (a, b) {
                    return a.price - b.price;
                })

                dataBinding();
            });

            // 가나다순정렬(sort)
            $("#sort-abc").click(function () {
                products.sort(function(a,b) {
                    if(a.title < b.title == true){
                        return -1
                    }else {
                        return 1
                    }
                });

                dataBinding();
            });

            // 5만원이하(filter)
            $("#filter").click(function(){
                $(".card-group").empty();
                var fitlerBinding = products.filter(function(a){
                    return a.price <= 50000
                });
                
                fitlerBinding.forEach(function(a){
                    card(a.title, a.price)
                });

                
            });

        // sort, filter, map 함수 예제

            var array = [7, 3, 5, 40, 8, 1];
            var arrayString = ["나", "다", "라", "가"];

            // sort 숫자 정렬(오름차순)
            array.sort(function (a, b) {
                return a - b;
            });

            // sort 숫자 정렬(내림차순)
            array.sort(function (a, b) {
                return b - a;
            });

            // sort 문자 정렬
            arrayString.sort(function (a, b) {
                if (a < b == true) {
                    return -1
                } else {
                    return 1
                }
            });

            // filter 함수
            var filterArray = array.filter(function (a) {
                return a < 4;
            });

            // map 함수
            var mapArray = array.map(function (a) {
                return a * 2;
            });


        </script>
        <script src="/js/tab.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
</body>

</html>
최신글