노력이 좋아서
<step59>'js_복습(2)'
zoaseo
2022. 6. 14. 10:31
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>
//객체 리터럴 방식
//키에는 문자형, 값은 모든 자료형
let obj1 = new Object();
//객체 생성자 방식
let obj2 = {};
obj1.name = "green";
obj2.name = "blue";
obj1.age = 20;
obj2.age = 30;
console.log(obj1);
console.log(obj2);
//프로퍼티 삭제하기
delete obj1.age;
console.log(obj1);
let user = {
name:"John",
age: 30,
"likes birds":true,
}
//.표기법 obj.key
//대괄호 표기법 obj['key']
console.log(user.name);
console.log(user.age);
console.log(user['likes birds']);
//단축 프로퍼티
//생성자 함수
function Student(name, age, score, phone){
this.name = name;
this.age = age;
this.score = score;
this.phone = phone;
}
let stu1 = new Student("민영",22,90,'01012341234');
let stu2 = new Student("수진",27,60,'01055551234');
console.log(stu1);
console.log(stu2);
//단축 프로퍼티
//name: name => name
//age: age => age
function makeUser(name, age){
return {
name,
age,
}
}
let user2 = makeUser("green",20);
console.log(user2);
// in연산자 - 객체의 프로퍼티가 있는지 확인
// "key" in object
console.log("name" in user2); //true
console.log("abc" in user2); //false
// for in 반복문
for(let key in user2){
console.log(`객체의 key는 ${key}입니다.`);
console.log(`객체의 값은 ${user2[key]}입니다.`);
}
// 프로퍼티 합계 구하기
let students = {
a: 90,
b: 80,
c: 60,
}
// 학생들의 점수를 다 더한 값을 리턴해주는 함수를 생성하시오.
function stuendentSum(stus){
let sum = 0;
for(let key in stus){
sum += stus[key];
}
return sum;
}
console.log(stuendentSum(students));
// Object.keys(obj) -> 객체의 키를 담은 배열을 반환
// Object.values(obj) -> 객체의 값만 담은 배열을 반환
// Object.entries(obj) -> [키, 값]을 담은 배열을 반환
// Object.fromEntries(array) -> 배열을 다시 객체로 반환
let keyArr = Object.keys(user2);
let valueArr = Object.values(user2);
let entriArr = Object.entries(user2);
console.log(keyArr);
console.log(valueArr);
console.log(entriArr);
let newObj = Object.fromEntries(entriArr);
//프로퍼티 개수 구하기
let dog = {
name: "구름",
age: 3,
color: "white",
}
//객체를 매개변수로 받아서 그 객체의 프로퍼티가 몇개인지 반환해주는
//함수를 만드시오.
function count(h){
let b=[];
for(let key in h){
b.push(h[key]);
}
return b.length;
}
console.log(count(dog));
</script>
</body>
</html>2) 클래스
<!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>
// 클래스 선언하기
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
//메서드
speak(){
console.log(`${this.name}: 안녕~`);
}
}
//객체생성
const min = new Person('min',30);
const green = new Person('green',25);
console.log(min.name);
console.log(min.age);
min.speak();
green.speak();
//클래스 상속
//extends를 이용하여 클래스를 상속받음
//네모, 삼각형, 원을 만들기 전 모양이라는 클래스를 생성
//모양이라는 클래스를 네모, 삼각형, 원이 상속을 받도록 함.
class Shape {
constructor(width,height,color){
this.width = width;
this.height = height;
this.color = color;
}
draw(){
console.log(`모양의 색은 ${this.color}로 그린다.`);
}
getArea(){
return this.width * this.height;
}
}
class Rectangle extends Shape {
}
class Triangle extends Shape {
//오버라이딩
//필요한 함수만 재정의
draw(){
//슈퍼를 이용하여 부모요소에 있는 메소드도 적용
super.draw();
console.log('삼각형을 그립니다.');
}
}
const rectangle = new Rectangle(20,20,'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20,40,'red');
triangle.draw();
//instanceof
//a instanceof b : a가 b를 이용해서 만들어졌는지
console.log(rectangle instanceof Shape);
console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Rectangle);
console.log(rectangle instanceof Object);
console.log(rectangle);
</script>
</body>
</html>