티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 11. JavaScript 배열

쟌쥰 2020. 1. 26. 15:54 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	//배열 선언 방식
	var arrayObj = new Array(); //배열 객체 선언
	var arrayObj01 = [ "v1", "v2", 3, 4 ]; //선언과 동시에 초기화

	var arrayObj02 = new Array(); //선언
	var arrayObj03 = new Array(5); //배열의 길이 - 초기값은 정의되지 않는다.

	var arrayObj04 = new Array(1, 2, 3, 4, 5);
	onload = function() {

		//alert(arrayObj +" : " + typeof(arrayObj));
		//alert(arrayObj01 + " : " + typeof(arrayObj)); 

		//alert(arrayObj02[0]);
		//alert(arrayObj03[0]);

		alert(arrayObj04);
	}

	function multiArr() {
		var size = 3;
		var arr = new Array(size);
		for (var i = 0; i < arr.length; i++) {
			arr[i] = new Array(size);
		}

		arr[0][0] = "수박";
		arr[0][1] = "바나나";
		arr[0][2] = "키위";

		arr[1][0] = 1;
		arr[1][1] = 2;
		arr[1][2] = 3;

		arr[2][0] = [ "java", "script" ];
		arr[2][1] = [ "jsp", "servlet" ];
		arr[2][2] = [ "test", [ "4", "5", "6" ] ];

		alert("배열 전체 : " + arr);
		alert("3 : " + arr[1][2]);
		alert("servlet : " + arr[2][1][1]);
		alert("6 : " + arr[2][2][1][2]);
	}

	function joinTest() {
		//문자열 중간에 값을 넣어줌!!
		var fruitsArr = [ "수박", "바나나", "키위", "귤" ];
		var res = fruitsArr.join(">");
		alert(res);

		var num = [ 1, 2, 3, 4, 5 ];
		alert(num.join("+") + " = " + eval(num.join("+")));
	}

	function sortTest01() {
		var arr = [ 'b', 'd', 'c', 'a', 'e' ];
		arr.sort(); //사전순 오름차순 정렬
		alert(arr);

	}

	function sortTest02() {
		var arr = [ 1, 3, 8, 6, 7, 11, 34, 22, 4 ];
		arr.sort(compareNum);
		alert(arr);
	}

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

	function reverseTest() {
		var arr = [ 1, 3, 8, 6, 7, 11, 34, 22, 4 ];
		//arr.reverse();	//인덱스 기준 거꾸로 나옴!
		arr.sort(function(a, b) {
			return b - a;
		});
		alert(arr);
	}

	function pushAndPop() {
		var queue = new Array();

		queue.push("first");
		queue.push("second");
		queue.push("third");

		alert(queue);

		var a = queue.shift(); // 배열의 앞에서부터 잘라내기
		alert(a);
		alert(queue);

		var b = queue.pop(); // 배열의 뒤에서부터 잘라내기
		alert(b);
		alert(queue);

	}

	function sliceTest() {
		var arrTest01 = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
		var subArr01 = arrTest01.slice(1, 4);	//1번지 ~ 4-1번지 까지
		alert(subArr01);
		
		var arrTest02 = new Array(4);
		arrTest02[0] = new Array(1,2);
		arrTest02[1] = new Array(3,4);
		arrTest02[2] = new Array(5,6);
		arrTest02[3] = new Array(7,8);
		var subArr02 = arrTest02.slice(1,3);
		alert(subArr02);
		alert(subArr02[1][1]);
		
		subArr02[1][1] = 60;
		alert(arrTest02);
	}
</script>


</head>
<body>
	<h1>배열 객체</h1>

	<ul>
		<li onclick="multiArr();">다중 배열</li>
		<li onclick="joinTest();">join 함수</li>
		<li>배열 정렬
			<ul>
				<li onclick="sortTest01();">sort() - 문자정렬</li>
				<li onclick="sortTest02();">sort() - 숫자정렬</li>
				<li onclick="reverseTest();">reverse() - 반대로 정렬</li>
			</ul>
		</li>
		<li onclick="pushAndPop();">비열 저장 방식
			<ul>
				<li>push()</li>
				<li>shift()</li>
				<li>pop()</li>
			</ul>
		</li>
		<li onclick="sliceTest();">slice() - 배열의 부분을 잘라 새로운 배열 생성</li>
	</ul>



</body>
</html>

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 13. checkbox & select  (0) 2020.01.26
[JavaScript] 12. 팝업창, 윈도우, location  (0) 2020.01.26
[JavaScript] 10. String 객체 사용  (0) 2020.01.26
[JavaScript] 9. Math 객체 사용  (0) 2020.01.26
[JavaScript] 8. Date 객체 사용  (0) 2020.01.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함