코밍이의 하루

[JS] 내장 객체 - 배열 객체 본문

웹언어 공부/JS

[JS] 내장 객체 - 배열 객체

코밍이 2021. 8. 11. 23:21

1. 개발 환경

구분 내용
사용 언어 HTML5, JS
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

 

2. 주요 문법

1) 배열 객체

- 여러 개의 데이터를 하나의 저장소에 저장할 때 사용

기본형
var 참조 변수 = new Array();
참조 변수[0]=값1; 참조 변수[1]=값2; ... 참조 변수[n-1]=값n;
var 참조 변수 = new Array(값1, 값2, 값3 ... 값n);
var 참조 변수 = [값1, 값2, 값3, ...값n]; 

2) 배열 객체에 저장된 데이터 불러오기

기본형
참조 변수[인덱스 번호];

 

3) 배열 객체의 메소드 및 속성

종류 설명
join(연결 문자) 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse() 배열 객체의 데이터 순서를 거구로 바꾼 후 반환
sort() 배열 객체의 데이터를 오름차순으로 정렬
slice(index1, index2) 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
splice() 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입
concat() 2개의 배열 객체를 하나로 결합
pop() 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터 삭제
push(new data) 배열 객체의 마지막 인덱스에 새 데이터를 삽입
shift() 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제
unshift(new data) 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입
length 배열에 저장된 총 데이터의 개수 반환

 

3. 소스 코드 및 실행 결과

- array_ob1_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 배열객체 </title>
    <script>
        var arr = [30, "따르릉", true];

        document.write("<h3>배열값 가져오기-1</h3>");
        document.write(arr[0],"<br>");
        document.write(arr[1],"<br>");
        document.write(arr[2],"<br>");

        document.write("<h3>배열값 가져오기-2</h3>");
        for(var i=0; i < arr.length; i++){
            document.write(arr[i], "<br>");
        }

        document.write("<h3>배열값 가져오기-3</h3>");
        for(i in arr) {
            document.write(arr[i], "<br>");
        }
    </script>
  </head>
  <body>
  </body>
</html>

array_ob1_test.html

 

- array_ob2_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
  <meta charset = "UTF-8">
  <title> 배열객체 </title>
    <script>
            var arr_1 = ["사당", "교대", "방배", "강남"];
            var arr_2 = ["신사", "압구정", "옥수"];

            var result = arr_1.join("-");
            console.log(result);

            result = arr_1.concat(arr_2);
            console.log(result);

            result = arr_1.slice(1,3);
            console.log(result);

            arr_1.sort();
            console.log(arr_1);

            arr_2.reverse();
            console.log(arr_2);

    </script>
  </head>
  <body>
  </body>
</html>

array_ob2_test.html

- array_ob3_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 배열객체 </title>
    <script>
        var greenArr = ["교대", "방배", "강남"];
        var yellowArr = ["미금","정자","수서"];

        greenArr.splice(2,1,"서초", "역삼");
        console.log(greenArr);
        var data1 = yellowArr.pop();
        var data2 = yellowArr.shift();

        yellowArr.push(data2);
        console.log(yellowArr);

        yellowArr.unshift(data1);
        console.log(yellowArr);

    </script>
  </head>
  <body>
  </body>
</html>

array_ob3_test.html

저작자표시 비영리 변경금지

'웹언어 공부 > JS' 카테고리의 다른 글

[JS] 브라우저 객체  (0) 2021.08.12
[JS] 내장 객체 - 문자열 객체  (0) 2021.08.11
[JS] 내장 객체 - 수학 객체  (0) 2021.08.11
[JS] 내장 객체 - 날짜 정보 객체  (0) 2021.08.11
[JS] 내장 객체 - 내장 객체 생성하기  (0) 2021.08.11
'웹언어 공부/JS' Related Articles more