안녕하세요. 깊게학습한것을 현업에 써먹고싶은 진쓰입니다.
자바스크립트 객체, 배열 포스팅 시작하겠습니다.
같이 묶은이유는 둘다 객체 개념으로 이해하시면 되기때문입니다.
new라는 예약어를 통해 배열과 객체는 생성하실 수 있습니다.
1. 객체 정의
- 객체를 사용하기 때문에 객체기반언어 입니다.
- 객체는 속성(property)과 methods 를 가집니다.
- function으로 정의된 생성자 함수의 객체의 정의는 new를 이용합니다.
- 생성자함수 안에는 this라는 예약어를 이용해 정의합니다.
2. 객체 사용방법
일반적인 객체지향언어에서의 사용법과 동일합니다.
- 즉 객체이름 다음에 점(.)을 찍고 속성이나 메소드를 써주면 됩니다.
* 객체 선언방법
function grade(Name, kor, eng, mat) { this.name = Name this.kor = kor this.eng = eng this.mat = mat }
|
메소드선언에도 사용하는 function이라는 키워드가 사용됨을 보실 수 있습니다.
또한, 파라메터 역시 적어주는데, 개발자 임의로 정할 수 있습니다.
this 라는 예약어를 통해, 객체의 멤버변수와, 함수를 저장할수 있습니다.
<html> <head> <title> 6장 예제 </title> <script language="javascript"> function print(){ document.write(this.name+"<br>"); document.write(this.kor+"<br>"); document.write(this.eng+"<br>"); } function Score(name, kor, eng) { this.name = name; this.kor = kor; this.eng = eng; this.print = print; } </script> </head>
<body> <script language="javascript"> jinss = new Score("진쓰", 100, 80); park = new Score("영수", 70, 50);
jinss.print(); park.print(); </script> </body> </html> |
|
name, kor, eng 멤버변수를 가지는 Score라는 객체를 정의했습니다.
그리고 print라는 메소드를 정의해서, 객체내의 print 멤버변수가 print 메소드를 가르키도록 했습니다.
또한 객체를 생성할때는 new라는 예약어를 사용하시는것을 볼 수 있습니다.
3. 객체배열 특징
-내장객체 Array 객체를 의미한다. - 접근 방법 배열이름[인덱스] : 인덱스는 0부터 시작 합니다.
- 생성방법 배열이름 = new Array(개수)
- 예) Arr_Name = new Array(10)
|
<html> <head> <title> 6장 예제 </title> <script language="javascript"> </script> </head>
<body> <script language="javascript"> my_array = new Array(5); my_array[0] = "가"; my_array[1] = "control & instrumentation"; my_array[2] = "유튜브"; my_array[3] = "Jinss"; my_array[4] = "mybuddy"; for(var i=0;i<5;i++){ document.write(my_array[i]+" "); } </script> </body> </html> |
|
객체 배열을 선언할때도 new라는 예약어를 사용하여 생성합니다.
예제에서는 다양한 문자열을 넣고 출력하는것을 확인할 수 있습니다.
자료형을 배열로 선언하였기 때문에, 연속적인 인덱싱으로 접근할 수 있습니다.
여기서는 for문을 통해서 접근하는 예제를 보실 수 있습니다.
.
4. array객체 메소드
- join() : 배열을 하나의 문자열로 만들어준다. - sort() : 배열의 값들을 순서대로 정렬한다. - reverse() : 배열안에 값들을 순서대로 재정렬시킨다. - concat() : 두 개배열을 하나의 배열로 만든다. - slice() : 배열의 일부분의 값을 추출 합니다. |
<html> <head> <title> 6장 예제 </title> <script language="javascript"> </script> </head>
<body> <script language="javascript"> my_array = new Array("사과","배","바나나"); for(var i=0;i<3;i++){ document.write(my_array[i]+"<br>"); //배열 전체 출력합니다. } document.write( "<br><br>"); document.write( my_array.join()+"<br>"); //하나로 합칩니다. document.write( "<br><br>"); document.write( my_array.join("와 ")+"<br>"); // 합칠때 "와" 로 합칩니다. document.write( my_array.join("& ")+"<br>"); //합칠때 &로 합칩니다. array1 = new Array("오징어", "낙지", "문어","꼴뜨기"); //1번 인덱스전껄 자르고, 3번인덱스이상부터 짜릅니다. array2 = array1.slice(1,3);
document.write(array2); </script> </body> </html> |
|
힘찬 월요일 시작해봅시다! 감사합니다. :)
