다양한 타입의 데이터를 보관하는 변수의 모음.
<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>