[JavaScript] Array

최은서·2023년 11월 7일

자바스크립트(JavaScript)

목록 보기

7/18

1. declaration

<title>배열</title>
</head>
<body>
<script type="text/javascript">

	const array = ['포도','사과','바나나','망고'];
				//	 0	   1	  2		 3
	//배열의 요소를 출력
	document.write(array[0] + '<br>');
	document.write(array[1] + '<br>');
	document.write(array[2] + '<br>');
	document.write(array[3] + '<br>');
	document.write('------------<br>');
	
	//반복문을 이요한 배열의 요소 출력
	for(let i=0;i<array.length;i++){
		document.write('array[' + i + '] : ' + array[i] + '<br>');
	}
	document.write('------------<br>');
	
	//for in 반복문을 이용한 배열의 요소 출력
	   //인덱스 in 배열
	for(let i in array){
		document.write(array[i]);
	}
</script>
</body>
</html>

2. insert

<title>배열의 요소 추가</title>
</head>
<body>
<script type="text/javascript">

	//자바스크립트의 배열은 가변 길이이기 때문에 요소의 추가, 삭제 가능
	const array = ['포도','사과'];
	
	//배열명을 호출하면 배열의 요소를 쉼표(,)로 구분해서 문자열 반환
	document.write(array + '<br>');
	
	array[2] = '사과'; //인덱스2에 요소를 대입해서 요소의 개수가 늘어남
	document.write(array + '<br>');
	
	array[10] = '망고'; //인덱스 10에 요소를 대임하면 요소의 개수가 11이 되고
						//인덱스 10에 망고가 저장됨, 인덱스 3~9에는 데이터가 없음
	document.write(array + ', [array.length] : ' + array.length + '<br>');
	
	document.write(array[4]); //건너뛴 요소에 접근하면 undefined 값이 반환
	
</script>
</body>
</html>

3. delete

<title>배열의 요소 삭제</title>
</head>
<body>
<script type="text/javascript">

	const array = ['one','two','three'];
				//	 0	   1	  2		length = 3
	array.length = 2; //마지막 데이터 제거
	//배열의 요소 목록
	document.write(array + '<br>');
	
	array.length = 4; //길이가 증가함
	document.write(array + '<br>');
	document.write('-----------<br>');
	
	const array2 = ['포도','사과','귤'];
				//	  0		1	 2
	delete array2[1]; //제거한 위치에 빈 요소를 남김
	document.write(array2 + '<br>');
	document.write('-----------<br>');
	
	const array3 = ['포도','사과','귤','망고'];
	array3.splice(2,1); //인덱스2에 해당하는 요소부터 하나의 요소를 제거하고 인덱스 변동시킴
	document.write(array3);

</script>
</body>
</html>

4. sort

<title>배열 요소의 정렬</title>
</head>
<body>
<script type="text/javascript">

	const array = ['가','하','아','나'];
	
	array.sort(); //오름차순 정렬
	document.write(array + '<br>');
	
	array.reverse(); //현재 정렬의 반대로 정렬
	document.write(array + '<br>');
	document.wrtie('------------<br>');
	
	const array2 = [52,273,103,32];
	//숫자 정렬(오름차순 정렬)
	array2.sort(function(left,right){
		return left - right;
	}); //콜백 함수
	document.write(array2 + '<br>');
	
</script>
</body>
</html>

5. method

<title>배열의 메서드 사용</title>
</head>
<body>
<script type="text/javascript">

	const array = ['파도','하늘','구름'];

	//배열의 요소 목록
	document.write(array + '<br>');
	
	//join() : 배열의 요소 전체를 쉼표를 구분자로 반환
	document.write('array.join() : ' + array.join() + '<br>');
	document.write('array.join("-") : ' + array.join('-') + '<br>');
	
	//slice() : 지정한 인덱스 범위의 데이터를 추출해서 배열로 반환
	//지정한 인덱스부터 마지막 인덱스까지의 데이터를 추출해서 새로운 배열로 반환
	document.write('array.slice(2) : ' + array.slice(2) + '<br>');
	//시작 인덱스부터 끝 인덱스 전까지
	document.write('array.slice(1,3) : ' + array.slice(1,3) + '<br>');
	
	//concat() : 전달되는 인자를 추가하여 새로운 배열 생성
	document.write('array.concat("서울","부산") : ' +array.concat("서울","부산") + '<br>');
	document.write('array.concat(["한국","미국"]) : ' + rray.concat(["한국","미국"]) +'<br>');
	
</script>
</body>
</html>

6. push

push() : 배열 객체 마지막에 새 데이터를 삽입
pop() : 배열의 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
shift() : 배열 객체에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제
unshift() : 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입

<title>메서드를 이용한 배열의 요소 삽입/삭제</title>
</head>
<body>
<script type="text/javascript">

	const array = [];
	array.push(10,20,30);
	document.write(array + '<br>');
	
	array.push(40);
	document.write(array + '<br>');
	
	array.unshift('melon');
	document.write(array + '<br>');
	
	array.pop(); //마지막 인덱스의 데이터 삭제
	document.write(array + '<br>');
	
	array.pop();
	document.write(array + '<br>');
	
	array.shift();//배열의 시작 인덱스의 값 하나를 제거
	document.write(array);
	
</script>
</body>
</html>

7. indexOf

<title>indexOf 메서드</title>
</head>
<body>
<script type="text/javascript">

	const array = [10,20,30,40,50,50,40,30,20,10];
	
	let output1 = array.indexOf(40);
	document.write(output1 + '<br>'); //3
	
	let output2 = array.indexOf(80);
	document.write(output2 + '<br>'); //없는 값, -1 반환
	
	let output3 = array.lastIndexOf(40);
	document.write(output3 + '<br>'); //6
	
	let output4 = array.lastIndexOf(80);
	document.write(output4); //없는 값, -1 반환

</script>
</body>
</html>

8. forEach

<title>forEach</title>
</head>
<body>
<script type="text/javascript">

	const array = [1,2,3,4,5,6,7,8,9,10];
	let sum = 0;
	
	array.forEach(function(element,index,array){
		//element : 배열의 요소
		//index : 배열의 인덱스
		//array : 배열
		sum += element; //요소의 합계 구하기
		
		document.write(index + ':' + element + '->' + sum + '<br>');
		document.write('===>array : ' + array + '<br>');
	});
	document.write('----------<br>');
	
	document.write('배열 요소의 합계 :' +sum);
	
</script>
</body>
</html>

9. filter

<title>filter</title>
</head>
<body>
<script type="text/javascript">

	//filter() 메서드는 특정 조건을 만족하는 새로운 배열을 만들 때 사용
	const array = [1,2,3,4,5,6,7,8,9,10];
	
	const new_array = array.filter(function(element,index,array){
		//조건이 true이면 해당 element의 값을 넣어서 새로운 배열을 생성한 후 반환
		return element <= 5;
	});
	document.write(new_array);
	
</script>
</body>
</html>

10. map

<title>map</title>
</head>
<body>
<script type="text/javascript">

	const array = [1,2,3,4,5,6,7,8,9,10];
	//map() : 값을 새롭게 정의한 후 새로운 배열을 만들어 반환
	
	const new_array = array.map(function(element,index,array){
		return element * element;
	});
	
	document.write(new_array);
	
</script>
</body>
</html>

11. 실습

[실습]
성적을 관리하는 배열을 생성, 5과목(국어,영어,수학,과학,미술)
배열명은 score, 총점(getSum) 함수, 평균(getAvg) 함수
[출력 예시]
총점 : 120
평균 : 24

<title>실습</title>
</head>
<body>
<script type="text/javascript">
	
    const score = [99,98,90,93,88];
	
	//함수 정의
	function getSum(){
		let sum = 0;
		for(let i=0;i<score.length;i++){
			sum += score[i];
		}
		return sum;
	}
	
	function getAvg(){
				//총점		과목수
		return getSum() / score.length;
	}
	
	document.write('총점 : ' + getSum() + '<br>');
	document.write('평균 : ' + getAvg());
	
</script>
</body>
</html>

[실습]
성적을 관리하는 배열을 생성 5과목(국어,영어,수학,과학,미술)
배열명은 score, 총점(getSum) 함수, 평균(getAvg) 함수
[입력 예시] prompt 를 이용해서, 국어,영어,수학,과학,미술 성적 입력
         입력 과목은 0 ~ 100 입력 가능, 음수이거나 100을 초과하면 
         "성적은 0부터 100사이만 입력하세요" 
[출력 예시]
총점 : 140
평균 : 28

<title>실습</title>
</head>
<body>
<script type="text/javascript">
	
    const score = [];
	
	function getSum(){
		let sum = 0;
		for(let i=0;i<score.length;i++){
			sum += score[i];
		}
		return sum;
	}
	
	function getAvg(){
		return getSum()/score.length;
	}
	
	let korean = prompt('국어 입력','');
	let english = prompt('영어 입력','');
	let math = prompt('수학 입력','');
	let science = prompt('과학 입력','');
	let art = prompt('미술 입력','');
	
	if(korean < 0 || korean > 100 || english < 0 || english > 100
			|| math < 0 || math > 100 || science < 0 || science > 100
		    || art < 0 || art > 100){
		document.write('성적은 0부터 100사이만 입력하세요');
	}else{
		score.push(Number(korean),Number(english),Number(math),Number(science),Number(art));
		
		document.write('총점 : ' + getSum() + '<br>');
		document.write('평균 : ' + getAvg());
	}
	
</script>
</body>
</html>

[실습]
빈 배열에 정수를 저장하고 배열에 저장된 요소의 최대값과 최소값을 출력하시오.
[입력 예시] prompt 를 이용해서 정수 5개 입력
[출력 예시]
배열에 저장된 숫자 : 10,9,7,20,23
최대값 : 23
최소값 : 7

<title>실습</title>
</head>
<body>
<script type="text/javascript">

	const score = [];
	
	//정수 5개 입력
	for(let i=1;i<=5;i++){
		score.push(Number(prompt(i + '번 숫자 입력 : ','')));
	}
	
	//max,min에 기준값 설정
	let max = score[0], min = score[0];
	
	/* 
	for(let i=1;i<score.length;i++){
		if(max < score[i]){
			max = score[i];
		}
		if(min > score[i]){
			min = score[i];
		}
	} 
	*/
	
	//for in 반복문
	/* 
	for(let i in score){
		if(max < score[i]){
			max = score[i];
		}
		if(min > score[i]){
			min = score[i];
		}
	} 
	*/
	
	score.forEach(function(element,index,array){
		if(max < element){
			max = element;
		}
		if(min > element){
			min = element;
		}
	});
	
	document.write('배열에 저장된 숫자 : ' + score + '<br>');
	document.write('최대값 : ' + max + '<br>');
	document.write('최소값 : ' + min);
	
</script>
</body>
</html>