TIL-JavaScript(배열과 반복문,배열의 값 추가,삭제,정렬)

22.05.17

👩🏻‍🚒 배열과 반복문의 결합

배열의 진가는 반복문과 결합했을 때 나타납니다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기때문입니다.

// 예시
<script type="text/javascript">
function get_members(){
return['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
for(var i = 0; i < members.length; i++) {       
document.write(members[i].toUpperCase()+"<br />");
}

length는 배열의 속성입니다.
배열의 포함된 요소의 길이를 반환 합니다.
즉, 요소 개수를 의미합니다. 

toUpperCase는 소문자를 대문자로 바꿔주는 속성입니다.
브라우저 결과는 EGOING,K8805,SORIALGI로 나오게 됩니다.

반복문이 호출되는 반복횟수는 배열의 원소개수에 따라 바뀌게 됩니다.

👩🏻‍⚕️ 배열의 값을 추가

🏴 push()

push()함수는 배열의 마지막에 새로운 요소를 추가하고 난 후 변경된 배열의 길이를 반환하는 함수입니다. 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');                           // 결과 : ['a', 'b', 'c', 'd', 'e', 'f']
alert(li); 

🏴 unshift()

unshift() 함수는 배열의 첫 번째 자리에 새로운 요소를 추가하고 난 후 변경된 배열의 길이를 반환하는 함수입니다. 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');                      // 결과 : ['z', 'a', 'b', 'c', 'd', 'e']
alert(li);

🏴 concat()

2개의 배열 객체를 하나로 결합합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);          // 결과 : ['a', 'b', 'c', 'd', 'e', 'f', 'g']
alert(li);

🏴 splice()

첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴합니다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가합니다.

var li = ['a', 'b', 'c', 'd', 'e,'];
li.splice(2, 0, 'B');                 // 결과 : ['a', 'b', 'B', 'c', 'd', 'e']
alert(li);

👩🏻‍🍳 배열의 값을 삭제

🏁 shift()

배열에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();                           // 결과 : ['b', 'c', 'd', 'e']
alert(li);

🏁 pop()

배열의 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제합니다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();                            // 결과 : ['a', 'b', 'c', 'd']
alert(li);

👩🏻‍🌾 배열을 정렬

🚩 sort()

오름차순으로 배열을 정렬합니다.

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();                           // 결과 : ['a', 'b' 'c', 'd', 'e']
alert(li);

🚩 reverse()

내림차순(역순)으로 정렬합니다.

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();                         // 결과 : ['e', 'd', 'c', 'b', 'a']
alert(li);