본문 바로가기
JS/JS-basic

JS - 배열

by 임혁진 2024. 1. 28.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //배열의 선언방법
        var arr = [1,2,3];
        console.log(arr);

        //배열의 사용 index
        arr[0] = 100;
        console.log(arr);
        console.log(arr[0]);

        //배열의 길이 확인 length
        console.log('길이:' , arr.length )

        //////////////////////////////////////////////////////////////
        //배열의 두번째 선언방법 Array객체 사용
        var arr2 = new Array(); //빈 배열생성
        var arr3 = new Array(10); //크기가 10인 배열생성
        var arr4 = new Array(10, 1,2,3,4,5); //초기값이 지정됩니다

        console.log(arr2);
        console.log(arr3);
        console.log(arr4);
        /////////////////////////////////////////////////////////////
        //배열의 다양한 함수
        var arr = new Array();
        arr.push(1); //끝에 추가
        arr.push(2);
        arr.push(3);

        console.log(arr);
        
        var x = arr.pop() //마지막요소를 반환하고 삭제
        console.log(x);
        console.log(arr);

        //unshift
        arr.unshift(1,2,3); //앞에 추가
        console.log(arr);
        
        //shift
        var x = arr.shift() //앞에서 제거
        console.log(arr);
        
        //splice - 중간에 제거
        arr.splice(3, 0, 100); //3번째 인덱스, 0개 삭제, 100을 삽입
        console.log(arr);
        ///////////////////////////////////////////////////////////////////////

        var x = arr.indexOf(100)
        console.log(x, '번째 인덱스에 100이 있습니다');

        var x = arr.indexOf(1000) //-1이 반환되면 찾는값이 없음.
        console.log(x);

        var x = arr.indexOf(2, 3); //숫자 2를 찾는데 3번째 인덱스부터 찾음
        console.log(x);

        //////////////////////////////////////////////////////////////////////
        //배열 합치기
        var newArr = arr.concat([100,200,300])
        console.log(newArr)
        
        //정렬
        arr.sort() //사전순
        console.log(arr)

        //filter, foreach, join, map 등등 자주사용됨




    </script>

</body>
</html>

'JS > JS-basic' 카테고리의 다른 글

JS - 반복문 , 객체 담기  (1) 2024.01.28
JS -조건문  (0) 2024.01.28
JS - 연산자  (1) 2024.01.28
JS -변수  (0) 2024.01.28
JS 출력하기  (1) 2024.01.28

관련글

티스토리툴바