반응형
참고 : 유튜브 ZeroCho TV
배열 : 특수한 개체 , 값 그룹화는 하고 싶지만 속성 이름을 따로 주고 싶지 않을 때 배열 사용
.을 붙이는 순간 객체 중 배열처럼 생각을 함.
1. 배열 기본
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type = "text/javascript">
//브라우저에서 제공하는 배열
var 배열 = [
'사과',
'오렌지',
'포도',
'딸기',
]
console.log(배열);
console.log(배열[0]);
console.log(배열.length);
console.log('안녕하세요'[3]); //세
console.log('안녕하세욥'.length); //5
// .을 찍으면 객체, 배열처럼 생각함.
// 배열같은 객체 만들기 (배열 흉내내서 만든거)
var 배열같은객체 = {
0:'코끼리',
1:'고양이',
2:'강아지',
3:'치킨',
length:4,
}
// 배열 구분 법
console.log(Array.isArray(배열)); //true
console.log(Array.isArray(배열같은객체)); //false
//브라우저에서 정해준 객체들
console.log(Array); //ƒ Array() { [native code] }
console.log(Math); //찾아보면 수학관련 객체 겁나 많음
console.log(Number);
console.log(String);
console.log(Boolean);
console.log(window); // -> 모든게 나옴. 젤중요. 추려서 중요한거 공부하는게 중요
//첫글자가 대문자면 = 생성자
</script>
</body>
</html>
2. 배열 push pop shift unshift
배열에서 뽑을 때는 pop - 뒤에서부터 shift - 앞에서부터
배열에 넣을 떄는 push - 앞에서부터 unshift - 뒤에서부터
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <h1>1스트라이크 1볼</h1>
<form>
<input />
<button>입력</button>
</form> -->
<script type = "text/javascript">
var 바디=document.body;
var 숫자후보 = [1,2,3,4,5,6,7,8,9];
var 숫자배열 = [];
for (var i=0; i<4; i+=1){
var 뽑은것 = 숫자후보.pop();
숫자배열.push(뽑은것); //push - 앞에서부터 넣는것
}
console.log(숫자배열); // [9, 8 , 7 , 6] pop은 마지막 순으로 뽑는거
for (var n=0; n<4; n+=1){
var 뽑은것 = 숫자후보.shift(); // 앞에서부터 하나씩 뽑기
숫자배열.push(뽑은것);
console.log(숫자배열); //1,2,3,4
for (var n=0; n<4; n+=1){
var 뽑은것 = 숫자후보.shift();
숫자배열.unshift(뽑은것);
}
console.log(숫자배열); //4,3,2,1
var 결과 = document.createElement('h1');
바디.append(결과);
var 폼 = document.createElement('form');
document.body.append(폼);
var 입력창 = document.createElement('input');
입력창.type = 'number';
폼.append(입력창);
var 버튼 = document.createElement('button');
버튼.textContent='입력!';
폼.append(버튼);
폼.addEventListener('submit', function 콜백함수(){ //엔터를 쳤을 때
});
</script>
</body>
</html> -->
3. 배열 splice
var 바디=document.body;
var 숫자후보 = [1,2,3,4,5,6,7,8,9];
var 숫자배열 = [];
for (var i=0; i<4; i+=1){
var 뽑은것 = 숫자후보.splice(3, 1);// 4번째 자리부터 1개를 뽑고싶다 - 4부터 x 4 - .4,5,6,7
숫자배열.push(뽑은것);
}
console.log(숫자배열);
var 바디=document.body;
var 숫자후보 = [1,2,3,4,5,6,7,8,9];
var 숫자배열 = [];
for (var i=0; i<4; i+=1){
var 뽑은것 = 숫자후보.splice(Math.floor(Math.random()*(9-i)),1)[0];//1-9까지 랜덤하게 숫자 넣기
숫자배열.push(뽑은것);
console.log(뽑은것);
}
console.log(숫자배열);
4. 이차원 배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type = "text/javascript">
var 바디 = document.body;
var 테이블 = document.createElement('table');
var 칸들 = [];
for(var i=1; i<=3; i+=1){
var 줄 = document.createElement('tr');
칸들.push([]);
for(var j=1; j<=3; j+=1){
var 칸 = document.createElement('td');
칸들[i-1].push(칸);
줄.appendChild(칸);
}
테이블.appendChild(줄);
}
바디.appendChild(테이블);
console.log(칸들);
var 배열 = [1,2,3,4,5];
var 배열2 = [[], {}, function(){}, null, undefined];
// 배열 안에는 객체, 함수, 배열, null, undefined 등 넣을 수 있음
//배열 안에 배열이 들은걸 이차원배열 이라고 함. ex) 지뢰찾기, 테트리스
var 이중배열= [
[1,2,3],
[4,5,6],
[7,8,9],
];
</script>
</body>
</html>
5. 배열 map mothod 매서드
mapping / map 한다 짝지어 배열 만들기
<script type = "text/javascript">
var 후보군 = Array(45).fill().map(function(요소, 인덱스){
return 인덱스 +1;
});
console.log(후보군);
// 셔플 - 랜덤하게 섞고 앞에서or 뒤에서부터 6개 뽑기
var 셔플 = []; //배열 만들어 두기 or var 셔플 = Array(0); 도 됨
while(후보군.length>0){
var 이동값 = 후보군.splice(Math.floor(Math.random()*후보군.length),1)[0];
셔플.push(이동값);
}
console.log(셔플);
//for or while? 같은 역할 사용법 굳이 나누자면for - > 정확하게 자신이 몇번 반복될지 알때
// while -> 내가 몇번 반복될지 모를 떄 or 기준값이 계속 바뀔 때.
</script>
단축키 참고
blog.naver.com/govlepdl1378/222308225254
[HTML] VScode 단축키 (MAC)
VScode 단축기 모음 (mac 기준입니다!)👩🏻💻 mac 키보드 심볼 VScode 단축키 - 문자 편집...
blog.naver.com
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [23일차] 20210414 배열 Array 기본 이중배열 (0) | 2021.04.14 |
|---|---|
| [23일차] 배열 연습 / 배열 메서드, Array Method / filter, reduce, map, concat, sort, join etc. (0) | 2021.04.14 |
| [22일차] 20210413 fiverr slide 슬라이드 배열? 로 바꾸기 업그레이드 시키기 (0) | 2021.04.13 |
| [21일차 연습] (0) | 2021.04.13 |
| [21일차] 20210412 반응형, 알고리즘, 재귀함수 등 (0) | 2021.04.12 |
