[Javascript]

[Javascript] 배열의 생성, 접근, 변경, 추가, 삭제, 연결

개발잘하고싶음 2023. 4. 2. 22:58

1)배열 생성하기

예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있음.

//길이가 0인 예전 방식의 배열 생성
var myArray1 = new Array();

//길이가 10인 예전 방식의 배열 생성, 10개의 자리에는 아무것도 들어 있지 않습니다.
var myArray2 = new Array(10);

//예전 방식의 생성과 동시에 초기화
var myArray4 = new Array(1, 2, 3,"홍길동", "아무개");

//길이가 0인 literal notation 방식의 배열 생성
var myArray3 = [];

//literal notation 방식의 생성과 동시에 초기화
var myArray5 = [1, 2, 3, "홍길동", "아무개"];

 

2)배열 내의 요소에 접근하기(indexing)

var lastItem = myArray5[4]; // 아무개

배열 length를 벗어난 index를 사용하게 되면 undefined 값이 반환된다. 

var notExist = myArray5[5]; // undefined

 

3)배열 내 요소의 내용 변경 

(1)indexing한 후 다른 값을 대입한다

// 첫번째 요소의 값을 "홍길동" 으로 변경합니다.
myArray5[0] = "홍길동";

(2)splice()

두번째 코드를 참고하면 기존의 내용을 삭제 하고 교체할 수 있음 (즉 변경할 수 있음). 인자가 세 개 필요함. 

// 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);
var value = myArray.splice(2, 1);

// 세번째부터 한개를 8로 바꾼다.
var value = myArray.splice(2, 1, 8);

 

4)배열에 item 추가하기

(1)push() 및 unshift() - 앞, 뒤로 추가하기

push()는 배열의 마지막에, unshift()는 배열의 가장 앞에 추가한다.

myArray5.push(6);

(2)값이 없는 item을 indexing 한 후 값을 추가하기 (값이 있는 item이면 추가가 아니라 변경된다)

myArray5[myArray5.length] = 6;

(3)splice() - 중간에 추가하기

배열의 세번째 위치에 요소를 삽입합니다. 세 개의 인자가 필요하며 두 번쨰 인자 값을 0으로 하여 지우지 않고 추가만 함.

myArray.splice(2, 0, "A");

 

5)배열 요소 삭제하기

(1)delete 연산자 사용함

item의 값은 지우지만 자리는 남겨둔다. 즉 배열의 길이는 변하지 않고 해당 값만 undefinded가 된다.

delete myArray[2];

 

(2)splice() -중간을 삭제하기

기존의 내용을 삭제할 수 있음. 인자 2개만 있으며 교체하진 않고 삭제만 함. 배열 크기도 삭제한 만큼 줄어듦. 

// 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);
var value = myArray.splice(2, 1);

// 세번째부터 한개를 8로 바꾼다.
var value = myArray.splice(2, 1, 8);

 

(3)pop()과 shift() - 앞, 뒤를 삭제하기

pop()은 배열의 마지막 요소를 제거하고, 제거된 요소르 반환함.

shift()는 배열의 첫번째 요소를 제거 후 반환함.

 

6)배열간 연결하기 (두 개 이상의 배열을 연결해 하나의 배열 데이터를 만듦)

var array1 = [1,2,3];
var array2 = [4,5,6];
var array3 = [7,8,9];

// 두 배열을 연결 합니다.
var array3 = array1.concat(array2);
console.log(array3); // [1,2,3,4,5,6]
 
// 여러개의 배열을 연결 합니다. 이 때 array3 배열 값은 위에서 [1,2,3,4,5,6]으로 변경되었음.
var array4 = array1.concat(array2, array3);
console.log(array4); // [1,2,3,4,5,6,1,2,3,4,5,6]

 

7) 참고 URL

 

 

자바스크립트 배열(javascript array) 사용법

배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다. 자바스

offbyone.tistory.com