자바스크립트 - Array 배열

2023. 11. 28. 09:05자바스크립트

반응형

배열은 변수를 여러 공간에 분할하여 저장하고 분할한 공간을 index를 부여해 데이터를 저장 또는 호출하는 개념이다. 

 

객체 생성 방법

1) var arr = new Array("wow1", "wow2", "wow3");

위와 같이 선언과 동시에 초기값을 넣을 수도 있다.

 

2) var arr = [ "wow1", "wow2", "wow3" ];

위와 같이 new와 생성자 없이 선언과 동시에 초기값을 넣을 수도 있다.

 

2)  var arr = new Array();

arr[0] = "wow1";

arr[1] = "wow2";

arr[2] = "wow3";

위와 같이 선언하고 값을 넣어줄 수 있다.

 

Array 객체 속성(length)

Array 객체는 length라는 속성이 있다. 이 속성을 통해 배열의 길이를 알 수 있다.

ex)  var arr = [ "wow1", "wow2", "wow3" ];

console.log(arr.length); // 3

 

Array 객체 메서드

- slice

배열에서 특정 부분을 잘라서 나타낼 수 있다. slice를 사용한다고 해서 원래 배열에 영향은 주지 않는다.

 

//1) slice(n)

// 배열의 인덱스 n부터 끝까지

ex) var arr = [ "ex1", "ex2", " ex3" ];

console.log(arr.slice(1));// "ex2", " ex3"

 

//2) slice(n1, n2)

// 배열의 인덱스 n1부터 n2번째 요소까지 나타낸다.

ex) var arr = [ "ex1", "ex2", " ex3" ];

console.log(arr.slice(1,3));// "ex2", " ex3"

console.log(arr.slice(0,2));// "ex1", " ex2"

console.log(arr.slice(1,2));// "ex2"

 

//위에서 slice를 사용했다고 해서 진짜 arr이 잘린상태로 영향을 받는게 아니다. 밑에를 보면 원래 배열 그대로 출력되는걸 //볼 수 있다.

console.log(arr);// "ex1", "ex2", "ex3"

 

- join

배열에 있는 값들을 문자로 연결해주고 파라미터로 문자열을 넣어주면 그 문자열이 값 사이마다 있다. 원래의 배열에 영향을 주지 않는다.

ex) var arr = [ "ex1", "ex2", " ex3" ];

console.log(arr.join("&"));// ex1&ex2&ex3

 

- concat

두개의 배열을 연결한다.

원래의 배열에 영향을 주지 않는다.

ex) var arr1 = [ "ex1", "ex2", " ex3" ];

var arr2 = [ "ex4", "ex5", " ex6" ];

console.log( arr1.concnat(arr2)); // [ "ex1", "ex2", " ex3" , "ex4", " ex5" , "ex6"]

 

- toString()

배열을 문자열로 변환해준다.

원래의 배열에 영향을 주지 않는다.

ex) var arr = [ "Q", "W", "E", "R"]

console.log( arr.toString()); // " Q, W, E, R " 

 

- splice()

배열의 일부분을 삭제하거나 추가할 수 있다.

원래의 배열에 영향을 준다.

 

1) splice(n1)

배열의 인덱스 n1부터 끝까지 삭제된다. 

ex)

var arr = [ "Q", "W", "E", "R"]

var arr2 = arr.splice(2); // 인덱스 2부터 끝까지 삭제

console.log( arr );// [ "Q", "W" ]

console.log( arr2 ); // [ "Q", "W" ]

 

2) splice(n1, n2)

배열의 인덱스 n1부터 n2개의 인덱스를 삭제한다.

ex)

var arr = [ "Q", "W", "E", "R"]

var arr2 = arr.splice(1, 2); // 인덱스 1부터 2개삭제

console.log( arr );// [ "Q", "R" ]

console.log( arr2 ); // [ "Q", "R" ]

var arr3 = [ "Q", "W", "E", "R"]

arr3.splice(2, 0); //인덱스 2부터 0개 삭제

console.log( arr2 ); // [ "Q", "W", "E", "R"]

 

 

3) splice(n1, n2, newItem, newItem , newItem , newItem  , .....)

배열의 인덱스 n1부터 n2개의 인덱스를 삭제한다. 3번째 파라미터부터 있는 newItem은 원하는 개수 만큼 넣을 수 있고 newItem은 배열에 추가된다. 이때 중요한건 splice로 잘린 배열은 반환되어서 새로운 배열 변수에 넣을 수 있지만 추가하는거는 반영 안된다. 

ex)

var arr = [ "Q", "W", "E", "R"]

var arr2 = arr.splice(1, 2, "P", "K"); // 인덱스 1부터 2개 삭제하고 요소 추가

console.log( arr );// [ "Q" , "P", "K" , "R" ]

console.log( arr2 ); // [ "Q", "R" ]

 

 

 

반응형