객체에 접근해 정렬 및 필터버튼을 만들어보자
HTML / CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>detail</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.visHidden {
visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row"></div>
</div>
<div class="container">
<button class="btn btn-danger" id="more">더보기</button>
<button class="btn btn-danger" id="titleAscendingSort">오름차순</button>
<button class="btn btn-danger" id="titleDecendingSort">내림차순</button>
<button class="btn btn-danger" id="sixDownSort">6만원 이하</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script src="tap2.js"></script>
</body>
</html>JS
const products = [
{ id: 0, price: 70000, title: "Blossom Dress" },
{ id: 1, price: 50000, title: "Springfield shirt" },
{ id: 2, price: 60000, title: "Black honastery" },
];
let count = 0;
function productsMaker(array) {
array.forEach((a) => {
const templit = `<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100" />
<h5>${a.title}</h5>
<p>가격 : ${a.price}</p>
<button class='btn btn-danger mb-3 buy'>구매</button>
</div>`;
document.querySelector(".row").insertAdjacentHTML("beforeend", templit);
});
}
productsMaker(products);
// 이름순으로 정렬 , 가격순으로 정렬하기
const $titleAscendingSort = document.querySelector("#titleAscendingSort");
const $titleDecendingSort = document.querySelector("#titleDecendingSort");
const $sixDownSort = document.querySelector("#sixDownSort");
$titleAscendingSort.addEventListener("click", () => {
document.querySelector(".row").innerHTML = "";
products.sort((a, b) => {
if (a.title > b.title) return 1;
else if (a.title < b.title) return -1;
else return 0;
});
productsMaker(products);
});
$titleDecendingSort.addEventListener("click", () => {
document.querySelector(".row").innerHTML = "";
products.sort((a, b) => {
if (a.title > b.title) return -1;
else if (a.title < b.title) return 1;
else return 0;
});
productsMaker(products);
});
$sixDownSort.addEventListener("click", () => {
document.querySelector(".row").innerHTML = "";
let sixDownArray = products.filter((ary) => {
return ary.price <= 60000;
});
productsMaker(sixDownArray);
});결과
설명
filter함수 복습 및 sort 연습
sort 함수의 매커니즘을 잘 알지 못하고 사용했었는데 오늘 확실히 알게되었다.
sort 함수의 매커니즘은 다음과 같다
array.sort((a,b) => {
return a - b // 오름차순 정렬
return b - a // 내림차순 정렬
});
1. a와 b는 array 안의 요소들
2. return 계산 값이 양수면 a를 오른쪽으로 이동
3. return 계산 값이 음수면 b를 오른쪽으로 이동
4. 반복만약 array의 요소가 숫자가 아닌 문자라면 ascii code 값을 비교한다
그래서 문자요소의 정렬은 이런 방식으로 이루어진다
1. 만약 a 가 b 보다 크다면(혹은 작다면) return 1 or -1
2. 같다면 return 0
만약 내림차순 정렬을 하고싶다면
arr.sort(function (a, b) {
if (a > b) return -1;
else if (b > a) return 1;
else return 0;
});
이런식객체의 정렬은 조금 다른 방법을 쓴다
처음에 객체의 정렬을 모를때는
arr.key.sort((a,b) => {}) // x 잘못된 문법 이런식으로 하지 않을까 하고 예상했지만
arr.sort((a,b) => { // o 올바른 문법
return a.key - b.key // 객체 키 값의 오름차순 정렬
})이런식으로 정렬을 한다
filter 함수도 다시한번 복습했다
let array = [1,2,3,4,5]
let newArray = array.filter(function(e) {
return 조건식 // true or false
});조건식은 어떤 자료를 남길 것인지를 지정한다
boolean 값을 리턴하여 true 를 반환하는 새로운 함수를 만든다
파라미터 e 는 array 요소들 값을 갖는다
신 문법들의 특징인데 filter 함수는 원본의 변형이 없다
고전문법인 sort 는 원본이 변형된다
map 함수의 사용법에 대해서도 조금 더 알게됐다
let array = [7,3,5,2,40]
let newArray = array.map(function(e) {
return 식 // ex) e * 100;
});이 함수도 새로운 함수를 만드는 함수이다
배열 안에 모든 요소에 특정 식을 전부 실행해 리턴한 값을 새로운 함수로 생성한다
예를들어 모든 요소에 100을 곱한 새로운 함수를 만들고 싶다면
for, forEach 를 쓰는 것 보다 map 함수를 쓰는게 편할 수 있다
뿐만 아니라 함수를 정의한대로 리턴하기 때문에 자유도도 높다
사용법을 예를 든다면 쇼핑몰의 상품가격이 $ 인 모든 요소를 ₩ 로 바꾸고 싶다면
상품가격이 모두 담긴 배열을 map 함수 처리하면 되겠다
Always, we are friend 🧡