🎨 Programming/JavaScript

[JavaScript] 8. 배열(Array)

ryang x2 2020. 9. 10. 15:58
728x90
반응형

# 배열(array) 

배열은 이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 합니다.

 

● 자바스크립트 배열의 특징  

1. 배열 요소의 타입이 고정되어 있지 않습니다. 따라서 같은 배열에 있는 배열 요소끼리의 타입이 다를 수 있습니다. 
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 특정 배열 요소가 비어 있을 수 있습니다. 

 

ex)
let arr = new Array();
arr[0] = 10;
arr[1] = 30;
arr[5] = 70;

 

3. 자바스크립트의 배열은 Array 객체로 다뤄집니다. 

 

● 배열을 만드는 방법   

1. 
let 배열 이름;  // 배열의 선언
배열 이름 = [요소1, 요소2, 요소3, 요소4...];  // 배열의 초기화 
        배열이름[0] 배열 이름[1].. 

 

ex)
let arr;
arr = [100, "사과", true, 300];


2.
let 배열 이름 = Array(요소1, 요소2, 요소3..);
or
let 배열 이름 = new Array(요소1, 요소2, 요소3...);    //  new는 생략가능 

 

ex)
let arr = new Array(100, "사과", true, 300);

 

예시 1)

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];
        console.log(arr[0]);
        console.log(arr[2]);
</script>

예시 2)

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];
        
        for(let i=0; i<=3; i++){
            console.log(arr[i]);
        }
</script>

예시 3)

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];

        for(let i=0; i<arr.length; i++){
            console.log(arr[i]);
        }
</script>

# 반복문  

● for ~ in 반복문 

for(변수 선언 in 배열 또는 객체){    // 변수 -> 인덱스
        배열의 요소만큼 반복할 실행문;
}

 

예시 )

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];

        for(let i in arr){
            console.log(`i : ${i}, arr[i] : ${arr[i]}`);
        }
</script>

 

 

● for ~ of 반복문 

for(변수 선언 of 배열 또는 객체){    // 변수 -> 요소
        배열의 요소만큼 반복할 실행문;
}

 

예시 )

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];

        for(let i of arr){
            console.log(i);
        }
</script>

 

 

● forEach 반복문 

배열 이름.forEach(function(변수)){   // 변수 -> 요소
        배열의 요소만큼 반복할 실행문;
});

 

예시 )

<script>
        'use strict'
        let arr = ['김사과', 20, 160, true];

        arr.forEach(function(i){
            console.log(i);
        });
</script>

 

 

위에서 배운 문법을 사용한 배열 예시 1)

<script>
        'use strict'
        const cnt = Number(prompt('입력받을 숫자의 갯수를 입력하세요.'));
        let num = 0;
        let arr = [];

        while(num < cnt){
            // arr[0] = 1번째 숫자를 입력하세요.
            // arr[1] = 2번째 숫자를 입력하세요.
            // ...
            arr[num] = Number(prompt(`${num + 1}번째 숫자를 입력하세요.`));
            num++;
        }

        // 요소를 확인
        for(let i of arr){
            console.log(i);
        }
</script>

▼▼▼

 

 

위에서 배운 문법을 사용한 배열 예시 2)

<script>
        'use strict'
        const cnt = Number(prompt('입력받을 숫자의 갯수를 입력하세요.'));
        let num = 0;
        let arr = [];

        while(num < cnt){
            arr[num] = Number(prompt(`${num + 1}번째 숫자를 입력하세요.`));
            num++;
        }

        let max = arr[0];
        let min = arr[0];

        for(let i=1; i<arr.length; i++){
            if(max < arr[i]){
                max = arr[i];
            }
            if (min > arr[i]){
                min = arr[i];
            }
        }

        console.log(`입력한 수 ${arr}에서 가장 큰 값은 ${max}입니다.`);
        console.log(`입력한 수 ${arr}에서 가장 작은 값은 ${min}입니다.`);
</script>

▼▼▼

● 배열(Array) 객체의 메소드 

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

 

예시 )

<script>
        'use strict'
        let arr1 = ['김사과', 20, 160.5, true];
        console.log(arr1);
</script>

 

1. push() 예시

<script>
        'use strict'
        let arr1 = ['김사과', 20, 160.5, true];
        arr1.push('여자');
        console.log(arr1);
</script>

 

2. shift() 예시

<script>
        'use strict'
        let arr1 = ['김사과', 20, 160.5, true];
        arr1.shift();
        console.log(arr1);
</script>

 

3. concat() 예시

<script>
        'use strict'
        let arr1 = ['김사과', 20, 160.5, true];
        let arr2 = ['김사과', '학생', '서울'];
        arr1 = arr1.concat(arr2);
        console.log(arr1);
</script>

 

4. join() 예시

<script>
        'use strict'
        let arr2 = ['김사과', '학생', '서울'];
        arr2 = arr2.join("|"); // 문자열로 형변환
        console.log(arr2);

</script>

 

5. reverse() 예시  

<script>
        'use strict'
        let arr1 = ['김사과', 20, 160.5, true];
        arr1.reverse();
        console.log(arr1);
</script>

 

6. sort() 예시

<script>
        'use strict'
        let arr3 = ['c', 'b', 'a', 'z', 'o'];
        arr3.sort();
        console.log(arr3);
</script>

 

 

 

 

728x90
반응형