JS-Do it! JS - #8일 (09,10)

9.객체

객체

프로그램에서 인식할 수 있는 모든 대상, 데이터를 저장하고 처리하는 기본 단위

-자바스크립트에서 객체란?

다양한 동작이 모여야 다른 사물과 어떻게 다른지 말할 수 있다.

자스객체란 관련된 정보와 도작을 함께 모아놓은 것

여러가지 데이터 유형을 함께사용 심지어, 객체 안에 다른 객체도 넣을 수 있다.

- 내장객체

자주 사용하는 요소는 자스에 미리 객체로 정의되어있는데 이를 내장객체라고 한다

ex) Date객체, Number객체,Math,Array...

 

사용자 정의 객체 만들기

let book1={
	title:"자료구조",
    pages:648
    //키:값 
}

프로퍼티 수정,추가

book1.pages=50 //수정
book1.author="저자" //추가

빈 객체 작성 후 프로퍼티 추가

let book2={}
let book2=new Object()

book2.title="JS"

프로퍼티 삭제

delete book2.title

//값만 제거할 경우는?
book.author=undefined

 

this

this란 현재 객체를 가리킨다.

같은 프로퍼티를 가지는 여러 개의 객체를 만들 경우에는 this.프로퍼티 로 사용

단,화살표 함수 내에서 this는 최상위인 window를 가리킨다.

 

자료 복사 (값 전달 vs 참조로 전달)

값 전달

변수에 값을 할당 -> 변수를 위한 새로운 공간 생성 -> 값이 저장 => 2개의 변수 공간,서로 다른 메모리 주소

(다른 변수에 값을 변경해도 처음 변수에는 지장 x)

참조로 전달

저장된 메모리 주소가 전달되는 바식

객체를 위한 공간이 만들어지는것이 아닌, 주소를 넘겨주는 것

 

생성자 함수: 객체의 틀인 함수

인스턴스(인스턴스 객체):생성자 함수를 사용하여 만든 객체

 

참고 실습

class Pet{
    constructor(name,color){
        this.name=name;
        this.color=color;
    }
    run(){
        alert(`${this.name} is running`);
    }
}

const dog=new Pet("buddle","ivory");
dog.run();

class Cat extends Pet{
    constructor(name,color,breed){
        super(name,color);
        this.breed=breed;
    }
    viewInfo(){
        alert(`이름: ${this.name} 품종:${this.breed} 색깔:${this.color}`);
    }
}

let cat1= new Cat("버들","ivory","sigoljobjong");
cat1.viewInfo();
cat1.run();

---

10.배열

 

문자열에 특정 문자나 문자열이 포함되어있는지 확인 - includes()

str="Hello, everyone."
str.includes("every") //true

 

정규 표현식의 문자 클래스

클래스의 종류	기호	설명
숫자 (digit)클래스	\d	0~9 사이 숫자
	\D	숫자가 아닌 모든 문자
공백(space)클래스	\s	공백,탭,줄바꿈
	\S	공백이 아닌 모든 문자
단어 (word)클래스	\w	단어에 들어가는 문자,숫자,언더바
	\W	단어에 들어가지 않는 문자

 

문자열을 문자 배열로 반환

1. split()

str5="Hello, everyone."
arr2=str5.split("") //["H","e"...]

2 전개 연산자

arr3=[...str5]

3. Array.from()

arr4=Array.from(str5)

 

문자열 배열을 다시 문자열로 변환 - join()

str6=array4.join("") ///"Hello,~"

 

 

forEach

let alpahbets=["a","b","c"]
alpahbets.forEach(alphabet =>{
실행~
});

 

원하는 위치에 있는 요소 추출,추가 - slice()

원래 배열은 바뀌지 않음

let colors=["red","green","blue","black"]
colors.slice(2)//["blue","black"]
colors //[

 

 

<실습 코드>

const origin = document.querySelector("#origin");
const result = document.querySelector("#result");

let numbers = [2, 4, 6, 8, 10];
showArray(origin,numbers); //?

let sum=0;
for(let i=0; i<numbers.length;i++){
    sum += numbers[i];
}
numbers.push(sum);
showArray(result,numbers);

function showArray(area,arr){
    let str;
    str="<table><tr>";
    for(let i=0;i<arr.length;i++){
        str += "<td>"+arr[i]+"</td>";
    }
    str+="</tr></table>"
    area.innerHTML = str;
}