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
}); 1. a, b는 array 안의 자료들입니다.
2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.
3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해줍니다.
4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줍니다.
이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것입니다.
예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남습니다.
4는 양수죠? 그러면 7을 3보다 오른쪽으로 보내줍니다.
그래서 숫자 오름차순 (123순) 정렬이 완성되는 것입니다.
Q. 그럼 array 안의 숫자 내림차순 (321순) 정렬은 어떻게 할까요?
Q. 문자정렬과 문자역순정렬은 어떻게 할까요?
var 어레이 = ['다', '가', '나'];
이런 자료가 있을 때 가나다순, 다나가순 정렬은 각각 어떻게 할지도 고민해봅시다.
실은 오늘 숙제임
버튼누르면 products를 가격순 정렬해봅시다
우리가 계속 다루고 있는 var products 라는 array가 하나 있는데
[ { }, { }, { } ] 이렇게 생겼습니다.
안에 있는 { } 이것들을 가격 낮은순으로 정렬하려면 어떻게 코드를 짜야할까요?
sort 동작원리 잘 떠올리면 됩니다.
products 자료는 정렬했는데 왜 html은 정렬안되는 것임?
컴퓨터는 시키는 것만 하는 노예일 뿐이라
컴퓨터에게 뭘 기대하면 안됩니다. 여러분이 html도 새로 만들라고 코드짜면 됩니다.
1. 가격순 정렬버튼 누르면
2. products 자료를 가격순으로 정렬해주세요
3. 지금 있는 카드 3개 지우고 products 갯수만큼 카드를 새로 만들어주세요
라고 코드짜면 실제로 상품목록이 정렬되는 모습도 확인할 수 있을듯요
var products = 생략;
$('#price').click(function(){
products.sort(function(a, b){
return a.price - b.price
});
$('.row').html('');
products.forEach((a, i)=>{
var 템플릿 =
`${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
</div>`;
$('.row').append(템플릿)
})
}); 1. 그래서 id="price" 인 버튼 만들고
2. 누르면 products 자료 정렬하라고 했고
3. 상품목록 html 싹 비우고 새로 3개 넣으라고 했습니다. 데이터바인딩도 잘 했습니다.
이제 정렬버튼 누르면 상품3개가 잘 정렬됩니다.
array에 자주 쓰는 filter 함수
array 자료에서 원하는 자료만 필터링하고 싶으면 filter 함수를 씁니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return 조건식
}); 1. a라고 작명한건 array 에 있던 데이터를 뜻하고
2. return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨줍니다.
3. 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a < 4
}); 예를 들어 여러 숫자가 있는데 그 중에 4 미만인 것만 남기고 싶으면 이렇게 쓰면 됩니다.
새어레이 출력해보면 [2, 3] 이것만 들어있겠군요.
이런거 응용하면 쇼핑몰에서 "6만원 이하 상품만 보기" 이런 필터기능도 만들 수 있는 것입니다.
products라는 자료에서 6만원 이하만 필터하고 새로 html 생성하면 될 것 같군요
array에 자주 쓰는 map 함수
array 안의 자료들을 전부 변형하려면 map 함수를 씁니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return 수식같은거
}); 1. a라고 작명한건 array 에 있던 데이터를 뜻하고
2. return 우측에 변경될 수식같은걸 넣으면 됩니다.
3. 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return a * 4
}); 예를 들어 array 안의 숫자들을 전부 4를 곱해주고 싶으면 이렇게 코드짜면 됩니다.
새어레이 출력해보면 [28, 12, 20, 8, 160] 이게 들어있겠군요.
이런거 응용하면 쇼핑몰에서 "달러 -> 원화로 변환하기" 이런 기능도 만들 수 있겠군요.
array 안에 있는 숫자들을 달러가격이라고 생각해봅시다. 이걸 전부 원화가격으로 변경하고 싶으면 어떻게하죠?
아마 map 써서 1000얼마 곱해주면 끝일듯요.
(참고)
sort 함수는 원본을 변형시켜버립니다.
원본을 변형시켜버리면 나중에 원본으로 되돌아갈 수 없으니까 귀찮아질 수 있어서
array/object 자료 조작시엔 원본을 따로 복사해두고 조작하는 경우도 있습니다.
응용1. 가나다순 정렬버튼?
응용2. <input>을 이용해 유저가 직접 가격을 입력해서 필터하는 기능?
응용3. 원래 순서대로 되돌리기 버튼과 기능을 만들고 싶으면?
이런 것들도 심심할 때 해보면 좋은 연습이 되지않을까요.
되돌리기버튼 만드는 팁은
var products 이 변수를 사본을 만들어서 다른 변수에 보존해두거나 그러면 편리할 수도요?
근데 array/object 사본만들 때 그냥 등호로 var products1 = products로 복사해버리면 이상해질 수도 있습니다.
숙제1 하기 전 쉬운거부터 다나가순 정렬해보자
- 버튼누르면
- products 안에 있는 자료들을 다나가순 정렬하고
- 카드들 싹 지웠다가 products 순으로 다시 만들면 숙제1 끝일듯요
근데 일단 쉬운 array 자료 하나 만들어서 다나가순 정렬하는 법 부터 알아봅시다.
var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
return 여기뭐써야함?
});쉬운 array 자료부터 만들고 이걸 다나가순 정렬해봅시다.
물론 구글찾아봐도 바로 나오긴 하겠지만 이런거 직접 만들어보면 논리력에 큰 도움이 됩니다.
논리력이 좋으면 처음 보는 문제도 풀 수 있는 것임
sort 함수 작동원리는
- a, b는 array안에 있던 자료들임
- return 우측이 양수면 a를 우측으로 보냄
- return 우측이 음수면 b를 우측으로 보냄
- array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄
이렇습니다.
위 코드에서 중요한건 return 우측에 뭘 집어넣냐는 건데
예를 들어서
(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야 다나가순 정렬이 됩니다.
(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
....
이렇게 대충 하나하나 대입해서 따져보면 규칙같은게 눈에 보이는군요.
a < b 일 경우 return 우측에 양수가 들어가면 되고
a > b 일 경우 return 우측에 음수가 들어가면 됩니다.
(자바스크립트는 문자끼리 부등호비교가 가능합니다. ㄱ보다 ㅎ 이게 더 큽니다.)
var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
if (a < b) {
return 1
} else {
return -1
}
});
console.log(어레이)그래서 한글로 번역해봤습니다.
출력해보니까 다나가 순으로 잘 정렬된 것 같군요.
숙제1. 버튼누르면 다나가순 정렬은
<div class="container my-3">
<button class="btn btn-danger" id="sort1">다나가순정렬</button>
</div>버튼 하나 위에 만들었습니다.
var products = 생략;
$('#sort1').click(function(){
products.sort(function(a, b){
if (a.title < b.title) {
return 1
} else {
return -1
}
});
console.log(products)
});
이렇게 짰더니 버튼누르면 정렬된 products가 출력되는군요.
- 버튼누르면
- 카드들 html 싹 지우고
- 정렬된 products 순서대로 카드 다시 만들면 될듯요
숙제2. 6만원이하 상품보기 버튼과 기능
<div class="container my-3">
<button class="btn btn-danger" id="filter">6만원이하</button>
</div>버튼 하나 위에 만들었습니다.
var products = 생략;
$('#filter').click(function(){
var newProduct = products.filter(function(a){
return a.price <= 60000
});
console.log(newProduct)
});
이렇게 짰더니 버튼누르면 6만원 이하인 상품만 newProduct라는 변수에 남아있습니다.
그 다음에 html 비우고 newProduct 갯수만큼 카드레이아웃 생성하라고 코드짜면 됩니다.
그것은 아까랑 비슷하니 생략합시다.
//일반함수
var newProduct = products.filter(function(a){
return a.price <= 60000
});
//화살표함수
var newProduct = products.filter(a => a.price <= 60000);
가독성보다는 그냥 코드를 줄이고 싶으면 arrow function 써도 될듯요
이 경우 함수에 파라미터가 1개면 소괄호 생략이 가능합니다.
함수 { } 안에 return 한 줄 밖에 없으면 중괄호와 return 동시에 생략가능합니다.
응용1. 가나다순 정렬버튼?
응용2. <input>을 이용해 유저가 직접 가격을 입력해서 필터하는 기능?
응용3. 원래 순서대로 되돌리기 버튼과 기능을 만들고 싶으면?
이런 것들도 심심할 때 해보면 좋은 연습이 되지않을까요.
되돌리기버튼 만드는 팁은
var products 이 변수를 사본을 만들어서 다른 변수에 보존해두거나 그러면 편리할 수도요?
근데 array/object 사본만들 때 그냥 등호로 var products1 = products로 복사해버리면 이상해질 수도 있습니다.
숙제1 하기 전 쉬운거부터 다나가순 정렬해보자
- 버튼누르면
- products 안에 있는 자료들을 다나가순 정렬하고
- 카드들 싹 지웠다가 products 순으로 다시 만들면 숙제1 끝일듯요
근데 일단 쉬운 array 자료 하나 만들어서 다나가순 정렬하는 법 부터 알아봅시다.
var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
return 여기뭐써야함?
});쉬운 array 자료부터 만들고 이걸 다나가순 정렬해봅시다.
물론 구글찾아봐도 바로 나오긴 하겠지만 이런거 직접 만들어보면 논리력에 큰 도움이 됩니다.
논리력이 좋으면 처음 보는 문제도 풀 수 있는 것임
sort 함수 작동원리는
- a, b는 array안에 있던 자료들임
- return 우측이 양수면 a를 우측으로 보냄
- return 우측이 음수면 b를 우측으로 보냄
- array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄
이렇습니다.
위 코드에서 중요한건 return 우측에 뭘 집어넣냐는 건데
예를 들어서
(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야 다나가순 정렬이 됩니다.
(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
....
이렇게 대충 하나하나 대입해서 따져보면 규칙같은게 눈에 보이는군요.
a < b 일 경우 return 우측에 양수가 들어가면 되고
a > b 일 경우 return 우측에 음수가 들어가면 됩니다.
(자바스크립트는 문자끼리 부등호비교가 가능합니다. ㄱ보다 ㅎ 이게 더 큽니다.)
var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
if (a < b) {
return 1
} else {
return -1
}
});
console.log(어레이)그래서 한글로 번역해봤습니다.
출력해보니까 다나가 순으로 잘 정렬된 것 같군요.
숙제1. 버튼누르면 다나가순 정렬은
<div class="container my-3">
<button class="btn btn-danger" id="sort1">다나가순정렬</button>
</div>버튼 하나 위에 만들었습니다.
var products = 생략;
$('#sort1').click(function(){
products.sort(function(a, b){
if (a.title < b.title) {
return 1
} else {
return -1
}
});
console.log(products)
});
이렇게 짰더니 버튼누르면 정렬된 products가 출력되는군요.
- 버튼누르면
- 카드들 html 싹 지우고
- 정렬된 products 순서대로 카드 다시 만들면 될듯요
var products = 생략;
$('#sort1').click(function(){
products.sort(function(a, b){
if (a.title < b.title) {
return 1
} else {
return -1
}
});
$('.row').html(''); //카드 다 없애주셈
products.forEach((a, i)=>{
var 템플릿 = `<div>상품명은 ${products[i].title}</div>`;
$('.row').append(템플릿)
})
});
카드3개 html 다 지우고
새로 products 순서대로 생성해달라고 코드짰습니다.
이제 버튼누르면 products가 정렬되어보이는군요
Q. 그냥 html 삭제후 재생성하지말고 기존에 있는 html들 순서만 바꾸면 안되나요?
그래도 되겠지만 매우 귀찮을듯
숙제2. 6만원이하 상품보기 버튼과 기능
<div class="container my-3">
<button class="btn btn-danger" id="filter">6만원이하</button>
</div>버튼 하나 위에 만들었습니다.
var products = 생략;
$('#filter').click(function(){
var newProduct = products.filter(function(a){
return a.price <= 60000
});
console.log(newProduct)
});
이렇게 짰더니 버튼누르면 6만원 이하인 상품만 newProduct라는 변수에 남아있습니다.
그 다음에 html 비우고 newProduct 갯수만큼 카드레이아웃 생성하라고 코드짜면 됩니다.
그것은 아까랑 비슷하니 생략합시다.
//일반함수
var newProduct = products.filter(function(a){
return a.price <= 60000
});
//화살표함수
var newProduct = products.filter(a => a.price <= 60000);
가독성보다는 그냥 코드를 줄이고 싶으면 arrow function 써도 될듯요
이 경우 함수에 파라미터가 1개면 소괄호 생략이 가능합니다.
함수 { } 안에 return 한 줄 밖에 없으면 중괄호와 return 동시에 생략가능합니다.
'자바스크립트' 카테고리의 다른 글
| position : sticky 활용하기 (0) | 2024.07.10 |
|---|---|
| 자바스크립트>DOM이라는 용어 개념정리 & load 이벤트 (0) | 2024.07.09 |
| 자바스크립트> Ajax 1 : 개념정리 & 상품더보기(데이터가져와서 작성) (0) | 2024.07.09 |
| 자바스크립트> forEach, for in 반복문 (0) | 2024.07.09 |
| 자바스크립트> select - form (셔츠- 95) (0) | 2024.07.09 |