Array 객체
배열 객체(Array Object)는 여러 개의 데이터를 저장하기 위한 객체입니다.
Array 객체 생성
var 변수 = new Array();
Array 객체 속성
| 속성 | 설명 |
|---|---|
| length | 배열 요소의 개수를 알아냅니다. |
Array 객체 메서드
| 함수 | 설명 |
|---|---|
| concat() | 여러 개의 배열을 새 배열로 반환합니다. |
| copyWithin() | 두 배열의 조합으로 구성된 새 배열을 반환합니다. |
| entries() | 배열의 각 인덱스에 대한 키와 값을 반환합니다. |
| every() | 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. |
| fill() | 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 채웁니다. |
| filter() | 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. |
| find() | 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. |
| findIndex() | 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. |
| flat() | 모든 하위 배열까지 하나의 배열로 반환합니다. |
| flatMap() | 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 반환합니다. |
| forEach() | 배열 요소 각각에 대해 실행합니다. |
| includes() | 배열에 특정 요소를 포함하고 있는지 판별합니다. |
| includes() | 배열에 특정 요소를 포함하고 있는지 판별합니다. |
| indexOf() | 배열에서 지정된 요소를 찾을 수있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. |
| join() | 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. |
| keys() | 배열의 각 인덱스를 키 값으로 가지는 새로운 배열을 반환합니다. |
| lastIndexOf() | 지정된 요소가 배열에서 발견 될 수있는 마지막 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다. |
| map() | 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. |
| pop() | 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. |
| push() | 배열 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다. |
| reduce() | 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환합니다. |
| reduceRight() | 누적기에 대해 함수를 적용하고 배열의 각 값은 값을 단일 값으로 줄입니다. |
| reverse() | 배열의 순서를 반전합니다. |
| shift() | 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. |
| slice() | 배열의 일부분을 선택하여 새로운 배열 객체로 반환합니다. |
| some() | 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다. |
| sort() | 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. |
| splice() | 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. |
| toLocaleString() | 배열의 요소를 나타내는 문자열을 반환합니다. |
| toString() | 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다. |
| unshift() | 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다. |
| values() | 배열의 각 인덱스에 대한 값을 가지는 새로운 객체를 반환합니다. |
Sample1
concat()를 이용하여 여러 개의 배열을 새 배열로 반환하는 예제입니다.
결과
1,2,3,4,5,6,7,8,9,10
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>concat()</title>
<script>
var array1 = [1,2,3,4,5];
var array2 = [6,7,8,9,10];
var array3 = [11,12,13,14,15];
document.write(array1.concat(array2));
document.write(array1.concat(array2, array3),"<br>");
</script>
</head>
<body>
</body>
</html>
Sample2
join()를 이용하여 여러 개의 데이터를 문자형 데이터로 반환하는 예제입니다.
결과
1,2,3,4,5
12345
1 2 3 4 5
1,2,3,4,5
1+2+3+4+5
12345
1 2 3 4 5
1,2,3,4,5
1+2+3+4+5
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>join()</title>
<script>
var array1 = [1,2,3,4,5];
document.write(array1.join(),"<br>");
document.write(array1.join(''),"<br>");
document.write(array1.join(' '),"<br>");
document.write(array1.join(','),"<br>");
document.write(array1.join('+'),"<br>");
</script>
</head>
<body>
</body>
</html>
Sample3
배열에서 많이 사용하는 예제입니다.
결과
현재 배열 :1,2,3,4,5,6,7,8,9
반대로 출력[reverse()] : 9,8,7,6,5,4,3,2,1
현재 배열 :9,8,7,6,5,4,3,2,1
현재 배열 :9,8,7,6,5,4,3,2,1
오름차순 출력[sort()] : 1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
마지막 요소를 제거하고 그 요소를 반환[pop()] : 9
현재 배열 :1,2,3,4,5,6,7,8
현재 배열 :1,2,3,4,5,6,7,8
배열 끝에 하나 이상의 요소를 추가[push(9)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
첫 번째 요소를 제거하고, 제거된 요소를 반환[shift()] : 1
현재 배열 :2,3,4,5,6,7,8,9
현재 배열 :2,3,4,5,6,7,8,9
새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환[unshift(1)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
지정된 요소를 찾아서 인덱스를 반환[indexOf(5)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
특정 항목을 제거[splice(2,1)] : 3
현재 배열 :1,2,4,5,6,7,8,9
현재 배열 :1,2,4,5,6,7,8,9
특정 항목을 제거[splice(2,1,3,4)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
일부분을 선택하여 반환[slice(1,3)] : 2,3
현재 배열 :1,2,3,4,5,6,7,8,9
반대로 출력[reverse()] : 9,8,7,6,5,4,3,2,1
현재 배열 :9,8,7,6,5,4,3,2,1
현재 배열 :9,8,7,6,5,4,3,2,1
오름차순 출력[sort()] : 1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
마지막 요소를 제거하고 그 요소를 반환[pop()] : 9
현재 배열 :1,2,3,4,5,6,7,8
현재 배열 :1,2,3,4,5,6,7,8
배열 끝에 하나 이상의 요소를 추가[push(9)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
첫 번째 요소를 제거하고, 제거된 요소를 반환[shift()] : 1
현재 배열 :2,3,4,5,6,7,8,9
현재 배열 :2,3,4,5,6,7,8,9
새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환[unshift(1)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
지정된 요소를 찾아서 인덱스를 반환[indexOf(5)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
특정 항목을 제거[splice(2,1)] : 3
현재 배열 :1,2,4,5,6,7,8,9
현재 배열 :1,2,4,5,6,7,8,9
특정 항목을 제거[splice(2,1,3,4)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9
일부분을 선택하여 반환[slice(1,3)] : 2,3
현재 배열 :1,2,3,4,5,6,7,8,9
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reverse(), sort()</title>
<script>
var array1 = [1,2,3,4,5,6,7,8,9];
document.write("현재 배열 :" + array1,"<br>");
document.write("반대로 출력[reverse()] : " + array1.reverse(),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("오름차순 출력[sort()] : " + array1.sort(),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("마지막 요소를 제거하고 그 요소를 반환[pop()] : " + array1.pop(),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("배열 끝에 하나 이상의 요소를 추가[push(9)] : " + array1.push(9),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("첫 번째 요소를 제거하고, 제거된 요소를 반환[shift()] : " + array1.shift(),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환[unshift(1)] : " + array1.unshift(1),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("지정된 요소를 찾아서 인덱스를 반환[indexOf(5)] : " + array1.indexOf(5),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("특정 항목을 제거[splice(2,1)] : " + array1.splice(2,1),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("특정 항목을 제거[splice(2,1,3,4)] : " + array1.splice(2,1,3,4),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
document.write("현재 배열 :" + array1,"<br>");
document.write("일부분을 선택하여 반환[slice(1,3)] : " + array1.slice(1,3),"<br>");
document.write("현재 배열 :" + array1,"<br><br>");
</script>
</head>
<body>
</body>
</html>
참고(Reference)
- MDN JavaScript
