[JavaScript] 배열(Array)

JS 관련/JavaScript

[JavaScript] 배열(Array)

씨네 2022. 1. 21. 12:26

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

	.select{
		cursor: pointer;
	}

</style>
<script type="text/javascript">

	onload=function(){
		// 배열 선언방법
		var arrObj01 = new Array();
		var arrObj02 = ["one", "two", 3, 4];
		//alert(typeof(arrObj01) + " : " + arrObj01);
		//alert(typeof(arrObj02) + " : " + arrObj02);
		
		// 길이 정의 선언
		var arrObj03 = new Array(5);
		// 초기값 X (undefined)
		//alert(arrObj03[2]);
		
		// 초기값 정의되먼서 선언
		var arrObj04 = new Array(1, 2, 3, 4, 5, 6, 7);
		for(var i = 0; i < arrObj04.length; i++){
			//alert("[" + arrObj04 + "]");
		}
	}
	
	function multiArr(){
		var len = 3;
		var arr = new Array(len);
		
		for(var i = 0; i <arr.length; i++){
			arr[i] = new Array(len);
		}
		arr[0][0] = "딸기";
		arr[0][1] = "당근";
		arr[0][2] = "수박";
		arr[1][0] = 1;
		arr[1][1] = 2;
		arr[1][2] = 3;
		arr[2][0] = ["test", "javascript"];
		arr[2][1] = ["java", "oracle"];
		arr[2][2] = ["ui",["html","css"]];
		
		alert(arr[0][2] + arr[2][2][1][1]);
	}
	
	function joinTest(){
		var cars = ["볼보","코닉세그 래제라","캠핑카","마세라티","아우디A8","재규어","티볼리","셀토스","bmw미니"];
		var res = cars.join("\n");
		alert(res)
	}

	
	function sortTest01(){
		//아스키 코드순으로 순서 정렬
		var arr = ["z","a","s","d","f","x","c"];
		arr.sort();
		alert(arr);
	}
	
	function sortTest02(){
		var arr = [10, 34, 1, 25, 8, 22];
		arr.sort(compareNum);
		alert(arr);
	}

	function compareNum(a, b){
		return a - b;
	}
	
	function reverseTest(){
		var arr = [19, 2, 22, 41, 33, 5]
		arr.reverse();
		alert(arr);
	}
	
	function pushAndShift(){
		var queue = new Array();
		
		queue.push("first");
		queue.push("second");
		queue.push("third");
		alert(queue);
		
		// 배열의 앞에서 잘라내기
		var a = queue.shift();
		alert(a);
		alert(queue);
		
		queue.push(4);
		queue.push(5);
		
		// 배열의 뒤에서 잘라내기
		var b = queue.pop();
		alert(b);
		alert(queue);
	}
	
	function sliceTest(){
		var array01 = new Array(1, 2, 3, 4, 5, 6, 7);
		var slice01 = array01.slice(1, 3);
		alert(slice01);
		
		var array02 = new Array(4);
		array02[0] = new Array(1, 2);
		array02[1] = new Array(3, 4);
		array02[2] = new Array(5, 6);
		array02[3] = new Array(7, 8);
		
		var slice02 = array02.slice(1,3);
		alert(slice02);
		
		slice02[0][1] = 40;
		alert(array02);
	}
	
</script>
</head>
<body>

	<h1>배열 객체</h1>
	
	<ul>
		<li onclick="multiArr();" class="select">다중 배열</li>
		<li onclick="joinTest();" class="select">join 함수</li>
		<li>
			배열 정렬
			<ul>
				<li onclick="sortTest01();" class="select">문자 정렬</li>
				<li onclick="sortTest02();" class="select">숫자 정렬</li>
				<li onclick="reverseTest();" class="select">역순 정렬</li>
			</ul>
		</li>
		<li onclick="pushAndShift();" class="select">
			배열 저장방식
			<ul>
				<li>push()</li>
				<li>shift()</li>
				<li>pop()</li>
			</ul>
		</li>
		<li onclick="sliceTest();" class="select">slice()</li>
	</ul>
</body>
</html>

기본 출력내용입니다!

선언방법

onload=function(){
	// 배열 선언방법
	var arrObj01 = new Array();
	var arrObj02 = ["one", "two", 3, 4];
	//alert(typeof(arrObj01) + " : " + arrObj01);
	//alert(typeof(arrObj02) + " : " + arrObj02);

	// 길이 정의 선언
	var arrObj03 = new Array(5);
	// 초기값 X (undefined)
	//alert(arrObj03[2]);
		
	// 초기값 정의되먼서 선언
	var arrObj04 = new Array(1, 2, 3, 4, 5, 6, 7);
	for(var i = 0; i < arrObj04.length; i++){
		//alert("[" + arrObj04 + "]");
	}
}

배열의 선언방법입니다.( 출력해보고싶으신분은 주석 빼고 출력해보세요! )

자바와 선언방법 자체는 비슷하죠?

다중배열

function multiArr(){
	var len = 3;
	var arr = new Array(len);
		
	for(var i = 0; i <arr.length; i++){
		arr[i] = new Array(len);
	}
	arr[0][0] = "딸기";
	arr[0][1] = "당근";
	arr[0][2] = "수박";
	arr[1][0] = 1;
	arr[1][1] = 2;
	arr[1][2] = 3;
	arr[2][0] = ["test", "javascript"];
	arr[2][1] = ["java", "oracle"];
	arr[2][2] = ["ui",["html","css"]];
		
	alert(arr[0][2] + arr[2][2][1][1]);
}

수박css 라는 글자를 출력해보기 위해 조금 복잡한 배열을 구성하였습니다!

join함수

function joinTest(){
	var cars = ["볼보","코닉세그 래제라","캠핑카","마세라티","아우디A8","재규어","티볼리","셀토스","bmw미니"];
	var res = cars.join("\n");
	alert(res)
}

배열별로 줄바꿈해서 출력해주네요!

문자 정렬

function sortTest01(){
	//아스키 코드순으로 순서 정렬
	var arr = ["z","a","s","d","f","x","c"];
	arr.sort();
	alert(arr);
}

sort 함수를 이용해서 문자를 아스키 코드 순서로 정렬할수 있습니다.

숫자 정렬

function sortTest02(){
	var arr = [10, 34, 1, 25, 8, 22];
	arr.sort(compareNum);
	alert(arr);
}

function compareNum(a, b){
	return a - b;	
}

sort함수를 이용한 숫자 정렬입니다! ( 자바스크립트 뿐만 아니라 자바등 많이 쓰이니까 잘 알아두셔야합니다! )

아래쪽 compareNum 함수는 앞뒤 숫자를 비교하기 위한 함수입니다!

역순 정렬

function reverseTest(){
var arr = [19, 2, 22, 41, 33, 5]
	arr.reverse();
	alert(arr);
}

저장된 배열의 역순출력입니다.

배열 저장방식

function pushAndShift(){
	var queue = new Array();
		
	queue.push("first");
	queue.push("second");
	queue.push("third");
	alert(queue);
		
	// 배열의 앞에서 잘라내기
	var a = queue.shift();
	alert(a);
	alert(queue);
		
	queue.push(4);
	queue.push(5);
	
	// 배열의 뒤에서 잘라내기
	var b = queue.pop();
	alert(b);
	alert(queue);
}

가장먼저 배열 저장방식이라는 영역을 클릭하였을때 출력 화면입니다.

push한 순서대로 저장됩니다.

shift로 앞에서부터 배열을 잘라냅니다.

pop으로 뒤에서부터 잘라냅니다

728x90