3일만에 끝내는 HTML, CSS, JS 기초
j26. 자바스크립트 배열 메서드 2/2 본문
자바스크립트 배열 메서드 2/2
sort() 메서드는 알파벳 순서로 배열의 요소를 정렬하고, reverse() 는 그 것을 다시 역순으로 정렬합니다.
sort() 메서드로 배열의 각 요소를 알파벳 순서로 정렬 할 수 있습니다. 한편 reverse() 메서드를 사용하면 배열내 각 요소를 역순으로 정렬 할 수 있습니다.<p>sort() 메서드는 알파벳 순서로 배열의 요소를 정렬하고, reverse() 는 그 것을 다시 역순으로 정렬합니다.</p> <button onclick="myFunction()">알파벳 역순으로 정렬 합니다.</button> <p id="sort1"></p> <script> var hyundaiSort = ["IONIQ 아이오닉", "AVANTE 아반떼", "SANTAFE 싼타페", "EQUUS 에쿠스"]; document.getElementById("sort1").innerHTML = hyundaiSort; function myFunction() { hyundaiSort.sort(); hyundaiSort.reverse(); document.getElementById("sort1").innerHTML = hyundaiSort; } </script>
아래의 원래 배열의 요소들을 sort() 메서드로 정렬해 보겠습니다.
기본값으로, sort() 메서드는 값도 문자열로 정렬 시킵니다. 그래서 숫자를 정렬 할 때는 문제가 발생합니다. 예를 들어 1, 2, 100, 200 이 있다고 하면, sort() 메서드는 1, 100, 2, 200 으로 정렬시킬 것입니다. 문자에서는 100 의 1 이 2 보다 작기 때문에 앞에 올 것입니다. 그래서 sort() 메서드는 숫자를 정렬할 때는 잘못된 결과를 생성하게 됩니다. 이 문제는 비교 함수 (compare function) 로 해결할 수 있습니다.<p>아래의 원래 배열의 요소들을 sort() 메서드로 정렬해 보겠습니다.</p> <p id="sortCompare1"></p> <button onclick="mySortCompare2Function()">비교 함수 없이 sort() 한 경우 결과보기</button> <p id="sortCompare2"></p> <button onclick="mySortCompare3Function()">비교 함수 사용하여 sort() 한 경우 결과보기</button> <p id="sortCompare3"></p> <script> var sortCompare5 = [12, 5, 2, 90, 6, 41, 1000]; document.getElementById("sortCompare1").innerHTML = sortCompare5; function mySortCompare2Function() { sortCompare5.sort(); document.getElementById("sortCompare2").innerHTML = sortCompare5; } function mySortCompare3Function() { sortCompare5.sort(function(a, b){return a-b}); document.getElementById("sortCompare3").innerHTML = sortCompare5; } </script>
비교 함수 (Compare Function) 는 정렬되는 순서 (an alternative sort order) 를 정의하기 위해 사용됩니다. 비교 함수 (compare function) 는 인수 (arguments) 에 따라, 음의 값 (negative), 0 (zero), 또는 양의 값 (positive value) 를 반환해야 합니다.function(a, b){return a-b} 또는 function(a, b){return a>b}sort() 함수가 두개의 값을 비교할 때, 비교 함수 (compare function) 에 값을 전달 합니다. 그리고 반환된 값 (음의 값 negative, 0 zero, 양의 값 positive) 에 따라 값들을 정렬 합니다. 예를 들어, 위의 예에서, 맨처음 12 와 5 를 비교할 때 sort() 메서드가, 비교 함수 function(12, 5) 를 호출합니다. 이 때 비교 함수가 12 - 5 를 계산하게 되고, 양의 값 7 을 반환합니다. sort 함수는 양의 값이 반환 되면 앞의 값이 더 크다고 판단하고 12 를 5 보다 뒤에 정렬하게 됩니다.
다음 중 최대 값은 입니다.
다음 중 최소 값은 입니다.
최대 값 (the highest value) 과 최소 값 (the lowest value) 을 배열에서 찾아 표시해 보겠습니다.<p>다음 중 최대 값은 <span id="highestLowest1"></span> 입니다.</p> <p>다음 중 최소 값은 <span id="highestLowest3"></span> 입니다.</p> <p id="highestLowest2"></p> <script> var highestLowest5 = [12, 5, 2, 90, 6, 41, 1000]; document.getElementById("highestLowest2").innerHTML = highestLowest5; highestLowest5.sort(function(a, b){return b-a}); document.getElementById("highestLowest1").innerHTML = highestLowest5[0]; highestLowest5.sort(function(a, b){return a-b}); document.getElementById("highestLowest3").innerHTML = highestLowest5[0]; </script>
현대차와 기아차 차종입니다.
현대차 :
기아차 :
하나 더 :
concat() 메서드는 두개 이상의 배열 들을 연결하여 (by concatenating) 새로운 배열을 생성합니다.<p>현대차와 기아차 차종입니다.</p> <p>현대차 : <span id="myConcat1"></span></p> <p>기아차 : <span id="myConcat2"></span></p> <p>하나 더 : <span id="myConcat3"></span></p> <button onclick="myConcatFunction()">배열 3개를 합해 보겠습니다.</button> <p id="myConcat5"></p> <script> var hyundaiConcat = ["아이오닉", "아반떼", "싼타페", "에쿠스"]; var kiaConcat = ["오피러스", "쏘렌토", "프라이드", "모닝"]; var oneMoreConcat = ["그랜저"]; document.getElementById("myConcat1").innerHTML = hyundaiConcat; document.getElementById("myConcat2").innerHTML = kiaConcat; document.getElementById("myConcat3").innerHTML = oneMoreConcat; function myConcatFunction() { var carResult = hyundaiConcat.concat(kiaConcat, oneMoreConcat); document.getElementById("myConcat5").innerHTML = carResult; } </script>
slice() 메서드에 2개의 인수 (arguments) 를 입력하면, 배열 요소에서 첫 번째 인수 에서부터 두번째 인수 바로 전까지 잘라 냅니다.
즉 .slice(2,4); 이면, 3번째 값에서 5번째 값 바로전인 4번째 값까지를 잘라냅니다.
slice() 메서드는 배열의 일부를 잘라내어, 새로운 배열로 만듭니다.<p>slice() 메서드에 2개의 인수 (arguments) 를 입력하면, 배열 요소에서 첫 번째 인수 에서부터 두번째 인수 바로 전까지 잘라 냅니다. </p> <p>즉 .slice(2,4); 이면, 3번째 값에서 5번째 값 바로전인 4번째 값까지를 잘라냅니다.</p> <p id="slice1"></p> <p id="slice2"></p> <script> var slice3 = ["아이오닉", "아반떼", "싼타페", "에쿠스", "오피러스"]; var slice5 = slice3.slice(2,4); document.getElementById("slice1").innerHTML = slice3; document.getElementById("slice2").innerHTML = slice5; </script>이때 두번째 인수 (argument) 를 주지 않으면, 맨 끝에 까지 잘라냅니다.
[광고] Udemy 동영상 강의로 보기
'JAVASCRIPT' 카테고리의 다른 글
j28. 자바스크립트 비교 및 논리 연산자 (0) | 2016.06.05 |
---|---|
j27. 자바스크립트 불리언 (0) | 2016.06.05 |
j25. 자바스크립트 배열 메서드 1/2 (0) | 2016.06.05 |
j24. 자바스크립트 배열 (0) | 2016.06.05 |
j23. 자바스크립트 날짜 메서드 (0) | 2016.06.05 |