자바스크립트의 문자열 배열을 정렬하기 위해 sort 메서드와 reverse 메서드를 사용한다. sort 메서드는 배열의 값을 오름차순으로 정렬하고 reverse 메서드는 배열의 값을 내림차순으로 정렬한다. 정렬은 화면에 뭔가를 표시하거나 또는 개발시 데이터를 쉽게 찾도록 하고 사용자에 편의성을 제공한다.
자바스크립트 문자열 배열 정렬
Sorting Javascript Sring Array
배열을 하다보면 정렬이 필요할 때가 있다.
화면에 결과를 표식하기 전에 순차로 정리를 할 필요가 있을 때이다.
또는 화면에서 사용자가 정렬을 필요로 할 때도 기능이 필요할 때가 있다.
자바스크립트 배열을 정렬하려면 sort 메서드와 reverse 메서드를 사용하면 된다.
sort() reverse() 메서드
sort와 reverse 메서드는 자바스크립트 배열을 정렬하는 기능을 한다.
sort 메서드는 오름차순을 reverse 메서드는 내림차순으로 정렬을 한다.
메서드이기 때문에 배열의 점으로 사용할 수 있다.
사용법은 아래와 같다.
//- 오름차순
Array.sort()
//- 내림차순
Array.reverse()샘플 코드
위의 사용법으로 자바스크립트 문자열 배열을 정렬해 보도록 한다.
원본배열을 대충 하나 만들어 놓고, sort 메서드와 reverse 메서드를 사용한다.
이후 결과화면을 보도록 한다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
</div>
<script>
console.log('----------')
/**
* 원본 배열
*/
let vCars = ['현대자동차', '기아자동차', '쌍용자동차', '쉐보레'];
console.log(typeof(vCars), vCars);
document.querySelector('#ret1').innerHTML = vCars;
console.log('----------')
/**
* 정렬 : 오름차순
*/
vCars.sort();
console.log(typeof(vCars), vCars);
document.querySelector('#ret2').innerHTML = vCars;
console.log('----------')
/**
* 정렬 : 내림차순
*/
vCars.reverse();
console.log(typeof(vCars), vCars);
document.querySelector('#ret3').innerHTML = vCars;
console.log('----------')
</script>
</body>
</html>원본배열을 하나 만들었다.
이후 sort 와 reverse 메서드로 문자열 배열을 정렬하고 있다.
웹페이지와 log 가 어떻게 찍히는지 비교를 해 보도록 한다.
결과 화면을 보자.
가장 첫번째 문자열은 원본 배열이다.
두번째 세번째는 각각 오름차순과 내림차순을 보여준다.
sort 메서드는 오름차순으로 reverse 메서드는 내림차순이 되는 것을 볼 수 있다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 숫자 배열 비교 함수 정렬 Sorting Javascript Number Array Compare Function (0) | 2022.01.03 |
|---|---|
| 자바스크립트 숫자 배열 정렬 Sorting Javascript Number Array (0) | 2022.01.02 |
| 자바스크립트 배열의 요소 값 삭제하기 slice 메서드 (0) | 2021.12.29 |
| 자바스크립트 배열 값 추가 splice 사용법 (0) | 2021.12.28 |
| 자바스크립트 배열 합치기 Merging Javascript Array (0) | 2021.12.27 |
댓글