배열객체

배열객체 Array

변수에는 데이터가 오직 한개만 저장된다. 만약 여러 개의 데이터를 변수에 저장하고 싶다면 배열을 이용할 수 있다.

'나눌 배', '열거할 열'자를 써서 나눠서 열거한다는 의미

말 그대로 여러 개의 데이터를 쭉 나열하여 하나의 변수에 담아 저장할 때 주로 사용한다.

배열 안에 있는 데이터는 개수가 몇 개이든 상관없다. 배열 안이 가공되더라도 상관없다.

배열을 선언하면 데이터가 들어간 순서대로 index번호라는 것을 부여받는다.

index번호는 데이터 순서에 대한 자리번호로 0번부터 순차적으로 부여된다.

index번호를 이용하면 해당 순번째에 새로운 데이터를 넣거나, 가공하거나 뺄 수도 있다.

 

[기본형]

1. var 참조변수 = new Array();

    참조변수[0] = 값1;

    참조변수[1] = 값2;

    참조변수[2] = 값3;

 

2. var 참조변수 = new Array (값1, 값2, 값3....);

 

3. var 참조변수 = [값1, 값2, 값3....]; ★ ★ ★ ★ ★

 

배열 객체에 저장된 데이터 불러오는 방법

배열객체에 저장된 데이터를 불러올 때에는 index번호를 이용하여 불러온다.

[기본형]

참조변수[index번호]

 

<script>

      var arr = [50, '하이루', true];

      document.write('<h2>배열값 가져오기1</h2>');

      //변수 arr안에 있는 배열 데이터 중 0번째 인덱스에 있는 데이터 꺼내오기

      document.write(arr[0], '<br/>');

      document.write(arr[1], '<br/>');

      document.write(arr[2], '<br/>');

      document.write('<h2>배열값 가져오기2</h2>');

      //반복문을 이용하여 배열안에 들어있는 모든 데이터를 꺼내오기

      for (var i = 0; i < arr.length; i++) {

        document.write(arr[i], '<br/>');

      }

      document.write('<h2>배열값 가져오기3</h2>');

      // 배열안에 모든 데이터를 한꺼번에 꺼내오는 for문 문법.

      // 이 문법은 배열에서만 사용할 수 있다.

      //for (카운트변수 in 배열이 들어있는 참조변수) => arr배열 안에 있는 0번인덱스부터 모두 꺼내기

      for (i in arr) {

        document.write(arr[i], '<br/>');

      }

    </script>

  

배열객체의 메서드 및 프로퍼티

배열객체의 메서드 및 프로퍼티를 사용하면 배열의 순서를 바꾸거나

    배열안에 새로운 데이터를 의도한 위치에 집어넣거나, 삭제하거나

    일부만 따로 빼낼 수도 있다.

    [메서드]

    1. join(연결 문자)

    : 배열 객체의 데이터를 연결 문자를 기준으로 1개의 문자형 데이터로 반환한다.

    2. reverse()

    : 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다.

    3. sort()

    : 배열 객체의 데이터를 오름차순으로 정렬한다.

    4. slice(시작인덱스, 끝인덱스) ★

    : 배열 객체 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다.

     ()안에는 시작하는 인덱스와 끝인덱스를 적을 수 있는데, 이때 마지막 끝인덱스

     번호에 있는 데이터는 포함하지 않는다. 즉, slice(1,4)라고 하면 1번부터 3번

     인덱스까지만 잘라서 반환한다.

     slice는 기존 배열에 영향을 주지 않고 잘라낸 데이터만 새롭게 배열로 반환한다.

    5. splice(시작인덱스, 데이터갯수, 새로 넣을 데이터) ★

    : 배열 객체의 데이터 중 지정한 데이터를 삭제하고 그 구간에

     새 데이터를 삽입한다.

     splice는 기존 배열 자체를 수정할때 사용하고, 데이터가 바뀌면 다시 돌아갈

     수 없다.

     6. concat(배열)

     : 2개의 배열을 하나로 합쳐 반환한다.

     7. pop()

     : 배열의 마지막 인덱스에 있는 데이터를 잘라낸다.

     8. push(새 데이터)

     : 배열의 마지막 인덱스에 새 데이터를 삽입한다.

     9. shift()

     : 배열의 첫 번째 데이터를 잘라낸다.

     10. unshift(새 데이터)

    : 배열의 첫 번째 인덱스 자리에 새 데이터를 삽입한다.

    11. length : 배열의 총 데이터 개수를 반환한다.

 

    3. 인수가 세 개인 경우

    : 인수가 3개 이상인 경우 첫 번째 인수는 시작 인덱스 번호를 의미하고,

      두번째 인수는 삭제할 데이터의 갯수를 의미하고, 세번째 인수부터는

      삭제한 위치에 새로 넣을 데이터들을 의미한다.

      splice(1,3, "js","html"); 이라고 하면 1번 인덱스부터 3개의 데이터를 삭제하고

      그 자리에 "js","html"데이터를 새로 집어넣으라는 의미이다.

Splice() 메서드

()안에 있는 값의 갯수(=인수)에 따라 배열 요소를 삭제하거나 새로운 요소를 추가한다.

splice() 메서드를 사용하면 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환된다.

 

1. 인수가 한 개인 경우

: 인수가 한 개면 배열의 인덱스 번호를 뜻한다. 즉, 배열 안에 데이터의 위치를 가리킨다.

splice()메서드는 인수가 한 개면 지정한 인덱스 요소부터 마지막 인덱스까지 모두 삭제한다.

splice 메서드가 변수에 담겨 있을 경우 삭제된 데이터들을 해당 변수에 담아 반환한다.

 

2. 인수가 두 개인 경우 

: 인수가 두 개면 첫번째 인수는 시작 인덱스 번호이고, 두번째 인수는 삭제할 요소의 갯수를 의미한다.

splice(1,3)이라고 하면 1번 인덱스부터 3개의 데이터를 순서대로 삭제하라는 의미이다.

splice메서드가 변수에 담겨 있을 경우 삭제된 데이터들을 해당 변수에 담아 반환한다.

 

 

<script>

      //join, concat, slice, sort, reverse메서드

      var arr_1 = ['사당', '교대', '방배', '강남', '역삼', '선릉'];

      var arr_2 = ['신사', '압구정', '옥수'];

      //arr_1의 데이터들을 '-'를 기준으로 하나의 문자형 데이터로 합치기

      var result = arr_1.join('-');

      console.log(result); //사당-교대-방배-강남

      //arr_1을 기준으로 arr_2를 하나의 배열로 합치기

      result = arr_1.concat(arr_2);

      console.log(result); // ['사당', '교대', '방배', '강남', '역삼', '선릉', '신사', '압구정', '옥수']

      //arr_1의 1번 인덱스부터 3번인덱스 앞까지 잘라오기. 즉, 1~2번 인덱스 반환

      result = arr_1.slice(1, 3);

      console.log(result); // ['교대', '방배']

      //slice는 인수가 1개이고, 음수가 있으면 배열의 끝에서 해당 개수만큼 데이터를 잘라 반환한다.

      result = arr_1.slice(-2);

      console.log(result); //['역삼', '선릉']

      //인수가 양수로 1개면 배열의 해당 인덱스번호부터 끝까지 잘라 반환한다.

      result = arr_1.slice(1);

      console.log(result); //['교대', '방배', '강남', '역삼', '선릉']

      // 2번 인덱스부터 끝에서 1번 인덱스까지

      result = arr_1.slice(2, -1);

      console.log(result); // ['방배', '강남', '역삼']

      // arr_1안에 있는 모든 데이터를 잘라 반환함.

      result = arr_1.slice();

      console.log(result); //['사당', '교대', '방배', '강남', '역삼', '선릉']

      //arr_1안에 있는 데이터를 오름차순으로 정렬하기

      result = arr_1.sort();

      console.log(result); // ['강남', '교대', '방배', '사당', '선릉', '역삼']

      //arr_1의 데이터들을 반대로 정렬하기

      result = arr_1.reverse();

      console.log(result);

    </script>

 

 

<script>

      var greenArr = ['교대', '방배', '사당'];

      var yellowArr = ['미금', '정자', '수서'];

      //greenArr의 2번인덱스부터 1개의 데이터를 삭제하고, 서초와 역삼을 넣기

      greenArr.splice(2, 1, '서초', '역삼');

      console.log(greenArr); //["교대", "방배", "서초", "역삼"]

      //yellowArr의 마지막 인덱스의 데이터를 data1에 저장

      var data1 = yellowArr.pop();

      //yellowArr의 첫번째 인덱스의 데이터를 data2에 저장

      var data2 = yellowArr.shift();

      //yellowArr의 마지막 인덱스에 data2를 밀어넣기

      yellowArr.push(data2);

      //yellowArr의 첫 번째 인덱스에 data1를 밀어넣기

      yellowArr.unshift(data1);

      console.log(yellowArr);

      /* splice 인수 개수에 따른 배열 바꾸기 */

      //인수1개

      var number = [1, 2, 3, 4, 5];

      //인수가 1개면 해당 인덱스 번호부터 마지막 인덱스까지 모두 잘라냄.

      var newNumber = number.splice(1);

      document.write('반환된 배열: ' + newNumber, '<br>');

      document.write('변경된 배열: ' + number, '<br>'); //기존 배열이 변경됨

      //인수2개

      var study = ['html', 'css', 'web', 'jquery'];

      // 인수가 2개면 해당 인덱스 번호 부터 지정된 갯수만큼 데이터를 삭제함.

      // study배열의 2번 인덱스부터 1개의 데이터 삭제

      var newStudy = study.splice(2, 1); //[html,css,jquery]

      document.write('반환된 배열: ' + newStudy, '<br>');

      document.write('변경된 배열: ' + study, '<br>'); //기존 배열이 변경됨

      //인수3개

      var newStudy2 = study.splice(2, 1, 'js');

      document.write('반환된 배열: ' + newStudy2, '<br>');

      document.write('변경된 배열: ' + study, '<br>'); //기존 배열이 변경됨

    </script>

 

 

 

 문자열객체 String ★★★★★

      ==========================

      문자를 객체로 취급하는 것으로 일반적인 문자형 데이터가 곧 문자열 객체이다.

      자바스크립트에서 가장 많이 사용되는 객체이다.

      문자열 객체를 생성할때에는 new String("문자형 데이터")를 넣어 표현할 수 있고

      더 간단하게 많이 쓰는 방식은 ""(따옴표)로 표현한다.