카테고리 없음

자바스크립트 배열과 객체

코카(Coca) 2016. 5. 8. 23:41

1. 배열

[배열의 생성]

- 대괄호([])로 생성

- 대괄호 사용 후 안에 쉼표로 구분하여 자료를 입력

ex)

<script>

//변수를 선언합니다

var array = [225 , 100, 32 ,58];

</script>

 

[배열의 구성]

- 배열은 인덱스와 요소로 구성되어 있다.

- var fruit = ['사과', '오렌지', '딸기', '망고', '바나나'] 라는 배열이 있을 경우, 0번 인덱스의 요소는 사과, 3번 인덱스의 요소는 망고이다.

 

2. 객체

- 객체는 요소에 인덱스로 접근하는 배열과 달리, 요소에 키를 통해 접근한다

ex)

<script>

var product = {

제품명: '7D 건조 망고',

유형: '당절임'

성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',

원산지: '필리핀'

};

</script> 

 

[객체의 사용과 객체의 키]

- 객체 뒤에 대괄호를 사용하고 키를 표시하여 요소에 접근한다

ex)

product['제품명'] → '7D 건조 망고'

product['성분'] → '망고, 설탕, 메타중아황산나트륨, 치자황색소'

 

- 객체 뒤에 마침표를 사용한다

ex)

product.제품명 → '7D 건조 망고'

product.성분 → '망고, 설탕, 메타중아황산나트륨, 치자황색소'

 

여기서 공백과 같이 식별자가 아닌 문자가 있는 키 이름은 마침표를 통해 접근이 불가능하며 오로지 대괄호를 통해서만 접근가능 하다.

ex)

object['white space']

 

 

[객체의 속성]

- 객체 내부에 있는 값 (요소는 배열 내부에 있는 값이다)

ex)

var object = {

number: 273,

string: 'RintIanTta'

boolean: true

}

여기서 object객체의 속성들은 number, string ,boolean이 있다.

 

 

[메소드]

- 객체의 속성 중 함수 자료형인 속성을 말한다

ex)

<script>

var person = {

name: '윤인성',

eat: function (food) { }

}

person.eat();

</script>

여기서 eat속성은 함수 자료형이므로 eat()매소드라 부른다.

 

 

[객체와 반복문]

- 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능하다. 그래서 대신 for in을 사용하여 객체의 속성들을 모두 살펴볼 수 있다.

ex)

<script>

var product = {

제품명: '7D 건조 망고',

유형: '당절임'

성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',

원산지: '필리핀'

};

var output='';

for ( var key in product) {

output += '*' + key + ': ' + product[key] + '\n';

}

alert(output);

</script>

 

출력은

*제품명: '7D 건조 망고',

*유형: '당절임'

*성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',

*원산지: '필리핀'

로 나온다

 

 

[객체의 속성 추가와 제거]

- 동적으로 속성을 추가하거나 제거할 수 있다

ex)

<script>

var student = {};

student.이름 = '윤인성';

student.취미 = '악기';

student.특기 = '프로그래밍';

student.장래희망 = '생명공학자';

</script>

 

-동적으로 메소드를 추가하거나 제거할 수 있다

ex)

<script>

var student = {};

student.이름 = '윤인성';

student.취미 = '악기';

student.특기 = '프로그래밍';

student.장래희망 = '생명공학자';

 

student.toString = function () {

var output = '';

for (var key in this) {

if ( key != 'toString' ) {

output += key + '\t' + this[key] + '\n';

}

}

return output;

};

 

//출력

alert(student.toString() );

</script>

 

- 속성의 제거는 delete 키워드를 사용하여 할 수 있다. 이 키워드 뒤에 삭제하고자 하는 객체의 속성을 입력하여 지울 수 있다.