상품 가격순 정렬버튼과 기능 만들어보기!
1. products라는 변수 안에 있던걸 가격순으로 정렬하고
2. 클릭 시 카드를 싹 지운 후 products 변수에 있던 순서대로 카드를 다시 생성하면 완성이 된다
그렇다면 array 정렬하는 방법은??
array정렬하는 법
array자료는 순서개념이 있어 정렬도 가능하다
그냥 가나다 순으로 정렬하려면 .sort()를 붙이면 되지만 숫자정렬은?
var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
return a - b
});
console.log(어레이);이렇게 해줘야한다
코드 동작 원리를 알면 나중에 응용도 쉽게 가능하기 때문에 sort()의 동작원리를 알아보자!
어레이.sort(function(a, b){
return a - b
}); - a, b는 array 안의 자료들이다
- return 오른쪽이 양수면 a를 오른쪽으로 정렬해준다 (a가 더 큰 숫자로 정렬)
- reutrn 오른쪽이 음수면 b를 오른쪽으로 정렬해준다 (b가 더 큰 숫자로 정렬)
- 이렇게 array 안의 자료들을 계속 뽑아서 a, b에 넣어준다
ex) a, b 가 7과 3일 경우 [7, 3]
7-3 = 4
4는 양수이기 때문에 7을 3보다 오른쪽으로 보내준다 [3, 7]
Q. array 안의 숫자를 내림차순 정렬로는 어떻게?
var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
return b - a
}); 내림차순은 큰 숫자가 더 앞에 오기 때문에 a와 b의 위치만 바꿔주면 된다
버튼을 누르면 products를 가격순으로 정렬해보기
sort 함수를 사용하면 된다
products.sort(function(a, b){
return a - b
}); 다만 products 는 [{}, {}, {}] 이런 형태기 때문에 콜백함수 안의 식이 조금 바껴야한다
a, b는 지금 {}, {} 이 상태인데 object 두개를 빼봤자 음수나 양수가 나오지 않는다
따라서 {} - {} 이렇게 빼는 것이 아닌 {}안에있는 가격 - {}안에있는 가격
이렇게 빼야 음수나 양수가 나온다!
products.sort(function(a, b){
return a.price - b.price
});
console.log(products); html 정렬 해보기
- 가격순 정렬 버튼을 누르면
- products 자료를 가격순으로 정렬하고
- 현재 있는 3개의 카드를 지운 후 products 갯수만큼 카드를 새로 만들기
<div class="container my-3">
<button class="btn btn-danger" id="price">가격순정렬</button>
</div>
<script>
var products = [
{ id: 0, price: 70000, title: "Blossom Dress" },
{ id: 1, price: 50000, title: "Springfield Shirt" },
{ id: 2, price: 60000, title: "Black Monastery" },
];
$('#price').click(function(){
products.sort(function(a, b){
return a.price - b.price
});
$('.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(템플릿)
})
});
</script>array 에 자주 쓰이는 filter 함수
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return 조건식
}); - a는 array 안에 있던 데이터
- return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨준다
- filter 은 원본을 변형시키지 않기 때문에 새로운 변수에 결과를 담아써야한다
ex)
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a < 4
}); -> [2, 3] 만 남게된다
Q. 어디에 응용하나요?
쇼핑몰에서 "6만원 이하 상품만 보기" 이런 필터 기능을 만들 수 있다
array 에 자주쓰이는 map 함수
array 안의 자료들을 전부 변형시키려면 map 함수를 쓴다
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return 수식같은거
}); - a는 array 안에 있던 데이터
- return 우측에 변경될 수식같은걸 넣기
- filter와 같이 map 도 원본을 변형시키지 않기 때문에 새로운 변수에 담아써야한다
ex)
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return a * 4
}); -> [28, 12, 20, 8, 160] 가 된다
Q. 어디에 응용하나요?
쇼핑몰에서 "달러 -> 원화로 변환하기" 기능을 만들 수 잇다
(참고)
sort 함수는 원본을 변형시킨다
오늘의 숙제
- "상품명 다나가순 정렬" 버튼과 기능 만들기
- "6만원 이하 상품보기" 버튼과 기능 만들기
1번 숙제
<script>
$("#name").click(function () {
products.sort(function (a, b) {
if (a.title < b.title) {
return -1;
} else if (a.title > b.title) {
return 1;
}
return 0;
});
$(".row").html("");
products.forEach((a, i) => {
var 템플릿 = `<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${a.title}</h5>
<p>가격 : ${a.price}</p>
</div>`;
$(".row").append(템플릿);
});
});
</script>2번숙제
<script>
let under6products = products.filter(function (a) {
return a.price <= 60000;
});
$("#under6").click(function () {
$(".row").html("");
under6products.forEach((a, i) => {
var 템플릿 = `<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${a.title}</h5>
<p>가격 : ${a.price}</p>
</div>`;
$(".row").append(템플릿);
});
});
</script>