자바스크립트 개발시 배열의 length 요소와 sort() 메서드는 자주 사용된다. length 요소는 배열의 길이 또는 갯수를 알 수 있다. sort() 메서드는 배열의 내용을 정렬하여 보기 편하게 한다. 이들의 사용은 배열의 값에 접근하고 가공할 때 유용하다.
자바스크립트 배열 길이와 정렬하기
javscript array length and sort
자바스크립트에서 알게 모르게 가장 많이 사용하는 것이 배열의 length 요소이다.
이것은 배열의 길이를 가져오는 것으로써 결과값에 수시로 변경되는 배열의 길이를 동적으로 처리하는데 기준이 된다.
그 다음 사용하는 것이 sort() 메서드이다.
이것은 배열에 들어있는 요소를 데이터별로 정렬해주는 기능을 한다.
이 두가지는 자바스크립트 개발시 자주 사용되기도 한다.
배열 길이와 정렬
배열을 다루는데 길이와 정렬을 하면 편하다.
일목요연하게 정리된 배열의 값들을 가공하기에도 편하고 화면에 표시하여 데이터가공의 토대가 된다.
배열의 길이를 알면 반복문을 처리하는데 편하다.
이 2가지는 각각 배열의 length 요소와 sort() 메서드로 처리할 수 있다.
length 요소는 배열의 길이를 알 수 있다.
Array.sort() 메서드는 배열의 데이터들을 정렬한다.
Array.length
Array.sort()샘플코드
위의 사용법으로 샘플코드를 하나 만들어 본다.
코드는 많이 보는 것이 좋다.
결과값을 같이 보면 굳이 코딩을 하지 않아도 금방 이해할 수 있다.
비교를 위해 console.log() 와 html 화면에 같이 출력하도록 한다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 배열 객체</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
</div>
<script>
let comp = "스타쉽";
let team = "아이브";
let members = ["리즈","레이","원영","유진","가을","이서"];
let count = members.length;
console.log("----------");
vArray = new Array(comp, team, count, members);
console.log("배열원본 : ", vArray);
document.getElementById("ret1").innerHTML = vArray;
console.log("----------");
let vLength = vArray.length;
console.log("배열갯수 : ", vLength);
document.getElementById("ret2").innerHTML = vLength;
console.log("----------");
let vSort = vArray.sort();
console.log("배열정렬 : ", vSort);
document.getElementById("ret3").innerHTML = vSort;
console.log("----------");
</script>
</body>
</html>코드가 길다.
길어봤자 length 요소와 sort() 메서드만 보면 된다.
다시 언급해 본다.
length 요소는 배열의 길이 또는 갯수를 가져온다.
Array.sort() 메서드는 배열의 내용을 정렬한다.
결과화면을 보자.
원본과 비교해 봤을 때 차이가 있음을 확인할 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 처음과 마지막 접근 accessing javascript array first and last value (0) | 2021.12.21 |
|---|---|
| 자바스크립트 배열과 반복문 4가지 using javascript array loop (0) | 2021.12.20 |
| 자바스크립트 배열의 데이터타입 javascript array data type (0) | 2021.12.18 |
| 자바스크립트 배열 화면 출력 display javascript array values (0) | 2021.12.17 |
| 자바스크립트 배열 값 변경 changing javascript array value (0) | 2021.12.17 |
댓글