JavaScript 배열의 문법

배열이란?

다양한 타입의 데이터를 보관하는 변수의 모음.

[ ]를 통해 생성과 초기화를 동시에 처리가능

자료형 지정이 없어 모든 자료형(숫자, 문자열, 함수, Boolean, undefined, 객체)이 다 데이터로 저장가능(자바의 컬렉션과 비슷)

var arr = [123, '안녕?',function()....];

배열선언

new연산자와 Array객체를 통한 배열의 선언, 배열크기를 정하지않고 선언/배열크기를 정하는 선언

var arr = new Array();

var arr = new Array(10);

배열초기화

1) var arr = new Array('사과', '오렌지', '포도');

var arr = ['사과', '오렌지', '포도'];

2) var arr = new Array(3);

arr[0] = 356;

arr[1] = 111;

arr[2] = 222;

Array객체 메소드

이름	설명
indexOf()	배열에서 요소가 위치한 인덱스 리턴
concat()	두 개 또는 세 개의 배열을 결합한다.
join()	배열을 결합하고 하나의 문자열로 반환
reverse()	배열의 순서를 뒤집는다.
sort()	배열의 내림차순 또는 오름차순을 정렬
push()	배열의 맨 뒤에 요소 추가
pop()	배열의 맨 뒤에 요소 제거
shift()	배열에서 첫번째 요소 제거
unshift()	배열의 앞에 새로운 요소 추가
slice(숫자,숫자)	배열의 요소 선택 잘라내기(원본 보존)
splice(대체할 값(index), 제거수, 추가 값)	배열의 index 위치의 요소 제거, 추가
toString()	배열을 문자열로 반환

<h1>배열 매소드 이용하기</h1>

<h3>indexof(): 배열에서 요소가 위치한 인덱스 번호를 리턴</h3>

<div id="area1"></div>

<button onclick="indexOfTest();"> 실행</button>

<script>

function indexOfTest(){

var area = document.getElementById("area1");

var ar1 = ['사과','복숭아','딸기','청포도','파인애플'];

area.innerHTML +='ar1 = '+ar1+"<br>";

area.innerHTML +='indexOf(딸기)'+ar1.indexOf('딸기')+"<br>";

area.innerHTML +='indexOf(청포도)'+ar1.indexOf('청포도')+"<br>";

var fruit = ar1[indexOf('딸기')];

}

</script>

<h3>concat(배열명)</h3>

<p>두개 이상의 배열을 합치는 매소드</p>

<div id="area2"></div>

<button onclick="concatTest();">실행</button>

<script>

function concatTest(){

var area = document.getElementById("area2");

var ar1=['강아지','고양이','소'];

var ar2=['닭','돼지','늑대','양'];

var ar3 = ar1.concat(ar2);

area.innerHTML +=ar1+"<br>";

area.innerHTML +=ar2+"<br>";

area.innerHTML +=ar3+"<br>";

}

</script>

<h3>join()</h3>

<p>배열을 문자열로 결합해 반환해주는 함수, 매개변수에 특정값을 주면

그 값을 구분자로 넣어서 결합

</p>

<div id="area3"></div>

<button onclick="joinTest();">실행</button>

<script>

function joinTest(){

var area = document.getElementById('area3');

var ar=['티라노','트리케라톱스','브라키오사우르스','스테고사우르스']

var result = ar.join();

area.innerHTML+='join결과:'+result+' 자료형:'+typeof(result)+'<br>';

//문자를 합칠때 요소 사이사이에 - 를 추가해 결합

var result = ar.join('-');

area.innerHTML+='join결과:'+result+' 자료형:'+typeof(result);

}

</script>

<h3>sort()</h3>

<p>배열을 내림차순이나 오름차순으로 정렬해주는 매소드!</p>

<div id="area4"></div>

<button onclick="sortTest();">실행</button>

<script>

function sortTest(){

var area = document.getElementById('area4');

var arr=[5,4,8,1,7,9,2,3];

area.innerHTML +='기본정렬:'+arr.sort()+'<br>';

//내림차순으로 정렬

area.innerHTML +='내림정렬:'+arr.sort(sort2)+'<br>';

area.innerHTML +='내림정렬:'+arr.sort(function (left,right){

return right-left;

})+'<br>';

var ar1=['가','라','다','바','나'];

area.innerHTML +='기본정렬:'+ar1.sort()+'<br>';

area.innerHTML +='기본정렬:'+ar1.sort(sort3)+'<br>';

}

function sort3(left,right){

if(left>right) return -1;

if(left<right) return +1;

return 0;

}

function sort2(left,right){

//내림차순

return right-left;

}

</script>

<h1>배열의 값들을 수정하는 매소드</h1>

<h3>push(), pop()</h3>

<p>push() : 배열의 맨뒤에 값을(요소) 추가<br>

pop() : 배열의 맨뒤의 값을(요소) 제거

</p>

<div id="area5"></div>

<button onclick="pushTest();">실행</button>

<script>

function pushTest(){

var area = document.getElementById('area5');

var arr = ['개미','사슴벌레','장수풍뎅이'];

area.innerHTML +=arr+'<br>';

arr.push('뿌왁');

area.innerHTML +=arr+'<br>';

arr.pop();

area.innerHTML +=arr+'<br>';

}

</script>

<h3>unshift()/shift()</h3>

<p>

unshift() : 배열의 맨앞에 값을(요소) 추가<br>

shift() : 배열의 맨앞의 값을(요소) 제거

</p>

<div id="area6"></div>

<button onclick="shiftTest()">실행</button>

<script>

function shiftTest(){

var area = document.getElementById('area6');

var arr = ['손흥민','호날두','메시','이강인','모드리치'];

area.innerHTML+='arr : '+arr+'<br>';

area.innerHTML+='arr.shift : '+arr.shift()+'<br>';

area.innerHTML+='arr : '+arr+'<br>';

arr.unshift('기성용');

area.innerHTML+='arr : '+arr+'<br>';

}

</script>

<h3>slice()/splice()</h3>

<p>slice(number, number) : 배열의 요소를 선택해서 새배열을 만드는것

splice(start, deletecount, item(value)) : 배열의 index위치의 요소를 제거 및 추가

</p>

<div id="area7"></div>

<button onclick="sliceTest();">실행</button>

<script>

function sliceTest(){

var area = document.getElementById('area7');

var arr =['자바','자바스크립트','오라클','html','css'];

//원본이 보존됨

area.innerHTML +='arr :'+arr+'<br>';

area.innerHTML +='slice():'+arr.slice(1,3)+'<br>';

area.innerHTML +='arr:'+arr+'<br>';

//짤라내고 다른값을 대입 가능하다.

area.innerHTML +='splice():'+arr.splice(1,2,'jsp&servlet')+'<br>';

area.innerHTML +='arr:'+arr+'<br>';

}

</script>

<h3>reverse()</h3>

<p>배열의 순서를 뒤집어 주는 것</p>

<div id="area8"></div>

<button onclick="reverse();">실행</button>

<script>

function reverse(){

var area = document.getElementById('area8');

var arr =[1,2,3,4,5,6,7,8];

arr.reverse();

area.innerHTML += arr;

}

</script>

<h1>먹방 리스트 작성 문제</h1>

<p>1.배열에 먹방리스트를 작성하고, 사용자에게 입력받은 값을 추가해보기<br>

2.사용자한테 입력받은 음식의 위치를 확인하고 출력해보기<br>

3.배열에 구분자를 *로 하여 출력해보기

</p>

<div id="area10"></div>

<button onclick="foodList();">실행</button>

<script>

function foodList(){

var area = document.getElementById('area10');

var food = ['돈까스','순대국','닭볶음탕','칼국수'];

food.push(prompt("먹고싶은 음식을 적으세요!"));

area.innerHTML += food+'<br>';

var search = prompt("찾고싶은 음식을 적으세요!");

area.innerHTML +=search+"은 "+food.indexOf(search)+"번째에 존재합니다."+'<br>';

var newfood = food.join('*');

area.innerHTML += newfood+'<br>';

}

</script>

sort()메소드

문자열 기준 오름차순으로 정렬

매개변수로 들어가는 함수에는 기본 2개의 매개변수 설정

배열변수.sort(function(left, right){

return left - right //오름차순

return right - left //내림차순

});