1.자바스크립트에서 배열이란?
•
자료형 지정이 없기 때문에 모든 자료형을 보관하는 변수의 모음을 배열로처리
•
자바에서 ArrayList형태와 유사
2. 자바스크립트의 특징
•
ArrayList처럼 모든 타입의 값을 배열 형태로 담을 수 있다.
var arr5 = ['김진호', 20, true, [1,2,3,4]];
console.log(arr5);
for(var i = 0; i < arr5.length; i++) {
area1.innerHTML += 'arr5[' + i + '] : ' + arr5[i] + '<br>';
if(i == 3) {
for(var j = 0; j < arr5.length; j++) {
area1.innerHTML += 'arr5[' + i + '][' + j + '] : ' + arr5[i][j] + '<br>';
}
}
}
}
JavaScript
복사
•
배열 선언시 크기를 지정하지않고 선언가능하다
•
크기를 저장하고 선언할수도 있다
•
배열에서는 최신값으로 동기화 처리를한다(예를들면 처음에 크기가없는 배열을 선언하고 그 후에 크기에 값을 넣고 출력하면 처음에 크기가없는 배열에도 값이 들어간걸 확인할수 있다 이부분은 중요하다 >> 동적생성)
•
그리고 크기가 지정되어있는 배열에 추가적으로 값을 대입해도 추가가 된다(동적생성)
function arrayTest2() {
var area2 = document.getElementById('area2');
var arr1 = new Array();
var arr2 = new Array(3);
console.log(arr1);
console.log(arr2);
//크기를 지정하지 않은 배열에 값 대입
arr1[0] = '바나나';
arr1[1] = '복숭아';
arr1[2] = '키위';
arr1[3] = '딸기';
console.log(arr1);
//크기를 지정한 배열에 값 대입
arr2[0] = '자동차';
arr2[1] = '비행기';
arr2[2] = '도보';
//없는 인덱스에 값 대입(동적으로 생성해준다.)
arr2[3] = '기차';
console.log(arr2);
var arr3 = new Array('홍길동', '임꺽정', '신사임당');
console.log(arr3);
JavaScript
복사
ㅁ Array 객체의 메소드
Array도 하나의 객체이기 때문에 배열에서 활용할 수 있는 메소드가 있다.
ㅁ 배열에서 쓰이는 메소드는 무엇이있을까?
1.
indexOf() : 배열에서 요소가 위치하는 인덱스를 리턴
function test1(){
var arr = ['d','개발자', '무역유통', '중국어샘']
var str = prompt('당신의 선택은???')
area1 = document.getElementById('area1');
area1.innerHTML = '당신이 선택한 직업은 ' + arr.indexOf(str) + '순위인 ' + str + '입니다.';
}
JavaScript
복사
2. concat(배열명) : 두 개 이상의 배열을 결합할 때 사용한다.
•
concat을 써도 원본배열에는 영향을 미치지 않음
<button onclick="test2();">concat 테스트</button>
<div id="area2" class="area"></div>
<script>
function test2(){
var arr1 = ['사과', '딸기', '바나나'];
var arr2 = ['apple', 'strewberry', 'banana'];
var area2 = document.getElementById('area2');
var arr3 = arr1.concat(arr2);
area2.innerHTML += arr3 + '<br>';
area2.innerHTML += 'arr3 typeof : ' + typeof(arr3) + '<br>';
}
JavaScript
복사
3.join() : 배열을 결합하여 문자열로 반환한다
<button onclick="test4();">join 테스트 </button>
<div id="area3" class="area"></div>
<script>
function test4(){
var arr1 = ['2021년', '1월', '17일'];
var arr2 = ['일요일', 'Sunday', 'Evening'];
var arr3 = arr1.join();
console.log(arr3);
area3 = document.getElementById('area3');
console.log(area3);
area3.innerHTML += arr1 + '<br>';
area3.innerHTML += arr2 + '<br>';
area3.innerHTML += arr3 + '<br>';
area3.innerHTML +=' arr3 의 type :' + typeof(arr3) + '<br>';
area3.innerHTML += 'arr1 의 type : '+ typeof(arr1) + '<br>';
}
</script>
JavaScript
복사
4.reverse() : 배열의 순서를 뒤집는다.
•
원본 배열의 영향을준다
<button onclick="test5();"> reverse테스트 </button>
<div id="area4" class="area"></div>
<script>
function test5(){
var arr3 = [1,2,3,4,5,6,7,8,9,10];
area4.innerHTML += "원래배열은" + arr3 + '<br>';
area4 = document.getElementById('area4');
var arr4 = arr3.reverse();
area4.innerHTML += "reverse()는 원본배열에 영향을 미칩니다 기억하세요" + arr4 +'<br>';
area4.innerHTML += "reverse() 쓴후 arr3 의배열 : " + arr3 +'<br>';
}
</script>
JavaScript
복사
5. sort() : 배열을 내림차순 혹은 오름차순으로 정렬한다.
•
원본배열의 영향을준다
•
내림차순 정렬 arr.sort(function(left, right) {
return right - left;
<button onclick="test6();">sort 테스트</button>
<div id ="area5" class="area"></div>
<script>
function test6(){
var arr = ['가시리', '블루밍', '내손을 잡아', '밤편지','가가'];
var arr2 = arr.sort();
var area5 = document.getElementById('area5');
area5.innerHTML += arr2 + '<br>';
area5.innerHTML += arr.sort(function (left,right){
return right-left;
});
}
</script>
JavaScript
복사
7. push() : 배열의 맨 뒤에 요소 추가
8 .pop() : 배열의 맨 뒤 요소를 제거하고 리턴
</script>
<button onclick="test7();">push(),pop()테스트</button>
<div id="area7" class="area"></div>
<script>
function test7(){
var arr =['안녕', 'hi'];
arr.push('ni hao');
var area7 = document.getElementById('area7');
area7.innerHTML += arr + '<br>';
arr.pop();
area7.innerHTML += arr + '<br>';
}
</script>
</body>
JavaScript
복사
9.shift() : 배열의 맨 앞에 요소 제거
10.unshift() : 배열의 맨 앞에 요소 추가
<button onclick="test8();">shift(),unshift()테스트</button>
<div id="area8" class="area"></div>
<script>
function test8(){
var arr = ['스위트홈', '킹덤', '승리호'];
var area8 = document.getElementById('area8');
arr.shift();
area8.innerHTML += arr + '<br>';
arr.unshift('스위트홈');
area8.innerHTML += arr + '<br>';
}
</script>
JavaScript
복사
11.slice() : 배열의 요소를 선택해서 잘라내기
•
slice(시작인덱스, 종료인덱스) : 원본 배열에 영향을 주지 않는다
12. splice(index, 제거수, 추가값) : 원본 배열에 영향을 준다
<h4>slice() : 배열의 요소를 선택해서 잘라내기<br>
splice() : 배열의 index위치의 요소 제거 및 추가</h4>
<div id="area10" class="area"></div>
<button onclick="methodTest8();">slice, splice확인</button>
<script>
function methodTest8() {
var area10 = document.getElementById('area10');
var arr = ['가자', '어디로', '집으로', '가야지'];
area10.innerHTML += 'arr : ' + arr + '<br>';
//slice(시작인덱스, 종료인덱스) : 원본 배열에 영향을 주지 않는다
area10.innerHTML += 'slice() : ' + arr.slice(1, 2) + '<br>';
area10.innerHTML += 'arr : ' + arr + '<br>';
//splice(index, 제거수, 추가값) : 원본 배열에 영향을 준다.
area10.innerHTML += 'splice() : ' + arr.splice(2, 2, '강남으로') + '<br>';
area10.innerHTML += 'arr : ' + arr + '<br>';
}
</script>
JavaScript
복사
13 . toString() : 배열을 문자열로 반환한다.
<h4>toString() : 배열을 문자열로 반환한다.</h4>
<div id="area11" class="area"></div>
<button onclick="methodTest9();">확인하기</button>
<script>
function methodTest9() {
var area11 = document.getElementById('area11');
var arr = ['나는', '오늘', '부터', '다이어트를', '시작한다.'];
area11.innerHTML += 'arr : ' + arr + '<br>';
area11.innerHTML += 'arr.toString() : ' + arr.toString() + '<br>';
area11.innerHTML += 'typeof() : ' + typeof(arr.toString()) + '<br>';
area11.innerHTML += 'join() : ' + arr.join() + '<br>';
area11.innerHTML += 'typeof() : ' + typeof(arr.join()) + '<br>';
area11.innerHTML += 'join("/") : ' + arr.join('/') + '<br>';
}
</script>
JavaScript
복사
