sort를 이용한 오름차순/ 내림차순 해보기.
sort()는 비교 함수로 배열을 정렬한다. 비교 함수는 두 인수의 크기를 비교하여 정렬 순서를 결정한다.
<!DOCTYPE html>
<html>
<head>
<title>sortPractice</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<button class="ascending">오름차순</button>
<button class="descending">내림차순</button>
<ul class="user_list"></ul>
<script src="./index.js"></script>
</body>
</html>const dataList = [{
id: 2,
name: "곰"
},
{
id: 10,
name: "사자"
},
{
id: 4,
name: "토끼"
},
{
id: 29,
name: "사람"
},
{
id: 3,
name: "사랑"
}
];
function updateList() {
let listHtml = "";
for(const data of dataList) {
listHtml += `<li>${data.id}: ${data.name}</li>`;
}
document.querySelector(".user_list").innerHTML = listHtml;
}
function sortByAsscending() {
dataList.sort((a, b) => a.id - b.id);
updateList();
}
function sortByDescending() {
dataList.sort((a, b) => b.id - a.id);
updateList();
}
document.querySelector(".ascending").addEventListener("click", () => {
sortByAsscending();
});
document.querySelector(".descending").addEventListener("click", () => {
sortByDescending();
});
sortByAsscending();
내림차순 버튼 누른후
localeCompare()
배열 sort()에서 문자열의 순서 비교는 localeCompare()를 사용한다. 문자 코드는 대소문자의 분류가 따로 되어 있기 때문에 유니코드 등을 사용하면 의도한 대로 정렬할 수 없다. 예를들어, 문자코드를 사용한 정렬은 대문자로 시작하는 Orange가 소문자 apple 보다 앞으로 온다. localeCompare()은 대소문자구분 없이 정렬할수 있다.
const array = ['grape', 'Orange', 'apple']
array.sort((a, b)=>a.localeCompare(b))
console.log(array)
// ["apple", "grape", "Orange"]
someone's opinion of you does not have to become your reality