자료형 종류(기본,객체)
- 기본 자료형
let String = "위잉위잉";❗ 객체가 아니므로 속성&메소드 추가 불가능 ❗
let num = 35;
//num.method = function(){}; // X 불가능
// 따라서 프로토타입으로 추가한다
//num.prototype.method = function(){}; // X 불가능
Number.prototype.method = function()
{
return this.valueOf();
}
console.log(num.method());
//35 반환- 객체 자료형
let String = new String("위잉위잉");기본 자료형의 속성 또는 메소드를 사용할 때 자동으로 객체로 변환됨!
이 점을 응용하여 CRUD 정의
Number 객체
- toFixed()
- 숫자를 해당 소수점까지 나타낸 문자열 리턴
let num = 3.141592;
console.log(num.toFixed(1)) // 3.1
console.log(num.toFixed(4)) // 3.1415String 객체
String은 변경된 값을 리턴한다 (재할당 필요)
-
메소드
-
indexOf()
- 특정 문자열이 있는지 확인 ( 문자열 없으면 -1 반환)
let String = "안녕 좋은아침!";
if (String.indexOF("아침") >=0 )
{
console.log("굿모닝!" );
}
Date 객체
Month(월)은 0부터 시작
- 메소드 활용
- get() , set () 메소드 사용
- FullYear, Month, Day, Hour, Minutes, Seconds ,,
- 시간끼리 빼서 시간 간격을 구할 수 있음
let now = new Date(); // 현재 시간
lst point = new Date('December 9 1999');
let interval = now.getTime() - point.getTime();
interval = Math.floor(interval / (1000*60*60*24) );
console.log(`태어나고 ${interval}일 지났습니다`)
// 태어나고 10886일 지났습니댜
Array 객체
*표시된 메소드는 자기 자신을 변화시킴
-
정렬
-
정방향 : sort()
-
역방향 : reverse()
-
객체 내부의 숫자로 정렬하고 출력하기
-
내부 문자로 정렬하고 출력하기
-
-
forEach()
- 배열의 요소를 하나씩 뽑아 반복 돌림 ( for문과 비슷)
let array = [11,22,33,44,55];
array.forEach(item,idx) => {
console.log(`${idx}번째 요소는 ${item}입니다`);}
-
map()
- 콜백 함수에서의 리턴값 기반으로 새로운 배열 생성
-
filter()
- 콜백함수에서 리턴값이 true인것만으로 새로운 배열 생성
-
배열의 요소를 삭제
// pop() : 함수 배열의 마지막 요소 삭제 & 삭제된 요소 값 반환
// 빈배열을 삭제하는 경우는 undefined 반환
var arr = ['A', 'B', 'C', 'D'];
var popResult = arr.pop();
console.log(popResult); // D
// shift() : 첫번쩨 요소 삭제 & 삭제된 요소값 반환
var arr = ['A', 'B', 'C', 'D'];
var shifhtResult = arr.shift();
console.log(shifhtResult); // A
// splice( 제거할 요소 인덱스 , 제거할 개수 )
// 반환값은 삭제한 배열의 요소를 담은 ‘배열’
// 첫번쨰 인자를 0, 두번째 인자 생략하면 모든 배열의 모든 요소 삭제가능
var arr = ['A', 'B', 'C', 'D'];
var splicetResult = arr.splice(1, 2);
console.log(splicetResult); // ["B", "C"]
// filter () :조건에 일치하는 새 배열 생성 (기존 배열 변경x)
var arr = [1, 2, 3, 4, 5];
var filterArr = arr.filter(function(data) {
return data < 3;
});
console.log(filterArr); // [1, 2]
// delete () : 특정 배열요소 삭제, but 배열 길이는 그대로 (빈값으로 변경하기 때문)
var arr = [1, 2, 3, 4, 5];
delete arr[0];
console.log(arr); // [empty, 2, 3, 4, 5]
console.log(arr.length);// 5
console.log(arr[0]); // undefined예제
<script>
var pArr = [
{no:110, name:"KIM", phone:"010-1234-5678"},
{no:120, name:"LEE", phone:"010-1234-6666"},
{no:125, name:"PARK", phone:"010-1234-5555"},
{no:130, name:"KANG", phone:"010-1234-5688"},
{no:137, name:"CHOI", phone:"010-1234-7777"},
{no:150, name:"AHN", phone:"010-1234-5699"}
];
// 문제 : pArr 요소중 no속이 125인 요소를 제거하고 출력하라.
var index = pArr.findIndex(function(item) {
return item.no == 125;
});
console.log(index);
pArr.splice(index,1);
console.log(pArr);
</script>
응용 - 검색창 내용과 일치하는 데이터 불러오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 목록</h1>
<p>검색 : <input type="text" id="search" /></p>
<table id="listTbl" border="1" width="500"></table>
<script>
var pArr = [
{no:110, name:"KIM", phone:"010-1234-5678"},
{no:120, name:"강", phone:"010-1234-6666"},
{no:125, name:"강호", phone:"010-1234-5555"},
{no:130, name:"강호동", phone:"010-1234-5688"},
{no:137, name:"강호동 되", phone:"010-1234-7777"},
{no:150, name:"강호동 되기", phone:"010-1234-5699"},
{no:112, name:"KIM2", phone:"010-1234-5678"},
{no:122, name:"LEE2", phone:"010-1234-6666"},
{no:122, name:"PARK2", phone:"010-1234-5555"},
{no:132, name:"KANG2", phone:"010-1234-5688"},
{no:132, name:"CHOI2", phone:"010-1234-7777"}
];
function diplayList(pArr) {
var listTbl = document.getElementById("listTbl");
function addCell(row, data) {
let cell = document.createElement('td');
cell.innerText = data;
row.appendChild(cell);
}
for(let people of pArr) {
let row = document.createElement('tr');
addCell(row, people.name);
addCell(row, people.name);
addCell(row, people.phone);
listTbl.appendChild(row);
}
}
diplayList(pArr);
var inputSearch = document.getElementById("search");
inputSearch.onkeyup = function(event) {
var newArr = pArr.filter(function(item) {
return (item.name).indexOf(inputSearch.value) != -1;
});
document.getElementById("listTbl").innerHTML = ""; // 기존 목록을 지우고 초기화
diplayList(newArr);
}
</script>
</body>
</html>
👨Education Computer Engineering 🎓Expected Graduation: February 2023 📞Contact info thstjddn77@gmail.com