본문 바로가기
개발/JavaScript

2023.04.05 JavaScript의 배열

by 상달군 2023. 4. 5.
728x90

 

목차

1. JavaScript의 배열

  • 배열의 선언
  • 배열의 초기화
  • 배열을 객체로 생성
  • 배열의 접근
  • 자바 스크립트 배열의 특징
  • 배열 객체의 메소드
    • push(): 배열의 요소를 추가
    • pop(): 배열의 마지막 주소에 있는 값을 제거
    • shift(): 배열의 첫번째 주소에 있는 값을 제거
    • concat(): 두개의 배열을 합침
    • join(): 배열요소 사이에 원하는 문자 삽입
    • reverse(): 배열을 역순으로 재배치
    • sort(): 배열을 오름차순으로 정렬
  • 배열을 이용한 반복문
    • for in 문
    • for of 문
    • forEach 문

1. JavaScript의 배열

  • 파이썬에서 리스트와 비슷한 자료구조이다.
  • 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
  • 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 한다. 


 
1-1. 배열을 선언하는 방법

let 배열명;

1-2. 배열을 초기화하는 방법

배열명 = [요소1, 요소2, 요소3, 요소4, ....]

예)
	1번째 방법.
    let arr;
    arr = [100, 200, 300];
    
	2번째 방법
    let arr = [100, 200, 300];

1-3. 배열 객체로 생성

    const 배열명 = new Array(요소1, 요소2, 요소3.....);

1-4. 배열의 접근

        let arr;
        arr = [100, 200, 300];

        console.log(arr[0]); // 결과 : 100
        console.log(arr[1]); // 결과 : 200
        console.log(arr[2]); // 결과 : 300

 

배열의 예제)

<body>
    <h2>배열1</h2>
    <script>
        const user = [1, 'apple', '김사과', 20, '서울시 서초구']
        console.log(user);
        console.log(user[0]);
        console.log(user[1]);
        console.log(user[2]);
        console.log(user[3]);
        console.log(user[4]);

        console.log(user[5]); //인덱스에서 벗어났기 때문에 undefined으로 출력 된다. 
        console.log('-------------');

        //아무때나 어떤 타입으로든 수정 가능하다.
        user[4] = '서울시 강남구'
        console.log(user[4]);

        console.log(user.length); // 배열의 길이 구하는법
        console.log('-------------');

        user[6] = 'A형';
        console.log(user[6]); // A형
        console.log(user[5]); // undefined이지만 배열의 길이를 구할땐 갯수로 친다 !
        console.log(user.length);
        console.log('-------------');


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

    </script>
</body>

1-5. ✔ 자바스크립트 배열의 특징

특징 1. 배열 요소의 타입이 고정되어 있지 않음

       - 타입과 상관없이 한 배열안에 숫자를 넣고, 실수를 넣고, 문자열을 넣고, boolean을 넣든 상관 없다 

    let arr = [1, 1.5, '김사과', true]; // 가능하다 !

특징 2. 배열 요소의 인덱스가 연속적이지 않아도 됨 

    let arr;
    arr[0] = 1;
    arr[1] = 20;
    arr[4] = 5;     //인덱스가 연속적이지 않음 !
    (index 2,3은 undefined으로 된다! )

1-6.  Array 객체의 메소드 

    - push(): 배열의 요소를 추가
    - pop(): 배열의 마지막 주소에 있는 값을 제거
    - shift(): 배열의 첫번째 주소에 있는 값을 제거
    - concat(): 두개의 배열을 합침
    - join(): 배열요소 사이에 원하는 문자 삽입
    - reverse(): 배열을 역순으로 재배치
    - sort(): 배열을 오름차순으로 정렬 

<body>
    <h2>배열의 매소드()</h2>
    <script>
        const user = [1, 'apple', '김사과', 20, '서울시 서초구'];

        user.push('여자'); // 배열에 요소 추가
        console.log(user);
        console.log('-------------');

        let result = user.pop(); //pop을 이용하여 배열의 마지막 값을 result변수에 저장 한다. 
        console.log(user);
        console.log(result);
        console.log('-------------');

        result = user.shift();//shift을 이용하여 배열의 첫번째 값을 result변수에 저장 한다.
        console.log(user);
        console.log(result);
        console.log('-------------');

        const sub = ['여자', 'isfp']; 
        const concat_user = user.concat(sub); // 배열 2개 합치기 !

        console.log(concat_user);
        console.log('-------------');

        const user_join = user.join('😜');
        console.log(user_join);
        console.log(typeof(user)); //타입 = object => 배열이니깐 객체
        console.log(typeof(user_join)); //타입 = string => 요소사이에 😜을 넣어줬기때문에 문자열 !
        console.log('-------------');

        const arr = ['a', 'z', 'c', 'f', 'r'];
        arr.sort(); // 인플레이스 연산 되어 바로 arr의 값이 변경 된다.
        console.log(arr); // 오름차순
        arr.reverse();
        console.log(arr);// 역순(자바스크립트에는 내림차순이 존재 하지 않기 때문에 내림차순의 방법 중 하나 sort를 사용후 역순으로 돌리면 내림차순이 된다. )
        console.log('-------------');

    </script>
</body>

1-7. 배열을 이용한 반복문

    🔹for in 문

     - 변수에 배열의 *인덱스* 또는 객체의 *key*가 저장되며 반복하는 것 !

예시)

    for(변수 in 배열 또는 객체){
        배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장;
        ....
        ....
    }

    const arr = [10, 20, 30]; // *인덱스*가 변수에 들어간다.
    const user = {'userid': 'apple', 'name': '김사과', 'age': 20}; // *key*값이 변수에 들어간다.

    🔹for of 문

     - 변수에 배열의 *value* 또는 객체의 *value*가 저장되며 반복한다.
     - iterator 속성을 가지는 컬렉션 전용 !

    for(변수 in 배열 또는 객체){
        배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장;
        ....
        ....
    }

 

    🔹forEach 문

     - 배열에서만 사용 가능하며,  요소의 갯수만큼 반복한다.  

const arr = [10, 20, 30];
배열명.forEach(function(변수1, 변수2, 변수3)){
    배열의 요소 갯수만큼 반복할 문장;
    ...
    ...
    ...
}

            변수1: 배열의 요소값 

            // 10-> 20 -> 30 
            // 1번째 바퀴에 10 -> 2번째 바퀴에 20 -> 3번째 바퀴에 30이 들어간다.  


            변수2: 배열의 인덱스

             // 0-> 1-> 2
            // 1번째 바퀴에 0 -> 2번째 바퀴에 1 -> 3번째 바퀴에 2이 들어간다.  


            변수3: ( 생략가능) 배열 자체가 들어간다.

            // [10, 20, 30]->[10, 20, 30]->[10, 20, 30]            
            // 1번째 바퀴에 [10, 20, 30] -> 2번째 바퀴에 [10, 20, 30] -> 3번째 바퀴에 [10, 20, 30]이 들어간다.  

 

<body>
    <h2>배열3</h2>
    <script>
        
        const user = [1, 'apple', '김사과', 20, '서울시 서초구'];
        const member = {'userid': 'apple', 'name': '김사과', 'age': 20};
        
        // for in문 [배열] 사용하기.
        for(let i in user){
            console.log(`i:${i}, user[${i}]:${user[i]}`);
        }
        console.log('--------------');

        // for in문 {객체} 사용하기.
        for(let i in member){
            console.log(`i:${i}, user[${i}]:${member[i]}`);
        }
        console.log('--------------');

        // for of문 [배열] 사용하기. (값만 뽑아낼수 있다.)
        for(let i of user){
            console.log(`i:${i} `);
        }
        console.log('--------------');

        //forEach문 
        user.forEach(function(v, i, a){
            console.log(`v:${v}, i:${i}, a:${a}`);
        });
    </script>
</body>

 

728x90

'개발 > JavaScript' 카테고리의 다른 글

2023.04.06 JavaScript의 객체들(Math,String,date,Web API,Form)  (0) 2023.04.06
2023.04.06 사용자 정의 함수,객체,상속  (0) 2023.04.06
2023.04.05 JavaScript의 연산자, 제어문  (0) 2023.04.05
2023.04.04 JavaScript의 데이터타입,자동타입변환, 대화상자  (0) 2023.04.04
2023.04.04 JavaScript의 특징, 출력, 실행순서, 변수, 상수  (0) 2023.04.04

관련글

댓글

티스토리툴바