(48) [JavaScript] 4일 JavaScript Array

💻/Javascript

(48) [JavaScript] 4일 JavaScript Array

따궈 2024. 4. 24. 08:59

Array 객체는 일련의 값들을 저장할 수 있는 배열을 생성할 때 사용하는
리스트 형태의 고수준 객체.
배열의 각 요소는 배열의 이름과 인덱스로 접근하여 사용하며 인덱스는 `0`부터 시작

Array 특징

타입이 고정적이지 않다. 즉, 같은 배열에 있는 원소의 타입이 서로 다를 수 있다.
32비트 인덱스를 사용.
크기가 동적
배열을 생성하거나 크기가 변경되어 다시 할당 하더라도 배열 크기를 다시 선언할 필요가 없다.
배열 리터널에서 빠진 부분이 존재할 경우, 해당 부분의 원소 값은 undefined 된다.

Array 객체 생성

배열 리터널을 이용한 1차원 배열 생성

	<h3>배열</h3>

	<script type="text/javascript">
		//배열 리터널을 이용한 1차원 배열 생성 
		var a1 = []; // 빈 배열
		var a2 = [ 10, 20, 30 ];
		var a3 = [ 10, 20, 30, ]; // 마지막 ,는 무시
		var a4 = [ 10, 20, , 30 ]; // 중간에, 다음에 값이 없으면 undefined 

		console.log(a1.length);//0
		console.log(a2.length);//3
		console.log(a3.length);//3
		console.log(a4.length);//4

		//요소 접근, 인덱스는 0부터
		console.log(a2[0], a4[2]);

		//Array 생성자를 이용한 1차원 배열 생성
		var b1 = new Array();
		var b2 = new Array(5); // 길이가 5인 배열. 요소 값은 모두 undefined
		var b3 = new Array(10, 20); // 초기값을 두개 가지는 1차원 배열

		console.log(b1.length); 
		console.log(b2.length);
		console.log(b3.length);
	</script>

Array() 생성자를 이용한 2차원 배열

	<h3>배열</h3>

	<script type="text/javascript">
	//Array() 생성자를 이용한 2차원 배열
	
	var a1 = new Array(2);
	a1[0] = new Array(3);
	a1[1] = new Array(3);
	
	console.log(a1.length); // 2 행수
	console.log(a1[0].length); // 3 열수 
	
	//배열 리터널을 이용한 2차원 배열
	var a2 =[[1,2,3],[4,5,6]];
	console.log(a2.length); // 2
	console.log(a2[0].length); // 3
	
	console.log(a2[1][2]); // 6
	
	</script>

Array 순회

	<h3>배열-순회</h3>

	<script type="text/javascript">
	var a = [10,20,,30,0]; // 10,20,undefined,30 0
	
	//배열 요소를 처음부터 끝까지 순회
	for(let i =0; i<a.length; i++){
		console.log(a[i]);
	}
	
	console.log('==============================');
	
		for(let i =0; i<a.length; i++){
			if(a[i]){
		console.log(a[i]);
				
		}
	}
		console.log('==============================')
		
		var b =[10,20,30];
		for(let n of b){ // 컬렉션 반복
			console.log(n);
		}
		console.log('===============================')
	
	
		for(let i in b){ // 첨자만 가져옴
			console.log(b[i]);
		}

Array 추가

unshift()	새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.
push()	배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

	<script type="text/javascript">
	var a = [10,20];
	
	console.log(a.join());//배열의 모든 요소를 결합하여 하나의 문자열로 만듦
	
	//요소 추가
	a[2]=30;
	console.log(a.length); // 3
	console.log(a.join()); // 10,20,30
	
	a[4]=40;
	console.log(a.length);//5
	console.log(a.join());//10,20,30,,40
	
	//존재하는 인덱스에 값을 할당하면 값이 변경 된다.
	a[1]=100;
	console.log(a.join());
	
	var b = [10,20];
	
	//뒤에 요소 추가
	b.push(30);
	console.log(b.join());
	
	//가장 앞에 요소 추가
	b.unshift(5);
	console.log(b.join());
	
	var n = b.unshift(2,3); // 배열의 길이 반환
	console.log(b.join());  // 2,3,5,10,20,30
	console.log(n); // 6 
	
	
	</script>

	<h3>배열 - 중간에 추가 : splice</h3>

	<script type="text/javascript">
		var a = [ 10, 20, 30 ];

		//가장 앞에 추가
		a.splice(0, 0, 'a', 'b');
			//변경 시작 위치, 삭제할 위치 부터 삭제할 개수,변경할 값들 ...
		console.log(a.join()); // a,b,10,20,30
		
		//가장 뒤에 추가
		a.splice(a.length,0,'x','y');
		console.log(a.join());// 
		
		
		//중간에 추가
		a.splice(3,0,'o','p');
		console.log(a.join());// a,b,10,o,p,20,30,x,y
		
		var b =[10,20,30,40,50]; // 20과 30지우고 그자리에 a,b,c 추가 
		b.splice(1,2,'a','b','c');
		console.log(b.join());
		
		var c = [10,20,30,40,50]; 
		c.splice(1,3);
		console.log(c.join());
		
	</script>

Array 삭제

length	배열의 length 속성값을 0으로 설정하면 모든 요소가 삭제.
pop()	배열에서 마지막 요소를 제거하고 그 요소를 반환하며, 배열의 길이도 줄어든다.
shift()	배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환하며, 배열의 길이도 줄어든다.
splice()	배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

</head>
<body>

	<h3>배열-제거</h3>

	<script type="text/javascript">
	var a = [10,20,30,40,50];
	console.log(a.join());
	
	//length를 이용한 마지막 요소 제거
	a.length=a.length-1;
	console.log(a.join());
	
	//length를 이용한 모든 요소 제거
	a.length=0;
	console.log(a); // []
	console.log(a.length);// 0
	
	
	//pop()를 이용한마지막 요소 제거
	var b = [10,20,30,40,50];
	b.pop();
	console.log(b.join());//10,20,30,40
	
	
	//shift를 이용한 처음 요소 제거
	b.shift();
	console.log(b.join());//20,30,40 

	</script>

</body>
</html>

Array sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.

</head>
<body>

	<h3>배열 - sort</h3>
	
	<script type="text/javascript">
	var a =['BBA','BC','CC','ABC'];
	a.sort(); // 문자의 유니코드값에 따른 사전식 배열 (오름차순)
	console.log(a.join()); // ABC,BBA,BC,CC

	var b = [55,7,10,35,44];
	b.sort(); // 숫자는 문자열로 변환하여 유니코드 값에 따른 사전식 배열 
	console.log(b.join()); // 10,35,44,55,7
	
	var c =['BBA','BC','CC','ABC'];
	
	
	//정렬 기준설정 
	// 오름차순정렬, c.sort()해도 오름차순 정렬됨 
	c.sort(function(x,y){ 
		if(x>y)return 1; // 양수를 돌려주면 
		else if(x<y) return -1; 
		else return 0;
	});
	console.log(c.join()); 
	
	// 내림차순정렬
	/*var d =['BBA','BC','CC','ABC'];
	c.sort(function(x,y){ 
		if(x>y)return -1; 
		else if(x<y) return 1; 
		else return 0;
	});
	console.log(c.join());*/
	
	//c.sort=>
	
	var d =['BBA','BC','CC','ABC'];
	d.sort((x,y) => { 
		if(x>y)return -1; 
		else if(x<y) return 1; 
		else return 0;
	});
	console.log(d.join());
	
	
	//숫자 오름차순 정렬 방법 
	var e = [55,7,10,35,40];
	e.sort((x,y)=>x-y);
	console.log(e.join());
	
	//숫자 내림차순 정렬 방법 
	var f = [55,7,10,35,40];
	e.sort((x,y) => -(x-y));
	console.log(e.join());
	
	
	
	</script>
    
</body>
</html>

forEach()

배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행한다. 반환값은 undefined. 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, forEach 메소드를 호출한 배열,즉 this를 전달 받을 수 있다.

</head>
<body>


	<p>
		<mark>forEach</mark>
		
	</p>

	<script type="text/javascript">
	
	var a =[1,2,3,4,5];
	var s = 0;
	
	//forEach는 break가 없으며, return false해도 빠져 나오지 못한다. 

// 	a.forEach(function(item){
// 		s+=item;
// 	});
	

	a.forEach(item=>s+=item);
	console.log(s);

	var b=[10,20,30,40,50];
	b.forEach(function(item,index){
		console.log(item,index);
	});
	
	</script>


</body>
</html>

티스토리

(48) [JavaScript] 4일 JavaScript Array

(48) [JavaScript] 4일 JavaScript Array

Array 특징

Array 객체 생성

Array 순회

Array 추가

Array 삭제

Array sort()

forEach()

Map()