Notice
Recent Posts
Recent Comments
Link
투케이2K
68. (javascript/자바스크립트) array sort 사용해 특정 데이터 오름차순 (asc), 내림차순 (desc) 정렬 실시 본문
JavaScript
68. (javascript/자바스크립트) array sort 사용해 특정 데이터 오름차순 (asc), 내림차순 (desc) 정렬 실시
투케이2K 2021. 6. 20. 09:12/* =========================== */
[ 개발 환경 설정 ]
개발 툴 : Edit++
개발 언어 : javascript
/* =========================== */
/* =========================== */
[소스 코드]
<script>
/*
[JS 요약 설명]
1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
2. [] 대괄호 : 배열 객체를 선언할 때 사용합니다
3. JSON.stringify : json 데이터를 문자열로 나타내줍니다
4. sort : 배열 데이터를 정렬할 때 사용합니다
*/
/* html 최초 로드 및 이벤트 상시 대기 실시 */
window.onload = function() {
console.log("");
console.log("window onload : start");
console.log("");
// 이벤트 함수 호출
main();
};
/* 이벤트 함수 정의 */
function main(){
console.log("");
console.log("main : start");
console.log("");
// 초기 변수 선언 실시
var int_arr = [5, 3, 1, 2, 4]; //정수
var str_arr = ["d", "A", "b", "C"]; //대소문자 혼합
var json_arr = [ {"idx" : 2, "name" : "투케이"}, {"idx" : 3, "name" : "케이투"}, {"idx" : 1, "name" : "twok"}]; //JSON
console.log("");
console.log("(초기) int_arr : " + int_arr);
console.log("(초기) str_arr : " + str_arr);
console.log("(초기) json_arr : " + JSON.stringify(json_arr));
console.log("");
// int_arr 데이터 오름차순 (작은순서) 정렬 실시
console.log("");
int_arr.sort(function(a, b) {
return a - b;
});
console.log("오름차순 int_arr : " + int_arr);
// int_arr 데이터 내림차순 (큰순서) 정렬 실시
int_arr.sort(function(a, b) {
return b - a;
});
console.log("내림차순 int_arr : " + int_arr);
console.log("");
// str_arr 데이터 오름차순 (작은순서) 정렬 실시
console.log("");
str_arr.sort(function(a, b) {
var upperCaseA = a.toUpperCase();
var upperCaseB = b.toUpperCase();
if(upperCaseA > upperCaseB) return 1;
if(upperCaseA < upperCaseB) return -1;
if(upperCaseA === upperCaseB) return 0;
});
console.log("오름차순 str_arr : " + str_arr);
// str_arr 데이터 내림차순 (큰순서) 정렬 실시
str_arr.sort(function(a, b) {
var upperCaseA = a.toUpperCase();
var upperCaseB = b.toUpperCase();
if(upperCaseA < upperCaseB) return 1;
if(upperCaseA > upperCaseB) return -1;
if(upperCaseA === upperCaseB) return 0;
});
console.log("내림차순 str_arr : " + str_arr);
console.log("");
// json_arr 데이터 특정 key 기준 오름차순 (작은순서) 정렬 실시
console.log("");
json_arr.sort(function(a, b) {
return a.idx - b.idx;
});
console.log("오름차순 json_arr : " + JSON.stringify(json_arr));
// json_arr 데이터 특정 key 기준 내림차순 (큰순서) 정렬 실시
json_arr.sort(function(a, b) {
return b.idx - a.idx;
});
console.log("내림차순 json_arr : " + JSON.stringify(json_arr));
console.log("");
};
</script>
/* =========================== */
/* =========================== */
[결과 출력]
/* =========================== */
/* =========================== */
[요약 설명]
/*
[JS 요약 설명]
1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
2. [] 대괄호 : 배열 객체를 선언할 때 사용합니다
3. JSON.stringify : json 데이터를 문자열로 나타내줍니다
4. sort : 배열 데이터를 정렬할 때 사용합니다
*/
/* =========================== */
반응형
'JavaScript' 카테고리의 다른 글
Comments