-
자바스크립트 - 배열 / 객체 (1)프로그래밍/JavaScript 자바스크립트 2021. 9. 30.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // 배열 리터널을 이용한 1차원 배열 생성 var a1 = []; // 빈 배열 var a2 = [10,20,30]; var a3 = [10,20,30,]; var a4 = [10,20,,30]; console.log( a1.length ); // 0. length : 배열 요소의 수 console.log( a2.length ); // 3 console.log( a3.length ); // 3. 마지막의 ,는 무시 console.log( a4.length ); // 4 // 10,20,undefined,30(, 다음에 값이 없으면 undefined) // 배열 요소 접근 console.log ( a2[0] ); // 10, 첨자는 0부터 시작. console.log ( a2[2] ); // 30 console.log ( a2[4] ); // undefined. 전체요소-1 보다 첨자가 크면 undefined // Array() 생성자를 이용한 배열 만들기 var b1 = new Array(); // 빈 배열 var b2 = new Array(5); // 크기가 5인 배열. 생성자의 인자가 하나의 숫자인 경우 요소 수를 나타냄. // 요소의 값은 모두 undefined var b3 = new Array(10, 20); // 생성자의 인수가 2개 이상이면 요소의 초기값 console.log( b1.length ); // 0 console.log( b2.length ); // 5 console.log( b3.length ); // 2 console.log( b2[1] ); // undefined console.log( b3[1] ); // 20 </script> </head> <body> <h3>내장객체 - Array</h3> </body> </html>
1차원 배열 생성 방법
var a1 = []; 빈 배열 만들고
a1[0] = 3; 이렇게 인덱스를 이용해서 추가 하는 방법과
var a2 = [1,2,3,4,5];
이렇게 선언과 동시에 값을 주는 방법이 있다.
Array() 생성자로 배열 만드는 방법.
- var b1 = new Array(); 빈 배열을 만듬.
- var b2 = new Array(5); 배열의 크기가 5인 배열을 만듬.
- var b3 = new Array(1, 2); 하지만 인자가 2개이상 들어가면 값으로 취급함. b3의 배열안에 1과 2가 들어가있음.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // Array() 생성자를 이용한 2차원 배열 만들기 var a1 = new Array(2); // 행수 a1[0] = new Array(3); // 0행의 열수 a1[1] = new Array(3); console.log( a1.length ); // 행수 console.log( a1[1].length ); // 1행의 열수 // 배열 리터널을 이용한 2차원 배열 만들기 var a2 = [[1,2,3], [4,5,6]]; console.log( a2.length ); // 행수 console.log( a2[0].length ); // 0행의 열수 console.log( a2[1][2] ); // 6 </script> </head> <body> <h3>내장객체 - Array : 2차원 배열</h3> </body> </html>
2차원 배열 만들기.
var a1 = new Array(2); 먼저 크기가 2인 배열을 만들고
a1[0] = new Array(3); 첫번째 인덱스 즉 행이 될 놈한테 새로 방을 지어준다. [[3], []]
a1[1] = new Array(3); 두번째 인덱스에 2번째 행일 될 놈한테 다시 방을 지어줌. [[3],[3]]
아니면 한번에 만들 수 도 있음.
var a2 = [[1,2,3],[1,2,3]];
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr = [10, 20, ,30, 0]; // 배열의 요소를 처음부터 끝까지 순회 for(var i=0; i<arr.length; i++) { console.log(arr[i]); // 10 20 undefined 30 0 } console.log('----------'); for(var i=0; i<arr.length; i++) { if(arr[i]) { // '', undefined, NaN, null, 0은 거짓 console.log(arr[i]); // 10 20 30 } } console.log('----------'); var arr2 = [10, 20, 30]; for(var n of arr2) { // ES6에 추가된 컬렉션 반복 구문 console.log(n); // 10 20 30 } console.log('----------'); for(var idx in arr2) { // 첨자만 출력 console.log(idx); // 0 1 2 } console.log('----------'); for(var idx in arr2) { console.log(arr2[idx]); // 10 20 30 } </script> </head> <body> <h3>배열 - 순회</h3> </body> </html>
배열 출력
자바에서 하던것 처럼 for문을 돌림
자바에서 향상된 for문 비슷한놈이 자바스크립트에도 있음
for(var n of arr2) {
console.log(arr[i]);
}
of를 사용함.
만약 of가 아니라 in을 사용한다면 값이 아니라 해당 배열의 인덱스를 가져옴.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr1 = [10, 20]; console.log( arr1.length ); // 2 console.log( arr1 ); // [10,20] // 요소 추가 arr1[2] = 30; console.log( arr1.length ); // 3 console.log( arr1 ); // [10,20,30] arr1[4] = 50; console.log( arr1.length ); // 5 console.log( arr1 ); // [10,20,30,empty,50], 콘솔에서는 undefined는 empty로 표시 console.log( arr1[3] ); // undefined arr1[arr1.length] = 60; // 가장 뒤에 요소 추가 console.log(arr1.join()); // join() : 배열의 모든 요소를 연결 하나의 문자열로 만듬 // 10,20,30,,50,60 arr1[3] = 30; // 특정 요소의 값 변경 console.log(arr1.join()); // push() : 가장 뒤에 새로운 요소 추가 var arr2 = [10, 20]; arr2.push(30); // 뒤에 새로운 요소를 하나 이상 추가하고 길이 반환 console.log(arr2.join()); // 10,20,30 arr2.push(40, 50); console.log(arr2.join()); // 10,20,30,40,50 // unshift() : 가장 앞에 새로운 요소 추가 var arr3 = [30, 40]; var len = arr3.unshift(10, 20); // 맨 앞에 새로운 요소를 하나 이상 추가하고 길이 반환 console.log("길이:"+len); console.log(arr3.join()); </script> </head> <body> <h3>배열 - 요소 추가(가장 앞, 가장 뒤)</h3> </body> </html>
요소 추가는 인덱스 활용해서 넣어주면 되고
가장 마지막에 요소를 추가할 때는 길이 구하는 함수를 이용한다.
arr1[arr1.length] = 60; 이러면 arr1 배열의 가장 마지막에 요소를 넣는다.
아니면 push()를 사용해서 맨 마지막에 값을 추가 할 수 있다.
arr2.push(30); / arr2.push(30,40) 여러개 값도 가능
반대로 맨 처음에 값을 추가하는 방법은 unshift()사용
arr2.unshift(10, 20); 특이한 점은 unshift는 배열에 요소를 추가 해주는데
정작 본인은 길이를 반환한다는 점.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> /* - splice(start [,deleteCount[,item1, item2, ...]]) start : 변경을 시작할 배열 위치 deleteCount : start 부터 deleteCount 갯수 만큼 원소 삭제 item1, item2, ... : start 인덱스에 item을 추가 */ // 가장 앞에 추가 var arr1 = [10,20,30]; arr1.splice(0, 0, 'a', 'b'); console.log(arr1.join()); // a,b,10,20,30 // 뒤에 추가 var arr2 = [10,20,30]; arr2.splice(arr2.length, 0, 'a', 'b'); console.log(arr2.join()); // 10,20,30,a,b // 중간에 추가 var arr3 = [10,20,30]; arr3.splice(1, 0, 'a', 'b'); console.log(arr3.join()); // 10,a,b,20,30 // 삭제하고 중간에 추가 var arr4 = [10,20,30,40,50]; arr4.splice(1, 2, 'a', 'b'); console.log(arr4.join()); // 10,a,b,40,50 </script> </head> <body> <h3>배열 : 요소 추가(중간)</h3> </body> </html>
splice를 사용하면 배열 중간에 끼워 넣을 수 있다.
arr3.splice(1,0,'a','b'); => 1번째 인덱스에서 부터 끼워 넣을건데 1번째 인덱스부터 0개의 원소를 지우고 끼워 넣을거다. 라는 뜻
arr4.splice(1, 2, 'a', 'b'); => 1번째 인덱스부터 2개의 원소를 지우고 1번째 인덱스에 a,b를 끼워 넣겠다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr1 = [10,20,30,40,50]; console.log(arr1.join()); // length 속성을 이용한 마지막 요소 삭제 arr1.length = arr1.length - 1; console.log(arr1.join()); // length 속성을 이용한 모든 요소 삭제 arr1.length = 0; console.log(arr1.length); console.log(arr1.join()); // pop() 메소드를 이용한 마지막 요소 삭제 var arr2 = [10,20,30,40,50]; var a = arr2.pop(); // 마지막 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬 console.log(arr2.length); // 4 console.log(arr2.join()); // 10,20,30,40 console.log(a); // 50 // shift() 메소드를 이용한 처음 요소 삭제 var arr3 = [10,20,30,40,50]; var b = arr3.shift(); // 처음 요소를 삭제하고 삭제된 요소를 반환. 길이도 줄어듬 console.log(arr3.length); // 4 console.log(arr3.join()); // 20,30,40,50 console.log(b); // 10 // delete() 메소드를 이용한 요소 값 없애기 var arr4 = [10,20,30,40,50]; delete(arr4[1]); // arr4[1]의 요소의 값을 없애고 undefined를 할당. 배열의 길이는 줄지 않음 console.log(arr4.length); // 5 console.log(arr4[1]); // undefined </script> </head> <body> <h3>배열-삭제</h3> </body> </html>
배열 안에 있는 요소를 삭제하는 방법들.
arr1.length = arr1.length - 1; 이렇게 길이 자체를 하나 줄여버리면 원소도 삭제 된다.
그러면 배열 길이를 0으로 만들어 버리면 모든 요소가 삭제 된다.
다른 삭제 메소드는 pop() / shift() / delete()가 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr1 = [10, 20, 30, 20, 40]; var n; n = arr1.indexOf(20); console.log("20의 인덱스 : " + n); // 1 n = arr1.lastIndexOf(20); console.log("뒤에서 부터 검색한 20의 인덱스 : " + n); // 3 n = arr1.indexOf(50); console.log("50의 인덱스 : " + n); // 없으면 -1 // join() : 배열의 요소를 연결해 하나의 문자열로 만든다. n = arr1.join(); console.log(n); var arr2 = [10, 20, 30, 40, 50]; var a = arr2.reverse(); // 배열의 순서를 반전 시킴 console.log( arr2.join() ); // 50 40 30 20 10 console.log( a.join() ); // 50 40 30 20 10 </script> </head> <body> <h3>배열 - 메소드</h3> </body> </html>
배열의 위치 검색하는 여러 방법들
인덱스를 활용 한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> // sort() : 기본적으로 문자의 유니코드 코드 포인터값에 따라 정렬 함 var arr1 = ["BBA", "BC", "CC", "ABC"]; arr1.sort(); // 유니코드 값의 사전식 배열 console.log(arr1.join()); // ABC,BBA,BC,CC // 숫자는 이상한 결과가 나온다. var arr2 = [55, 7, 10, 35, 40]; arr2.sort(); // 각 요소를 문자열로 변환하여 유니코드 값의 사전식 배열 console.log( arr2.join() ); // 10,35,40,55,7 var arr3 = ["BBA", "BC", "CC", "ABC"]; arr3.sort(function(a, b){ // 오름차순 정렬 : 문자열은 arr3.sort(); 만 해도 오름차순 정렬 if(a > b) return 1; else if(a < b) return -1; else return 0; }); console.log( arr3.join() ); // ABC,BBA,BC,CC var arr4 = ["BBA", "BC", "CC", "ABC"]; arr4.sort(function(a, b){ // 내림차순 정렬 if(a > b) return -1; else if(a < b) return 1; else return 0; }); console.log( arr4.join() ); // CC, BC, BBA, ABC var arr5 = [55, 7, 10, 35, 40]; arr5.sort(function(a, b){ // 오름차순 return a - b; }); console.log( arr5.join() ); // 7 10 35 40 55 var arr6 = [55, 7, 10, 35, 40]; arr6.sort(function(a, b){ // 내림차순 return -(a - b); }); console.log( arr6.join() ); // 55,40,35,10,7 </script> </head> <body> <h3>배열 : 정렬</h3> </body> </html>
배열의 정렬 방법
sort() 방법은 문자열만 가능하다.
숫자를 넣어서 하게되면 숫자를 문자열로 바꾼다음에 유니코드 값의 사전식으로 순서가 바뀌기 때문에 뒤죽박죽이 된다.
sort()는 문자열로만 사용하고 숫자는 다른 방법을 써야 한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr = [1,2,3,4,5]; var s = 0; arr.forEach(function(item){ s += item; }); console.log(s); var arr2 = [10,20,30,40,50]; arr2.forEach(function(item, index){ // item:각요소값, index:첨자 console.log(index+":"+item); }); </script> </head> <body> <h3>forEach</h3> </body> </html>
forEach()문과 function 함수를 이용하면 배열의 첫번째 요소부터 마지막 요소까지 반복하면서 item을 꺼낼 수 있다.
s += item을 했으니 1~5까지 돌면서 전부 더한 15가 나온다.
function에 2번째 매개변수를 주게되면 이건 index를 구하는데 사용 할 수 있다.
해당 배열을 처음부터 끝까지 돌면서 인덱스도 알려준다는 뜻
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var arr = [1,2,3,4,5,6,7,8,9,10]; // arr의 배열 내용중 홀수 값을 갖는 새로운 배열 작성 var arr2 = []; /* for(var i=0; i<arr.length; i++) { if(arr[i] % 2) { arr2.push(arr[i]); } } */ arr.forEach(function(item){ if(item % 2) { arr2.push(item); } }); console.log(arr2); // filter() : 조건에 만족한 요소만으로 새로운 배열 작성 var arr3 = arr.filter(function(item, index){ return item%2; // 조건이 참인 경우에만 해당 item을 배열에 추가 }); console.log(arr3); // 인덱스가 5이상인 요소만 arr4라는 이름의 배열에 추가 var arr4 = arr.filter(function(item, index){ return index>=5; }); console.log(arr4); console.log('--------------------') // map() : 배열의 각 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값으로 새로운 배열을 반환 var a = [1,2,3,4,5]; var a2 = []; for(let i = 0; i<a.length; i++) { a2.push(a[i] * 2); } console.log( a2.join() ); // 2 4 6 8 10 var a3 = a.map(function(item){ return item * 2; }); console.log( a3.join() ); // 2 4 6 8 10 var a4 = a.map( (item) => item * 2 ); console.log( a4.join() ); // 2 4 6 8 10 var a5 = a.map( (item, index) => index%2==0 ? item : item * 2 ); console.log( a4.join() ); // 1 4 3 8 5 </script> </head> <body> <h3>map, filter</h3> </body> </html>
filter()는 배열에서 내가 정한 조건에 만족한 요소들만을 뽑아 올 수 있다.
map(function(item)) 메소드는 배열의 각 요소에 대해서 순차적으로 함수를 실행한 반환 값으로
새로운 배열을 만들 수 있다.
var a3 = a.map(function(item){
return item * 2;
});새로운 a3 배열을 선언하는데 이 곳에는 a의 요소들을 하나씩 function의 item 인자에 넣어서
계산을 한 결과를 a3에 하나씩 넣는다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> /* - Set 값들의 집합 입력된 순서에 따라 지정된 요소를 반복 처리 할 수 있다. Set은 중복 값을 허용하지 않는다. */ var set = new Set(); set.add(100); set.add("java"); set.add("oracle"); set.add("html"); set.add("css"); set.add("oracle"); // 요소의 수 console.log( set.size ); // 5 // item 존재 여부 console.log( set.has('java') ); // true. 배열의 indexOf보다 빠름 // 특정 요소 삭제 set.delete('css'); console.log( set.size ); // 4 // 처음부터 순회 for(let item of set) { console.log(item); } console.log('----------------'); // forEach로 순회 set.forEach(function(value){ console.log(value); }); console.log('----------------'); // Set을 배열로 변환 var arr = Array.from(set); console.log( arr.join() ); // 100,java,oracle,html // []를 이용한 Set 객체 생성 var set2 = new Set([10, 20, 30]); console.log(set2); // Set 객체의 모든 요소 제거 set2.clear(); console.log( set2.size ); // 0 var set3 = new Set(); var obj = { subject:'java', score:100 }; // 객체 console.log(obj.subject, obj.score); // java 100 set3.add( obj ); // 객체는 주소가 저장됨 set3.add( { subject:'java', score:100 } ); // 속성 및 값은 같지만 obj와는 다른 객체 set3.add( { subject:'java', score:100 } ); // 위와는 다른 객체 set3.add( obj ); console.log( set3.size ); // 3 set3.forEach(function(item){ console.log(item.subject + ":" + item.score); }); </script> </head> <body> <h3>내장객체 - Set</h3> </body> </html>
Set() 메소드는 자바 처럼 값들의 집합을 의미하는데 자바랑은 개념이 좀 다르다.
var obj = {subject:'java', score:100};
이런식으로 객체를 만들었을때
var obj2 = {subject:'java', score:100};
우리가 봤을때 똑같은 내용물을 가지고 있는 애를 만든다고 했을때
이걸 Set()안에다 넣으면 원래는 Set()은 중복 값을 허용하지 않는데 이놈들은 안에 들어간다.
왜냐하면 객체는 값이 아니라 그 객체의 주소가 저장되기 때문이다.
Set에 객체가 들어갈 때는 값이 아니라 주소가 저장이 됨.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> /* - Map 객체 키와 값을 서로 매핑 시켜 저장하며, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다. 키가 같으면 덮어 쓴다. */ var map = new Map(); map.set("java", 100); map.set("oracle", 90); map.set("html", 100); map.set("spring", 90); map.set("oracle", 80); console.log( map.size ); // 4 console.log( map.has('css') ); // false. 키 존재 여부 console.log( map.get('css') ); // 키에 대한 값 반환. 없으면 unefined console.log( map.get('oracle') ); // 80 map.delete('spring'); // 삭제 console.log('----------------'); // 처음부터 순회 for(var [key, value] of map) { console.log(key+":"+value); } console.log('----------------'); map.forEach(function(value, key){ console.log(key+","+value); }); console.log('----------------'); map.forEach( (value,key) => console.log(key+' , '+value) ); console.log('----------------'); // 모든 엔트리 삭제 map.clear(); console.log( map.size ); // 대괄호(배열)를 이용한 Map 객체 만들기 var map2 = new Map( [ ["java", 100], ["html", 95], ["oracle", 90] ] ); for(var [key, value] of map2) { console.log( key + ":" + value ); } </script> </head> <body> <h3>내장객체 - Map</h3> </body> </html>
Map 객체는 키와 값을 서로 연결 시켜서 저장된 순서대로 각 요소들을 접근 할 수 있다.
map.set("html", 100); => html은 키 / 100은 값
배열을 이용해서 로또 프로그램 만들어 보기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function lotto() { var objBox = document.getElementById("box"); var objCount = document.getElementById("count"); var cnt = objCount.value; if( ! /^[1-5]{1}$/.test(cnt)) { alert("구매 개수는 1~5사이만 가능 합니다."); objCount.focus(); return; } cnt = parseInt(cnt); var num = []; // Math.floor( Math.random()*45 )+1 : 1~45까지의 난수 var s = ""; for(var n=1; n<=cnt; n++) { for(var i=0; i<6; i++) { num[i] = Math.floor( Math.random()*45 )+1; for(var j=0; j<i; j++) { if(num[i] == num[j]) { i--; break; } } } // 정렬 num.sort(function(a, b){ return a-b; }); s += n+" 번째 : " + num.join() + "<br>"; } objBox.innerHTML = s; } </script> </head> <body> <div style="margin: 30px auto; width: 300px; text-align: center;"> <input type="text" id="count" placeholder="구매갯수" class="boxTF"> <button type="button" onclick="lotto();" class="btn">구매</button> </div> <hr> <div id="box"></div> </body> </html>
Set() 함수를 이용해서 로또 프로그램 만들기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function lotto() { var objBox = document.getElementById("box"); var objCount = document.getElementById("count"); var cnt = objCount.value; if( ! /^[1-5]{1}$/.test(cnt)) { alert("구매 개수는 1~5사이만 가능 합니다."); objCount.focus(); return; } cnt = parseInt(cnt); var set = new Set(); var a; var out = ""; for(var n=1; n<=cnt; n++) { set.clear(); while(set.size < 6) { a = Math.floor( Math.random() * 45) + 1; set.add(a); } var nums = Array.from( set ); nums.sort(function(a, b){ return a-b; }); out += n +"번째 : " + nums.join() + "<br>"; } objBox.innerHTML = out; } </script> </head> <body> <div style="margin: 30px auto; width: 300px; text-align: center;"> <input type="text" id="count" placeholder="구매갯수" class="boxTF"> <button type="button" onclick="lotto();" class="btn">구매</button> </div> <hr> <div id="box"></div> </body> </html>
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - 객체(3) (0) 2021.09.30 자바스크립트 - 배열 / 객체 (2) (0) 2021.09.30 자바스크립트 - 달력 (0) 2021.09.28 자바스크립트 - Math 함수 (0) 2021.09.28 자바스크립트 - 시간 관련 함수 (Date) (0) 2021.09.28