728x90
반응형
.shift() : 첫 번째 방 삭제  
.pop() : 마지막 방 삭제  
   
ㅁㅁ
<!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>
    <button id="getFruitsList">과일목록 가져오기</button>
    <button id="delApple">사과삭제</button>
    <button id="delKiwi">키위삭제</button>
    <button id="delIdx3">4번째 요소 삭제</button>
    <ul id="fList"></ul>

    <script>
        function flist(){
            let arr = ['사과','배','감','귤','오렌지','바나나','딸기','키위'];
            return arr;
        }

        function getList(flist){
            document.getElementById("fList").innerText="";
            flist.forEach(function(ele, idx){
                document.getElementById("fList").innerHTML += "<li>"+(idx+1)+"번 "+ele+"</li>";
            });
        }
        document.getElementById("getFruitsList").onclick = function (){
            getList(flist());
        }

        //배열 첫번째 값 삭제
        document.getElementById("delApple").onclick = function(){
            let f = flist();
            f.shift(); //첫 번재 방 삭제 - 원본훼손 일어남
            getList(f);
        }
        
        //배열 마지막 값 삭제
        document.getElementById("delKiwi").onclick = function(){
            let f = flist();
            f.pop(); //마지막 방 삭제 
            getList(f);
        }

        //배열 네번째(3번인덱스) 값 삭제
        document.getElementById("delIdx3").onclick = function(){
            let f = flist();
            f.splice(3,1); //splice(시작인덱스번호, 해당번호부터 가져올 갯수)
            getList(f);
        }
        

    </script>
</body>
</html>​

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[JS] string  (0) 2024.02.29
[JS] 수학객체  (0) 2024.02.29
[JS] 즉시실행함수, preventDefault, addEventListener  (0) 2024.02.29
[JS] function - object자료형, event handler(onload,onchange,onclink,onsubmit)  (0) 2024.02.28
[JS] toString(), arrow()  (0) 2024.02.28

+ Recent posts

티스토리툴바