Array객체 메서드
- indexOf(item, start)
item : 찾는 문자
start : 시작 index (생략시 0부터) - lastIndexOf(item, start)
- 중복된 item index 찾기 (반복문 이용)
while(true){
index = 배열.indexOf(fruit, vidx);
if(index== -1){ // index=-1이면 더이상 찾지못함
break; }
index++; // 찾은 인덱스부터 검색하면 무한루프가 되어버리기 때문에 꼭 다음 인덱스부터 검색
} - push(item1, item2, item3 ...)
- pop()
마지막에 저장된 데이터 1개를 꺼냄
반환값 : 꺼내진 문자 - slice(start, end)
(기존 배열 유지)
start ~ end-1 까지의 값을 추출한다 - splice(index, n, a,b,c...)
(기존 배열 변경)
index 위치에서 n개를 삭제하고 a, b, c.. 를 추가 또는 삽입한다 - join(구분자)
구분자 생략 시 ','로 구분
indexOf, lastIndexOf 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["사과", "키위", "레몬","사과", "자몽", "토마토", "사과","멜론","수박"]
function proc1(){
let fruit = "바나나";
// 사과위치 찾기
// let vidx = arr.indexOf(fruit);
let vidx = arr.lastIndexOf(fruit);
let out = `찾는 과일 ${fruit}은 <br>`;
if(vidx==-1){
out+= "배열에 없습니다<br>";
} else {
out += ` ${vidx}번째에 있습니다<br>`;
}
document.getElementById('result1').innerHTML = out;
}
function proc2(){
let fruit = "망고";
let vidx = 0;
let str = "";
// 사과위치 찾기
while(true){
vidx = arr.indexOf(fruit, vidx);
if(vidx==-1){
break;
}
str += vidx+" ";
vidx++; // 다음 인덱스부터 검색하기 위해 인덱스를 증가시킴
}
let out = `찾는 과일 ${fruit}는 <br>`;
if (str !== "") {
out += `${str}번째에 있습니다<br>`;
} else {
out += "해당 과일을 찾을 수 없습니다<br>";
}
document.getElementById('result1').innerHTML = out;
}
</script>
</head>
<body>
<div class="box">
<h3>요소 찾기<br>indexof(item,start), lastIndexof(item, start)</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<h3>같은 이름의 과일을 모두 찾기</h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>push(), pop() 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["사과", "키위", "레몬","사과", "자몽", "토마토", "사과","멜론","수박"]
function proc3(){
let out = `원래 배열 : ${arr} <br>`;
let input = prompt("과일 입력");
arr.push(input);
out+=`추가된 배열 : ${arr} <br>`;
document.getElementById('result3').innerHTML = out;
}
function proc4(){
let out = `원래 배열 : ${arr} <br>`;
let vpop = arr.pop();
out+=`꺼낸 배열 : ${arr} <br>
꺼낸 문자 : ${vpop}`;
document.getElementById('result4').innerHTML = out;
}
</script>
</head>
<body>
<div class="box">
<h3>요소 추가/제거<br>push(item1, item2, item3 ...) pop()</h3>
<input type="button" value="push" onclick="proc3()"> <br> <br>
<h3>같은 이름의 과일을 모두 찾기</h3>
<input type="button" value="pop" onclick="proc4()"> <br> <br>
<div id="result3"></div>
<div id="result4"></div>
</div>
</body>
</html>slice() 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["사과", "키위", "레몬","사과", "자몽", "토마토", "사과","멜론","수박"]
function proc5(){
let newarr = arr.slice(1,5);
let out = `원래 배열 : ${arr} <br>`;
out+=`추출한 배열: ${newarr} <br>`;
document.getElementById('result5').innerHTML = out;
}
</script>
</head>
<body>
<div class="box">
<h3>요소 추출<br>slice(start, end) : 1~ end-1 까지의 값을 추출한다</h3>
<input type="button" value="push" onclick="proc5()"> <br> <br>
<div id="result5"></div>
</div>
</body>
</html>splice() 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["사과", "키위", "레몬","사과", "자몽", "토마토", "사과","멜론","수박"]
function proc6(){
let out = `원래 배열 : ${arr} <br>`;
arr.splice(1,2,"배추","오이","청경채"); // 1인덱스부터 2개 삭제, 3개 데이터 삽입
out+=`수정된 배열: ${arr} <br>`;
document.getElementById('result6').innerHTML = out;
}
</script>
</head>
<body>
<div class="box">
<h3>요소 추출<br>splice(index, n, a,b,c...) : index 위치에서 n개를 삭제하고 a, b, c.. 를 추가/삽입한다</h3>
<input type="button" value="push" onclick="proc6()"> <br> <br>
<div id="result6"></div>
</div>
</body>
</html>join() 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = ["사과", "키위", "레몬","사과", "자몽", "토마토", "사과","멜론","수박"]
function proc7(){
let str = arr.join(" : ");
let out = `${str} <br>`;
document.getElementById('result7').innerHTML = out;
}
</script>
</head>
<body>
<div class="box">
<h3>요소 추출<br>join() : 배열을 문자열로 변환한다</h3>
<input type="button" value="push" onclick="proc7()"> <br> <br>
<div id="result7"></div>
</div>
</body>
</html>Array 객체 문제
1. prompt()를 이용하여 이름을 계속 입력 받아 배열에 저장하고 출력하는 프로그램을 작성하시오.
- 입력의 마지막은 공백 문자를 입력하거나 “취소” 버튼을 눌렀을 때(null)로 한다.
2. 서로 중복되지 않은 정수 5개를 입력 받아 출력하는 프로그램을 작성하시오
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const proc1 = () => {
const arr = [];
while(true){
let name = prompt("이름을 입력");
if(name=="" || name==null){
break;
}
arr.push(name);
}
let disp = arr;
document.querySelector('#result1').innerText = disp;
}
const proc2 = () => {
const arr = [];
while(arr.length<5){
let num = prompt("숫자를 입력");
if(arr.indexOf(num)!=-1){
alert("중복된 숫자입니다");
} else{
arr.push(num);
}
}
let disp = arr;
document.querySelector('#result2').innerText = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>prompt()를 이용하여 이름을 계속 입력 받아 배열에 저장하고 출력하는 프로그램을 작성하시오. - 입력의
마지막은 공백 문자를 입력하거나 “취소” 버튼을 눌렀을 때(null)로 한다.</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3>서로 중복되지 않은 정수 5개를 입력 받아 출력하는 프로그램을 작성하시오</h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] String 객체 (0) | 2024.05.09 |
|---|---|
| [JavaScript] Date 객체, setInterval (+window.onload) (0) | 2024.05.08 |
| [JavaScript] 리터럴 객체 / 동적함수 / 객체생성자함수 (0) | 2024.05.07 |
| [JavaScript] 배열 / 함수 / confirm() (0) | 2024.05.07 |
| [JavaScript] 출력/변수/입력 (0) | 2024.05.01 |
