JS - 배열 다루기

배열을 조작할 수 있는 함수는 다음 표를 참고합니다.

함 수	설 명
isArray()	주어진 값이 배열인지 검증. true | false 중 하나 Ex.) Array.isArray(배열);
pop()	마지막 원소를 제거하고, 제거한 원소를 반환
push()	배열의 끝에 새로운 원소를 추가 Ex.) push(배열);
shift()	배열의 멘 앞의 원소를 제거하고, 제거한 원소를 반환
unshift()	배열의 맨 앞에 새로운 원소를 추가 Ex.) unshift(배열);
reverse()	배열의 순서를 역순으로 정렬
sort()	배열의 순서를 오름차순으로 정렬
concat()	두 배열을 하나로 합침 단지 합친 배열을 반환만 하며 기존 배열에는 영향을 받지 않음 Ex.) concat(배열);
indexOf()	찾는 값이 해당 배열의 처음으로 나오는 위치를 인덱스로 반환 Ex.1) indexOf(찾는 문자열); Ex.2) indexOf(찾는 문자열, 시작 인덱스);
lastIndexOf()	찾는 값이 해당 배열의 마지막으로 나오는 위치를 인덱스로 반환 Ex.1) lastIndexOf(찾는 문자열); Ex.2) lastIndexOf(찾는 문자열, 시작 인덱스);
slice()	지정한 a 지점과 b 지점 사이의 배열을 추출하여 반환. 음수이면 배열 끝에서 시작 Ex.) slice( a 지점, b 지점 );
splice()	배열에서 특정 범위의 값들을 제거하고, 그 자리에 새로운 값들로 채움
split()	문자열을 구분자로 나누어 배열로 만듬 Ex.) split(나눌 구분자);
join()	배열을 하나의 문자열로 만듭니다. Ex.) join(합칠 구분자);

isArray()

주어진 값이 배열인지 검증해 보겠습니다.

<script>
alert(Array.isArray([1,2,3])); // true

alert(Array.isArray([])); // true

alert(Array.isArray({})); // false

alert(Array.isArray(1)); // false
</script>

shift() 와 pop()

배열의 처음과 마지막 원소를 제거해 보겠습니다.

<script>
 var vars = ["name", "value", true, 3.14, [1, 2, 3]];

 // 마지막 원소를 제거하고, 제거한 원소를 반환
 document.write(vars.pop()); // 1,2,3
 // 처음 원소를 제거하고, 제거한 원소를 반환
 document.write(vars.shift()); // name


 // 첫 번째와 마지막 원소가 제거된 상태이므로
 // 첫 번째 원소는 value 가 됩니다.
 document.write( vars[0] + "<br/>"); // value
 document.write( vars[1] + "<br/>"); // true
 document.write( vars[2] + "<br/>"); // 3.14
 document.write( vars[3] + "<br/>"); // undefined
 document.write( vars[4] + "<br/>"); // undefined
</script>

unshift() 와 push()

배열의 마지막과 첫 부분에 새로운 원소를 추가해 보겠습니다.

<script>
 var vars = ["name", "value", true, 3.14, [1, 2, 3]];
 document.write( vars[0] + "<br/>"); // name
 document.write( vars[1] + "<br/>"); // value
 document.write( vars[2] + "<br/>"); // true
 document.write( vars[3] + "<br/>"); // 3.14
 document.write( vars[4] + "<br/>"); // 1,2,3

 // 배열 첫 부분에 one 원소를 추가 
 vars.unshift("one");
 // 배열 마지막 부분에 hello 원소를 추가
 vars.push("hello");
 document.write( vars[0] + "<br/>"); // one
 document.write( vars[6] + "<br/>"); // hello
</script>

reverse(), concat(), split(), join()

<script>
 var vars = ["name", "value", true, 3.14, [1, 2, 3]];
 var vars2 = Array("habony", "php");
 document.write( vars[0] + "<br/>"); // name
 document.write( vars[1] + "<br/>"); // value
 document.write( vars[2] + "<br/>"); // true
 document.write( vars[3] + "<br/>"); // 3.14
 document.write( vars[4] + "<br/>"); // 1,2,3

 // 두 배열을 하나로 합칩니다. 
 var new_arr = vars.concat(vars2);
 document.write( new_arr + "<br/>"); 
 // name,value,true,3.14,1,2,3,habony,php
 document.write( new_arr[6] + "<br/>"); // php


 
 // 문자열을 "-" 로 나눈 각 문자열을 배열로 변환
 var str = "1-2-3-4-5";
 var str_arr = str.split("-");
 document.write( str_arr + "<br/>"); // 1,2,3,4,5
 
 // 역순으로 정렬합니다.
 document.write( str_arr.reverse() + "<br/>"); // 5,4,3,2,1

 // 배열을 하나의 문자열로 합침니다.
 document.write( str_arr.join(" ") ); // 1 2 3 4 5
</script>

splice()

splice() 는 배열에서 특정 범위의 값들을 추출하여, 그 자리에 새로운 값들로 채울 수 있습니다. 문법은 다음과 같습니다.

arr.splice( start, count );

arr.splice( start, count, value1, value2, ... );

첫 번째 방법은 start 부터 count 수 만큼 제거하여 반환하고, 0부터 카운더합니다. 두 번째 방법은 start 부터 count 수 만큼 제거하고 그 자리에 value1, value2 로 채웁니다.

다음은 세 번째 배열부터 3개를 제거하고, 제거한 값을 after 에 저장합니다.

<script>
  var before = [ '1', '2', '3', '4', '5', '6' ];
  var after = before.splice( 2, 3 );

  document.write( '<div>before : ' + before + '</div>' );
  document.write( '<div>after : ' + after + '</div>' );
  /*
    결과:
    before : 1,2,6
    after : 3,4,5
  */
</script>

다음은 2, 3 값을 제거하고 그 자리에 7과 8로 채웁니다. 그리고 제거한 값들은 after 에 저장합니다.

<script>
  var before = [ '1', '2', '3', '4', '5', '6' ];
  var after = before.splice( 1, 2, '7', '8' );

  document.write( '<div>before : ' + before + '</div>' );
  document.write( '<div>after : ' + after + '</div>' );
  /*
    결과:
    before : 1,7,8,4,5,6
    after : 2,3
  */
</script>