정리정리정리

자바스크립트(javascript) 내장 객체 - 배열 객체 본문

Javascript

자바스크립트(javascript) 내장 객체 - 배열 객체

_JSPark 2017. 4. 2. 21:58

1. 배열 객체


자바스크립트의 배열은 자바, c#과 같은 상력한 타입의 언어와는 다르게 하나의 배열에는 동일한 타입의 요소만 포함되는 것은 아니다.

각 요소마다 다른 타입의 객체가 포함될 수 있다.


배열 생성 - 배열 생성자


Array도 Object처럼 자바스크립트에서 미리 만들어 놓은 배열 객체의 생성자.


var arr = new Array(); 


arr[0] = 1;

arr[1] = "Hello";

arr[2] = true;

arr[3] = { a : 1, b : 2};


요소에 값을 할당할 경우 인덱스에 해당하는 요소가 존재하지 않으면 해당 인덱스의 요소를 추가한다. 그래서 배열의 크기가 자도응로 증가된다.


자바스크립트에서는 배열의 크기가 자동으로 증가된다.


배열을 생성하면서 Array생성자에 배열의 크기를 인자로 전달할 수 있다.


var arr = new Array(3);


arr[9] = "add";


console.log(arr) // [1,"Hello", true, Object, undefined, undefined, undefined, undefined, undefined, "add"]


위 생성자는 3개의 undefined 요소를 가진 배열 객체를 생성한다. 만약 중간에 있는 요소를 건너뛰고 10번째 요소에 값을 할당하면 10번째 요소에 값이 할당되면서 중간의 요소는 undefined로 초기화 된다.


다음과 같이 배열 객체를 생성할때 초기 요소를 인자로 받을 수도 있다.

var arr = new Array(1,"Hello", true,{a:1,b:2});


근본적으로 배열도 객체이기 때문에 다음처럼 사용도 가능하다.


arr.prop1 = 1;

arr.method1 = function(){console.log(this.prop1)};

arr.method1(); // 1




배열 생성 - 배열 리터럴


var arr = [] // 배열 생성.

var arr = [1, "Hello", true, {a:1 ,b:2}];


요소를 정의할 때는 객체 리터럴의 경우처럼 다음과 같이 중첩해서 지정할 수 있다.

var m = [

[1,2,3],

["a","b","c"],

[7,8,9]

]


배열의 요소로 고정된 값 대신에 표현식이 올 수도 있다.

var a = 1;

var b= [a, a+1, a+2];


var arr = [1,,,,5];


값이 정해진 요소와 정해지지 않은 요소가 섞여 있다면 정해지지 않은 요소는 콤마(,)로 구분해서 비워두면 undefined로 초기화된다.




배열 객체의 데이터 구조


배열 객체도 객체로서 Object의 프로토타입 멤버를 상속받는다. 그리고 배열 객체도 Object 인스턴스처럼 인스턴스 멤버를 관리하는 영역을 가지고 있다.



그림에서 확인할 수 있듯이, 배열 객체를 보면 인스턴스 멤버를 관리하는 데이터 구조와 배열의 요소를 관리하는 데이터 구조가 모두 있다.

이것은 배열 객체를 일반 객체처럼 멤버를 추가/제거할 수도 있다는 것이고 배열을 관리하기 위한 또다른 구조도 가지고 있다는 뜻 이다.


var arr = ["a","b"];

arr.prop = "prop";


1 in arr        // true - 인덱스 1에 해당하는 배열 요소가 존재함

"prop" in arr   // true - "prop"라는 속성이 존재함




Array 프로토타입 멤버


프로토타입 속성.

 arr.constructor

 Array 객체 arr를 생성한 함수(생성자)에 대한 참조

 arr.length

 배열의 요소 개수를 반환



성격별 메서드 분류.

배열을 합치고 자르기

 concat(), join(), slice()

 요소 추가, 제거

 pop(), push(), shift(), unshift(), splice()

 요소 정렬

 sort(), reverse() 














참고.


자바스크립트 객체지향 프로그래밍.

0 Comments
댓글쓰기 폼