Chap 3. 배열

김승현·2021년 11월 8일
JavaScript국비수업
0
post-custom-banner

자바 스크립트의 배열

  • 다양한 타입의 데이터를 보관하는 변수

  • 자바스크립트에서는 배열의 데이터 타입이 별도로 없음

  • 대괄호를 통해 생성과 초기화를 동시에 처리 가능

  • 자료형 지정이 없어 모든 자료형(숫자, 문자열, 함수, Boolean, undefined, 객체)이 데이터로 저장 가능

  • ex). var 배열명 = [값1(숫자타입), 값2(문자타입), 값3(객체타입), .... ] ;

    • 다양한 타입이 하나의 배열안에 저장 가능

EX)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <button onclick="test();">버튼</button>

    <script>
        function test() {
            var arr = [1, 2, 3, 3.13, 'hello', function() {alert("저는 함수입니다.")}];

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

            // 함수가 들어있는 경우에는 함수를 호출할 수 있다.
            arr[5]();
        };

    </script>
</body>

</html>



배열 선언

  • new 연산자와 Array 객체를 통한 배열 선언

배열의 크기를 정하지 않은 배열 선언

var 변수명 = new Array();


배열의 크기를 정한 배열 선언

var 변수명 = new Array(초기값);
var 배열명 = [초기값] ;


EX)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <button onclick="test();">버튼</button>

    <script>
        function test() {
            var arr1 = new Array();
            var arr2 = new Array(1, 2, 3);
            var arr3 = [1, 2, 3];

            console.log(arr2);
            arr2.push(4);
            console.log(arr2);
            arr2.push(5);
            console.log(arr2);
            arr2.pop();
            console.log(arr2);
            arr2.pop();
            console.log(arr2);
            
        };
    </script>
</body></html>



Array 객체 함수


함수의미
배열명.indexOf("값")배열에서 요소가 위치한 인덱스 리턴(찾는 요소 없으면 -1 리턴)
배열명.concat("배열명")두 개 또는 세 개의 배열을 결합
배열명.join("구분자")배열을 결합하고 문자열로 반환
배열명.reverse()배열의 순서를 거꾸로 (원본 데이터 변경)
배열명.sort()배열을 내림차순 또는 오름차순으로 정렬
배열명.push("값")배열의 맨 뒷 공간을 새롭게 만들어 데이터를 추가
배열명.pop("값")배열의 맨 뒷공간의 데이터를 추출하고 공간 제거
배열명.shift()배열에서 첫번째 데이터를 삭제
배열명.unshift("값")배열의 맨 앞에 새로운 데이터를 추가
배열명.slice(숫자,숫자)배열의 데이터 선택하여 잘라낸것 가져오기(원본 영향 없음)
배열명.splice([index],제거수,추가값)배열의 index 위치의 요소 제거 및 추가(원본 영향 있음)
배열명.toString()배열의 있는 데이터를 문자열로 반환



EX) indexOf()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <input type="text" id="inputData" />
    <button onclick="test()">결과확인</button>
    <script>
        function test() {
            var fruits = ['바나나','딸기','복숭아','수박'];
            var inputData = document.getElementById("inputData").value;
            var index = fruits.indexOf(inputData);
            
            if(index >= 0)
            {
                alert(index+"번째의 있습니다.");
            }else{
                alert("존재하지 않습니다.");
            }
        }
    </script>

</body></html>



EX) concat(), join()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="test()">배열 합치기</button>
    <script>
        function test() {
            var arr1 = ['사과', '딸기', '바나나'];
            var arr2 = ['복숭아', '키위', '파인애플', '토마토'];
            var arr3 = [10, 20, 30, 40];
            var arr4 = [true, false];

            var data;
            data = arr1.concat(arr2, arr3, arr4);

            console.log(data);

            var join = data.join("/");

            console.log(join);
        }
    </script>

</body></html>



EX) reverse()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="result()">데이터확인</button>
    <button onclick="reverse()">거꾸로</button>
    <script>
        var data = ['홍길동', '김말똥', '고길똥', '노민수', '유비', '장비'];

        function result() {
            var result = data.join("/");
            console.log(result);
        }

        function reverse() {
            data.reverse();
           
        }
    </script>

</body></html>



EX) sort()

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="result()">데이터확인</button>
    <script>
        function result() {
            var data = [5, 7, 10, 8, 9, 6, 2, 4, 3, 1];
            data.sort(sortASC); //오름차순 정렬
            //data.sort(sortDESC); //내림차순 정렬
            console.log(data);
        }

        function sortASC(data1, data2) //오름차순 함수
        {
            return data1 - data2;
        }

        function sortDESC(data1, data2) //내림차순 함수
        {
            return data2 - data1;
        }
    </script>
</body>

</html>



EX) push(), pop()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <input type="text" id="inputData" /><br>
    <button onclick="result()">Push</button>
    <button onclick="result2()">Pop</button>
    <script>
        var arr = new Array();

        function result() {
            var inputData = document.getElementById("inputData");
            arr.push(inputData.value);
            console.log(arr);
        }

        function result2() {
            console.log(arr.pop() + "를 삭제하였습니다.");
            console.log(arr);
        }
    </script>
</body>

</html>



EX) slice()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="result()">결과확인</button>
    <script>
        function result() {
            var data = ["딸기", "사과", "바나나", "키위", "수박"];
            console.log(data);
            console.log(data.slice(2)); //2번째 인덱스부터 끝까지
            console.log(data.slice(1, 4)); //1번째 인덱스부터 3번째 인덱스까지
            console.log(data);  // 원본 영향 X
        }

    </script>
</body>

</html>



EX) splice()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="result()">결과확인</button>
    <script>
        function result() {
            var data = [1, 2, 3, 4, 5];
            console.log(data);
            //data.splice(1,2); //1번째부터 2개 제거
            //data.splice(1,2,6); //1번째부터 2개 제거하고 그 위치에 6을 추가
            data.splice(1, 0, 6); //1번째에 6 추가

            console.log(data); // 원본 영향 O
        }

    </script>
</body>

</html>



EX) toString()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>

    <button onclick="result()">결과확인</button>
    <script>
        function result() {
            var data = [1, 2, 3, 4, 5];
            console.log(data);
            console.log(data.toString()); //배열의 데이터를 문자열로 변경
            console.log(data);
        }
    </script>

</body>

</html>
profile
김승현
개발자로 매일 한 걸음
이전 포스트

Chap2. 기본 문법

다음 포스트

Chap 4. 함수

post-custom-banner

0개의 댓글