오늘 또 한분의 중도 탈락자가 발생했다 흑흑 나름 말문도 트고 괜찮은 분이라고 생각했는데 갑자기 그만두셔서 아쉽다. 아무래도 화면구현 과제에서 어려움을 느끼시지 않으셨을까 싶다. 오늘은 같은 조에서 뛰어나신 분에게 용기내어 공부 방법에 대해 여쭤보았다. 너무나 친절하게 답변해주셨는데, 절대적인 공부량에서 차이가 나는구나라고 느꼈다. 앞으로는 수업 외적으로 따로 강의 신청해서 듣고 알고리즘 문제도 계속해서 풀어나가야겠다.
시련은 있어도 실패는 없다!!!
-----------------------------------
배열 관련 메소드
join
배열에 저장된 모든 원소를 문자열로 변환한 후 연결하여 출력
<script>
var city = ["서울", "부산", "대전"];
var joindata1 = city.join();
var joindata2 = city.join('-');
var joindata3 = city.join(' 그리고 ');
console.clear();
console.group('join');
console.log(`joindata1 : ${joindata1}`);
console.log(`joindata2 : ${joindata2}`);
console.log(`joindata3 : ${joindata3}`);
console.groupEnd();
</script>
concat
지정된 배열에 두 개 이상의 데이터를 결합하거나 다른 배열 객체를 결합
<script>
var city01 = ["서울", "부산", "대전"];
var city02 = ["대구", "광주", "인천"];
var city03 = ["전주", "부여", "세종"];
var data1 = city01.concat("수원", "오산");
var data2 = city01.concat(city02);
var data3 = city01.concat(city03, city02);
console.clear();
console.group('concat method');
console.log(data1);
console.log(data2);
console.log(data3);
console.groupEnd();
</script>
reverse
배열 원소의 순서를 반대로 정렬
<script>
console.clear();
console.group('reverse');
var data = [9, 8, 7, 6, 5, 4, 3, 2, 1];
var rdata = data.reverse(); // 배열 원소를 반대로 정렬
console.log(rdata, data);
console.groupEnd();
</script>
sort
배열 원소를 정렬
<script>
console.clear();
console.group('sort');
var ndata1 = [19, 38, 67, 26, 55, 24, 53, 12, 31];
var ndata2 = [132, 2, 41, 123, 45, 1234, 6, 29, 4567];
var edata = ['Apple', 'Html', 'Game', 'Computer', 'Java'];
var kdata = ['서울', '부산', '구포', '대구', '인천'];
console.log('ndata1.sort : ' + ndata1.sort());
console.log('ndata2.sort : ' + ndata2.sort()); // 사전순서 정렬
// Comparator : 2개의 값을 받고 크기를 비교해서 누가 크고 작은지 숫자로 반환
// 만일 두개의 숫자 num1, num2가 있다고 할 때, 아래와 같이 크기 결과를 반환
// (1) if num1 > num2 -> return + (양수값) => 보통 1반환
// (2) if num1 == num2 -> return 0
// (3) if num1 < num2 -> return - (음수값) => 보통 -1반환
console.log('ndata3.sort : ' + ndata2.sort(function (a, b) { return a - b; })); // 오름차순
console.log('ndata4.sort : ' + ndata2.sort(function (a, b) { return b - a; })); // 내림차순
console.log('edata.sort : ' + edata.sort());
console.log('kdata.sort : ' + kdata.sort());
// document.write("수치 정렬1 : " + ndata1.sort() + "<p/>");
// document.write("수치 정렬2 : " + ndata2.sort() + "<p/>");
// document.write("수치 정렬3 : " + ndata2.sort(function (a, b) { return a - b; }) + "<p/>");
// document.write("영문 정렬 : " + edata.sort() + "<p/>");
// document.write("한글 정렬 : " + kdata.sort() + "<p/>");
console.groupEnd();
</script>
slice
배열의 특정 범위에 속하는 원소만 선택하여 배열 생성
<script>
console.clear();
console.group('slice');
var kdata = ['서울', '부산', '구포', '대구', '인천', '대전', '세종'];
// half-open [0,4) : 종료인덱스 포함 x
// full-closed [0,4] : 종료인덱스 포함 o
var str1 = kdata.slice(0, 4); // (시작인덱스, 종료인덱스)
var str2 = kdata.slice(2, -1);
var str3 = kdata.slice(-4, -2);
var str4 = kdata.slice();
console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);
console.groupEnd();
</script>
splice
배열의 원소 추가 또는 제거
<script>
console.clear();
console.group('splice');
var kdata = ['서울', '부산', '구포', '대구', '대전'];
var str1 = kdata.splice(1, 2); // 시작인덱스(offset), 길이(length)
console.log(`삭제 데이터 : ${str1}`);
console.log(`남은 배열 : ${kdata}`);
var str2 = kdata.splice(1, 1, '강릉', '세종'); // offset, length, 삭제된 위치에 추가
console.log(`삭제 데이터 : ${str2}`);
console.log(`남은 배열 : ${kdata}`);
var str3 = kdata.splice(2, Number.MAX_VALUE);
console.log(`삭제 데이터 : ${str3}`);
console.log(`남은 배열 : ${kdata}`);
console.groupEnd();
</script>
*JS 기본타입 <--------> Wrapper Type Class
number Number
string String
boolean Boolean
pop & push 메소드
스택
모든 데이터의 삽입과 삭제가 배열의 한쪽 끝에서만 수행되는 자료 구조
Last in, First Out => LIFO (후입선출)
push 메소드: 배열의 마지막 위치에 데이터를 추가하고 배열의 길이를 반환
pop 메소드: 배열의 마지막 위치에 있는 데이터를 삭제하고 삭제한 데이터를 반환
<script>
console.clear();
console.group('push & pop');
var kdata = ['서울', '부산', '구포', '대구', '대전'];
console.log('original', kdata);
var p1 = kdata.push('청주', '세종'); // PUSH
console.log(p1, kdata);
var p2 = kdata.pop(); // POP (후입선출, LIFO)
console.log(p2, kdata);
console.groupEnd();
</script>
shift & unshift
shift 메소드: 배열의 맨 처음 위치에 데이터를 삭제하고 배열의 길이 반환
unshift 메소드: 배열의 맨 처음 위치에 데이터를 삽입하고 배열의 길이 반환
<script>
console.clear();
console.group('shift & unshift');
var kdata = ['서울', '부산'];
console.log('original kdata :', kdata);
var p1 = kdata.unshift('청주', '세종');
console.log(p1, kdata);
var p2 = kdata.shift();
console.log(p2, kdata);
console.groupEnd();
</script>
*forEach
배열을 반복하며 저장된 데이터를 조회
<script>
console.clear();
console.group('forEach');
var kdata = ['서울', '부산', '청주', '대구'];
console.log('origianal kdata:', kdata);
// forEach가 개별원소의 값과 인덱스 번호를 넘겨줄테니,
// 개별원소에 대해 무엇을 할지를 함수로 정의해주고
// 이 함수를 forEach에 매개변수로 전달해주면 된다. (1급객체의 성질)
function task(item, index) {
console.debug(`task(${item}, ${index}) inkoved.`);
// document.write("배열 데이터 [" + index + "] : " + item + "<br>");
}
kdata.forEach(task);
console.groupEnd();
</script>
<script>
console.clear();
console.group('forEach를 이용한 배열 원소의 합 구하기');
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log('1. data:', data);
var sum = 0;
function addArr(value) {
sum += value;
} // addArr
data.forEach(addArr);
console.log('2. sum:', sum);
console.groupEnd();
</script>
map
배열의 데이터를 함수의 인자로 전달하고 함수의 수행 결과를 반환 받아 새로운 배열 생성
<script>
console.clear();
console.group('map');
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log('original arr:', arr);
function mapArr(value) {
console.debug(`mapArr(${value}) invoked.`);
return value ** 2;
} // mapArr
var newArr = arr.map(mapArr);
console.log(arr, newArr);
console.groupEnd();
</script>
filter
배열의 데이터 중에 조건이 참인 데이터만 반환하여 새로운 배열 생성
<script>
console.clear();
console.group('filter');
var arr = [21, 42, 33, 14, 25, 12, 37, 28, 16, 11];
console.log(arr);
function filterArr(value) { // 배열의 원소를 필터링하는 콜백함수
return value >= 18; // 배열의 원소중에 값이 18 이상인 원소만 추출조건
// return value % 2 == 0; // 배열의 원소중에 2의 배수 원소만 추출조건
} // filterArr
var newArr = arr.filter(filterArr);
console.log('필터링 결과 :', newArr);
console.groupEnd();
</script>
indexOf & lastIndexOf
배열의 데이터를 검색하여 인덱스 위치를 반환
indexOf 메소드: 검색 시작 위치를 지정할 수 있음
lastIndexOf 메소드: 배열의 맨 마지막 원소부터 검색 시작
<script>
console.clear();
console.group('indeOf & lastIndexOf');
const arr = [10, 20, 30, 40, 30, 60, 70, 30, 90, 100];
console.log(arr);
console.log('arr.indexOf(30) :', arr.indexOf(30));
console.log('arr.lastIndexOf(30) :' ,arr.lastIndexOf(30));
console.log('arr.indexOf(30, 3) : ', arr.indexOf(30, 3));
console.log('arr.indexOf(300) : ', arr.indexOf(300));
console.groupEnd();
</script>
---
연관 배열
연관 배열 생성 방법
arr={key_1:value1, key_2:value2, ..., key_n:value_n};
2차원배열
다차원 배열을 행렬로 생각하지마라!!
---
자바스크립트 객체
사용자 정의 객체: 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체(예: Car( ), House( ), Hotel( ))
내장 객체: 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체(예: Object( ), Array( ), Date( ))
내장 객체의 종류
브라우저 객체 모델(BOM, Browser Object Model): 웹 브라우저의 각종 요소를 객체로 표현
문서 객체 모델(DOM, Document Object Model): 웹 문서의 각종 요소를 객체로 표현
전역 자바스크립트 객체(Global JavaScript Objects): 자바스크립트 프로그램 전체에서 사용하는 내장 객체
객체변수(참조변수)를 이용하여 객체 생성
객체 속성 접근 방법
객체명.속성명
ex) car.name
* DOM tree *
아래와 같은 유형의 노드(Node)로 구성:
(1) 요소 노드 => 태그
(2) 텍스트 노드 => 태그의 시작/끝 태그사이에 값
(3) 속성 노드 => 태그의 속성
(4) 주석 노드 => 주석문
https://wooder2050.medium.com/%EC%9D%B4%EB%A1%A0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-dom-%ED%8A%B8%EB%A6%AC-96ca3008a474
innerHTML과 text어쩌구 innerText 차이 구분하기!
'국비학원' 카테고리의 다른 글
| [국비지원] KH 정보교육원 63일차 (0) | 2022.06.29 |
|---|---|
| [국비지원] KH 정보교육원 62일차 (0) | 2022.06.25 |
| [국비지원] KH 정보교육원 59일차 (0) | 2022.06.21 |
| [국비지원] KH 정보교육원 57~58일차 (0) | 2022.06.21 |
| [국비지원] KH 정보교육원 55~56일차 (0) | 2022.06.17 |
