Arry 객체

자바스크립트에서는 여러 개의 항목을 하나의 변수에 저장 한다.

 

Arry 객체로 배열 만들기

 

자바스크립트 안에는 배열을 쉽게 만들고 다룰수 있게 미리 Arry객체가 만들어져 있습니다.

 

 

Arry 객체를 사용해 인스턴스를 만든다.

 

var myArry =new Arry( ); // Arry 객체 인스턴스를 만든다

 

var numbers =["one", "two", "three", "four"]; //리터럴을 사용한 배열

var numbers=new Arry("one", "two", "three", "four"); //Arry 객체를 사용한 배열

 

배열에서 for문 사용하기

- for문을 처음 요소부터 끝나는 요소까지 반복 합니다.

- 배열에 몇 개의 요소가 있는지 확인 하려면 Arry객체의 length속성을 사용합니다.

 

ex)

   var seasons =["봄", "여름", "가을", "겨울"]
   seasons.length 

  =4

 

for문을 사용해 요소들을 순서대로 접근 하려면 인덱스 값을 0부터  length-1 까지 지정한다는 것 꼭 기억하자

 

for(var i=0; i<seasons.length; i++){
   console.log(seasons[ i ]);
}

봄

여름

가을

겨울

 

Arry 객체의 함수 알아보기

 

- 함수를 사용할 때는 함수의 반환 값이 무엇인지

- 기존 배열은 그대로 유지 되는지 

- 추가 하거나 삭제한 요소 때문에 기존 배열이 바뀌는지 이해 하고 있어야 한다.

 

둘 이상의 배열을 연결하는 함수 concat( )함수

- 기존에 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수

 

ex)

 var nums = ["1", "2", "3" ];

 var chars =["a", "b", "c", "d"];

nums.concat( chars ) //num배열에 대한 chars배열 연결

(7) ["1" ,"2", "3", "a", "b" ,"c" , "d" ]

 

배열 순서를 바꿀 수가 있다

nums.concat( chars ) //chars배열에 대한 nums배열 연결

(7) ["a", "b" ,"c" , "d", "1" ,"2", "3" ]

 

배열 요소를 연결하는  join( ) 함수

- 배열 요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호를 직접 지정할 수 있다.

 

ex)

nums.join( ) // 구분 기호 없이 연결

"1, 2, 3"

nums.join("-")// 구분 기호("-")를 사용해 연결

"1-2-3"

 

새로운 요소를 추가하는 push( )함수와 unshift( )

 

push( ) 

- 배열 맨 끝에 요소를 추가 합니다.

 

unshift( )

- 배열 맨 앞에 요소를 추가 합니다.( 추가하는 요소는 하나일 수도 있고 두 개 이상일 수도 있습니다.)

 

- nums 배열을 만든 다음 nums 배열 끝에 4,5를 추가 합니다.

- 실행한 후 반환 값은 숫자 5가 표시됩니다.

- 이 값은 nums배열에 4,5를 추가하고 난 후 배열 요소의 개수를 나타낸다.

 

ex) 

   var nums=[ "1", "2", "3" ]

   nums.push( "4", "5") //배열 맨 끝에 4,5 요소를 추가

   =5

- push( )함수 사용후 결과 nums 입력하면

- 배열이 바뀐 것을 볼 수 있습니다.

 

nums[ "1", "2" , "3", "4", "5"] 

 

nums.unshift("0") //nums 배열 맨 앞에 "0" 요소를 추가

=6 // 새 요소가 추가된 후 배열 요소의 개수가 반환됨

 

 

배열에서 요소를 추출하는 pop( ) 함수와 shift( )함수

 

pop( )함수

- 맨 뒤에 있는 요소를 추출 한다.

 

shift( )함수

- 맨 앞에 있는 요소를 추출 한다. (배열에서 요소를 삭제할 때는 추출 함수를 사용합니다.)

 

- 배열에 pop함수를 사용한다.

- study 배열에서 마지막 요소 "javascript" 를 추출 한다.

- pop( ) 함수를 실행하면 추출한 요소가 반환 된다.

- study 배열을 확인 하면 "html" 과 "css"만 남아 있을 것이다.

 

ex)

 var study =["html", "css", "javascript"]

study.pop( )

"javascript"

study

  ( 2 ) ["html", "css"]

 

shift(  )함수는 배열의 첫요소를 반환 합니다.

 

var js =["es6+", "node", "react", "angular", "vue"]
js.shift( )

"es6+"

 

원하는 요소를 삭제하거나 추가하는 splice( )함수

- 인수에 따라 일정 구간의 요소를 삭제 새로운 요소를 추가하는 함수입니다.

- 삭제한 구간의 요소들로 이루어진 새로운 배열이 결과값으로 표시 됩니다

 

인수가 1개일 경우

- splice( )함수는 인수가 가르키는 인덱스의 요소부터 배열의 끝 요소까지 삭제합니다.

 

- nums 배열을 만든 다음

- numbers.splice(2) 인덱스 2요소 부터 끝에 있는 요소 까지 삭제

- 세번째 요소부터 삭제 된다.

- 삭제된 요소로 구성된 배열 반환

- 삭제 결과가 반영된 [0, 1]만 남게 됩니다.

 

ex)

var numbers =[0, 1, 2, 3, 4, 5]

numbers.splice(2)// 인덱스 2(세 번째 요소) 이후 끝까지 삭제

[2, 3, 4, 5] // 삭제된 요소로 이루어진 배열

numbers

[0, 1] // 수정후 배열

 

인수가 2개일 경우

- 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 개수 입니다.

 

- study 배열을 만든 다음

- study.splice(2, 1) 인덱스에서 두 번째 요소를 삭제한다

- 즉 세 번째 요소 부터 1개 요소를 삭제한다

- 남은 배열만 남게 된다. 

ex)

var study =["html", "css", "web", "jquery"]

study.splice(2,1) // 인덱스 2에서 1개를 삭제

["web"] //삭제된 요소로 이루어진 배열

 

study ["html", "css", "jquery"] //수정된 배열

 

인수가 3개 이상일 경우

- 세 번째 인수부터는 앞서 삭제한 위치에 새로 추가할 요소를 지정합니다.

 

- study 배열을 만든 다음

- study.splice(2, 1,"js") 인덱스가 2인 위치

- 세 번째 요소를 삭제하고 

- 삭제된 자리에 "js" 를 추가 합니다.

- 세 번째 자리는 "jquery" 대신 "js" 가 추가 됩니다.

 

ex)

 study.splice(2, 1, "js")

["jquery"] // 인덱스 2에 1개 삭제

study

["html", "css", "js"] //삭제한 자리에 새로운 요소를 추가

 

- 기존 배열에 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면

- 삭제할 개수를 지정하는 두 번째 인수 0을 넣으면 됩니다.

 

- study.splice(2, 1, "js")인덱스가 2인 위치에서 

- 세 번째 부터 1개의 요소를 삭제하지 않고 세 번째 위치에 "jquery"를 추가 한다.

- study 배열에 네개의 요소가 들어간 것을 확인할 수 있다.

 

study.splice(2, 0, "jquery")

[ ] //삭제할 요소가 없기 때문에 실행후 빈 배열

study

["html", "css", "jquery", "js"]//새로운 요소 추가

 

 

원하는 위치의 요소들을 추출하는 slice( )함수

slice( )함수

- 인덱스 요소 부터 배열 끝가지 추출 한다.

- 배열에 중간 부분에서 요소를 추출할 때 기존 배열을 수정하지 않는다.

- 시작 인덱스 부터 시작해서 끝 인덱스 직전까지 추출 한다.

 

- colors 배열을 만든 다음

- 시작 인덱스만 지정 하고 인덱스가 2인 요소 즉 세 번째 요소인 blue 부터 끝까지 추출 한다.

 

ex)

var colors =["red", "green", "blue", "white", "black"]

colors.slice(2)

[ "blue", "white", "black"] //인덱스 2부터 끝까지 추출

colors

["red", "green", "blue", "white", "black" ] //원래 배열은 변경되지 않음

 

Arry 객체 함수

 

join - 배열 요소를 문자열로 합칩니다.

push - 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 요소의 개수를 반환

unshift - 배열의 시작 부분에서 새로운 요소의 개수를 반환 한다. 

pop - 배열의 마지막 요소를 꺼내 값을 반환 한다.

shift - 배열의 맨 앞에 요소를 꺼내 값을 반환 한다.

slice - 배열에서 특정한 부분만 추출합니다. 기존 배열은 변경 되지 않습니다.

splice - 배열에 요소를 추가 하거나 특정 부분만을 추출 한다.