Dev_Study/JavaScript

[JS] 배열 ( Array )

LeeDaniel 2021. 3. 10. 11:01
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width
                                    , initial-scale=1.0">
    <script>
        /* 문서의 모든 콘텐츠(images, script, css, etc)가
           로드된 후 발생하는 이벤트*/
        window.onload = function () {

            console.log('window onload 호출~!');

            // 배열 생성
            var fruit = ['딸기', '사과', '바나나'];

            // 배열 출력
            console.log( 'fruit : ' + fruit );
            console.log( 'fruit[0] : ' + fruit[0] );
            console.log( 'fruit[1] : ' + fruit[1] );
            console.log( 'fruit[2] : ' + fruit[2] );

            // for문을 이용한 배열 출력
            console.log('### for문 배열 출력');
            for(i = 0; i < fruit.length; i++){
                console.log( 'fruit[' + i + '] : ' + fruit[i] );
            }

            // forEach문을 이용한 배열 출력
            console.log('### forEach문 배열 출력');
            fruit.forEach(function(element){
                console.log(element);
            });

            // for in문을 이용한 배열 출력
            console.log('### for in문 배열 출력');
            for( var key in fruit ){
                console.log('key : ' + key + ', value : ' + fruit[key]);
            }

            // 배열의 끝에 원소 추가
            console.log('### 배열의 끝에 원소 추가');
            fruit.push('망고');
            console.log( 'fruit : ' + fruit );

            // 배열의 시작에 원소 추가
            console.log('### 배열의 시작에 원소 추가');
            fruit.unshift('귤');
            console.log( 'fruit : ' + fruit );

            // 배열의 n번째 인덱스에 원소 추가
            console.log('### 배열의 n번째 인덱스에 원소 추가');
            fruit.splice( 2, 0, '배'); // 2번째 인덱스에 추가
            console.log( 'fruit : ' + fruit );

            // 배열의 첫번째 원소 삭제
            console.log('### 배열의 첫번째 원소 삭제');
            fruit.shift();
            console.log( 'fruit : ' + fruit );

            // 배열의 마지막 원소 삭제
            console.log('### 배열의 마지막 원소 삭제');
            fruit.pop();
            console.log( 'fruit : ' + fruit );

        };
    </script>
</head>
<body>
</body>
반응형

'Dev_Study > JavaScript' 카테고리의 다른 글

[JS] 0.JavaScript  (0) 2021.06.16
[JS] 객체 ( Object )  (0) 2021.03.10
HTML DOM 메소드  (0) 2021.03.04
BOM - Window  (0) 2021.03.04
HTML DOM ( Document Object Model )  (0) 2021.02.19