[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
}
});
동작 원리
- a,b는 array 안의 데이터들을 대입한다.
- +를 return 하면 a가 오른쪽, b가 왼쪽으로 재정렬된다.
- -를 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>