티스토리 뷰
Javascript 연습용 문제
객체 오름차순 정렬과 출력
문제부터 어떻게 설명해야 할지 모르겠다. 배열 공부하면서 풀어보라고 문제 받은 순간 오브젝트가 뭐인지부터 찾아봤다. 자주 쓰인다고 하니 이번에 풀었다고 그냥 넘어가면 나중에 기억 못 할 것 같아서 정리한다. 찾아보고 배우면서 내 맘대로 이해한 방법을 낼름 적어보았다,
말 그대로 객체를 특정 요소 기준으로 오름차순으로 정렬한 뒤, 정렬한 객체 중 1등인 객체만 출력해보는 것이다. 정렬은 sort()를 사용하지 않고, 버블 정렬 알고리즘을 이용해 구현할 것이다. 전엔 콘솔 창 쓰는 법을 잘 몰라서 html에서 값을 가져오고 거기다가 다시 출력을 했었는데, 이번엔 좀 익히고 와서 결과 확인용 html은 만들지 않는다. 🥳 콘솔 창에 쳐보는 게 더 간단하단 사실을 몰랐음...ㅎ
var obj = [
{
name: "Sophia",
age: "22"
},
{
name: "Edward",
age: "16"
},
{
name: "Noah",
age: "17"
}
];
객체 배열을 만들어 보았다. 이 배열을 나이순으로 정렬 후, 제일 나이가 적은 사람의 이름(Edward)을 콘솔에 출력할 것이다.
버블 정렬이 다음 요소의 값을 비교해서 자리 이동을 하는거랬나? 그러니까 객체의 공통된 요소인 age를 각각 비교한다면 [22, 16, 17] 이 값에서 두 개의 연속된 개체를 비교해서 더 큰 값을 뒤로, [22, 16, 17] → [16, 22, 17] 이런 식으로 자리를 바꿔주는 것이다. 이것을 배열이 모두 끝날 때까지 반복해야 하니 for문을 활용한다.
// 객체 정렬
for (var i = 0; i < obj.length - 1; i++) {
var asdf = 0;
for (var j = i + 1; j < obj.length; j++) {
//현재 요소가 다음 요소보다 크면 뒤로 이동
if (obj[i].age > obj[j].age) {
asdf = obj[i];
obj[i] = obj[j];
obj[j] = asdf;
}
}
}
첫 번째로, for (var i = 0; i < obj.length - 1; i++) {} 이것은 배열에서 [0, 1, 2], [0, 1, 2], [0, 1, 2] 이렇게 다음 값과 비교할 현재 요소를 가리킨다. 처음부터 계산해야 하기 때문에 i는 0부터 시작하고, obj의 길이만큼 반복시켜줘야 하므로 배열의 넓이를 가져와주는 .length를 적어주며, 반복해서 이동시켜주다 보면 자동으로 마지막 배열은 제일 큰 숫자가 되기 때문에 비교해줄 필요가 없다. 그래서 1을 빼 제외시켜준다.
자리를 이동시켜 줄 때 사용할 임시 공간도 만들어 두고, 두 번째 for문을 시작한다. j는 i의 항상 다음 요소를 가리켜야 하므로 [0, 1, 2] → [0, 1, 2] (요렇게) i+1부터 시작한다. 배열의 넓이만큼 반복해주면 된다.
i번째 객체의 age 값을 가져오기 → obj[i]. age
[22, 16, 17] > [22, 16, 17] 처음으론 이렇게 비교가 될 것이다. 22가 16보다 크니 차리를 바꿔준다. 임시 공간에 i를 넣고, i는 j 위치에 놓고, j는 임시 공간, 그러니까 i에 도로 넣어두면 자리 교환 끝.
i와 j의 변수 선언은 생략해도 실행은 된다. 쓰는 게 권장사항인 것 같아 써보았다. 오름차순이 아닌 내림차순 정렬은 if에서 조건의 문장 부호만 반대로 해주면 된다~
console.log(obj[0].name); // Edward
밑에다 이렇게 써주면 출력까지 끝!
'공부중 > 𝖩𝖠𝖵𝖠𝖲𝖢𝖱𝖨𝖯𝖳' 카테고리의 다른 글
[jQuery / Class] 메뉴 클릭 시 아이콘/클래스 변경하기 (1) | 2021.06.07 |
---|---|
[jQeury / slideToggle] 3단 메뉴 클릭하여 펼치기 / 접기 (0) | 2021.05.28 |
[jQuery] a 태그 클릭 시 새로고침 방지 (0) | 2021.05.25 |
[jQuery / for문 활용] input 태그 두 개에서 입력한 범위 내로 구구단 출력 (0) | 2021.05.15 |
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Total
- Today
- Yesterday
- 웹디자인기능사실기
- border
- 객체정렬
- 자격증
- slideToggle
- switch
- hammy
- input
- jQeury
- css
- JavaScript
- 구구단
- 웹디자인기능사
- 사이트추천
- box-shadow
- if문
- Class
- 3단메뉴
- 첫글
- html
- a
- float
- object
- Gradient
- jquery