JavaScript 입문과 웹 UI개발(28)-array에 자주 쓰는 sort, map, filter 함수
2022. 10. 10. 18:28ㆍ애플코딩 javascript 강의
반응형
list.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
</div>
<button class="btn btn-danger" onclick="cheaper()" >가격순 정렬</button>
<button class="btn btn-danger" onclick="titlebca()" >상품명 정렬</button>
<button class="btn btn-danger" onclick="underSix()" >6만원 이하 상품만 보기</button>
<button class="btn btn-danger" onclick="getmore()" >더보기</button>
</div>
<script>
var cnt=0; //더보기 버튼을 누른 횟수
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
//배열 정렬 하는법
//배열은 순서 개념이 있으니 정렬이 가능
//문자열 정렬은 배열.sort()를 하면된다
//숫자 정렬은 배열.sort(function(a,b){ return a-b})
//sort()의 원리
// 배열=[3,2,4,1]
//배열.sort(a,b){function(a,b){
// return a-b;
//}}
// 위에서 a와 b는 배열에 있는 값 하나하나라고 생각하면 된다.
// 위에 배열에서 3이 a이고 2가 b이면 a-b는 1이 된다.
//이렇게 배열에 있는 각 값들을 빼줘서
// 양수가 나오면 a를 b보다 오른쪽에 두고
// 음수가 나오면 a를 b보다 왼쪽에 둔다.
// 배열에 있는 모든 숫자를 a,b에 넣어서 정렬이 되는거다.
//결과는 오름차순이 된다.
//오름차순이 아닌 내림차순으로 정렬하고 싶다면
//배열.sort(a,b){function(a,b){
// return b-a;
//}}
// 위와 같이 a-b가 아닌 b-a로 바꾸면 된다
var arr=[7,3,2,4,23];
//숫자 정렬(오름차순)
arr.sort(function(a,b){
return a-b;
});
console.log(arr); //[2, 3, 4, 7, 23]
//숫자 정렬(내림차순)
arr.sort(function(a,b){
return b-a;
});
console.log(arr); //[23, 7, 4, 3, 2]
var arr2=['a','d','k','c']
//문자정렬(오름차순)
arr2.sort();
console.log(arr2);//['a', 'c', 'd', 'k']
var arr3=['a','h','b','c']
//문자정렬(내림차순)
arr3.sort(function(a,b){
if(a>b)return -1;
if(a<b)return 1;
});
console.log(arr3); //['h', 'c', 'b', 'a']
//배열을 파라미터로 넣어주면 배열에 있는 상품들을 출력해주는 함수
function productList(data){
//요청 성공시 실행되는 함수
data.forEach((v)=>{
//받아온 배열을 forEach로 각 데이터를 추가해준다
$('.row').append(`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${v.title}</h5>
<p>가격 : ${v.price}</p>
</div>` );
})
}
//가격순 정렬 버는 누르면 작동하는 함수
function cheaper(){
//상품의 가격 오름차순으로 정렬
products.sort(function(a,b){
return a.price-b.price;
})
//오름차순으로 바뀌었지만 화면에 적용이 안돼있다.
//html을 비웠다가 다시 넣어주라
$('.row').html('');
productList(products);
}
//상품명으로 정렬 버는 누르면 작동하는 함수
function titlebca(){
//상품의 제목 내림차순으로 정렬
products.sort(function(a,b){
if(a.title<b.title) return 1;
if(a.title>b.title) return -1;
if(a.title=b.title) return0;
})
//내림차순으로 바뀌었지만 화면에 적용이 안돼있다.
//html을 비웠다가 다시 넣어주라
$('.row').html('');
productList(products);
}
//배열의 필터 기능
// var 배열=[5,6,3,2,4,8]
//var 새배열=배열.filter(function(a){
// return a<5 //5보다 작은 숫자만 배열에서 남음
//});
//배열에 원하는 자료만 return해주면 return해준 자료만 남는다
//기존의 배열을 filter해주고 새로운 변수에 담아야 한다.
//기존의 배열이 filter 된게 아니라 기존의 배열을 filter한것을 새로운 배열에 담을 수 있는거다
var arr12=[3,6,5,4,8,1];
var arr123=arr12.filter(function(a){
return a<5;
})
console.log(arr123);// [3, 4, 1]
//배열의 map 함수
//array 자료 전부 변형하려면
var arr1234=arr12.map(function(a){
return a*5;
})
console.log(arr1234);// [15, 30, 25, 20, 40, 5]
//6만원 이하 상품만 보기 버튼 눌렀을때 작동하는 함수
function underSix(){
var newProducts=products.filter(function(a){
return a.price<=60000;
});
//html을 비웠다가 다시 넣어주라
$('.row').html('');
productList(newProducts);
}
//1,2,3 번째 상품 출력
productList(products);
// https://codingapple1.github.io/js/more1.json 여기로 get 요청을 보내면
// 4,5,6번째 상품 3개를 array로 받을 수 있다
//더보기 버튼을 한번더 누르면
// https://codingapple1.github.io/js/more2.json 여기로 get 요청을 보내면
// 7,8,9번째 상품 3개를 array로 받을 수 있다
//더보기 버튼을 눌렀을때 get 요청을 통해 상품정보를 가져오는 함수
function getmore(){
cnt++;
if(cnt==1){//버튼을 한번 눌렀을때만 작동하게 한다
//요청보냄
$.get('https://codingapple1.github.io/js/more1.json')
.done(function(data){
productList(data);
})
}
else if(cnt==2){// 버튼을 두번째 눌렀을때만 작동하게 한다
//요청보냄
$.get('https://codingapple1.github.io/js/more2.json')
.done(function(data){
productList(data);
})
//더보기 버튼을 눌러도 더이상 상품이 없으므로 더보기 버튼을 안보기게함
$('.btn').css('display', 'none');
}
}
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(27)-Ajax 2 : 상품 더보기 버튼 만들기 (0) | 2022.10.10 |
|---|---|
| JavaScript 입문과 웹 UI개발(26)-ajax 개념(get,post, fetch) (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(25)-array, for 반복문 실력향상 과제 (1) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(24)- forEach, for in 반복문 (0) | 2022.10.09 |
| JavaScript 입문과 웹 UI개발(23)-자바스크립트로 html 생성하는 법 (1) | 2022.10.08 |