본문 바로가기

Javascript

Array 객체의 요소 제거

반복문을 이용하여 특정값을 삭제할 때는 주의할 부분이 있다.

<!DOCTYPE html>

<html>

<head>

    <script>

       // Array생성자 함수의 프로토타입에 remove() 메서드를 추가합니다.

        Array.prototype.remove = function (index) { this.splice(index, 1); }

        // 변수를 선언합니다.

        var array = [52, 273, 103, 32, 274, 129];

        // 반복문과 조건문을 사용해 100보다 큰 요소를 제거합니다.

        for (var i = 0; i < array.length; i++) {

        if (array[i] > 100) {

                array.remove(i);

            }

        }

        // 출력합니다.

        alert(array);

    </script>

</head>

<body>


</body>

</html>

이걸 출력하면 결과로 52,103,32,129가 나온다. 이상하지 않은가? 두개의 값이 남아있다. 이건 remove특성 때문이다. 내부적으로 삭제를 하기 때문에 예를 들어 273이 삭제되면 그다음은 103이 두번째로 땡겨진다. 그럼 다음 루프에서는 103을 넘어 32를 검사하게 되는 것이다. 이런 것을 방지하려면 거꾸로 검사를 해주어야 한다.



<!DOCTYPE html>

<html>

<head>

    <script>

        // Array 생성자 함수의 프로토타입에 remove() 메서드를 추가합니다.

        Array.prototype.remove = function (index) { this.splice(index, 1); }


        // 변수를 선언합니다.

        var array = [52, 273, 103, 32, 274, 129];


        // 반복문과 조건문을 사용해 100보다 큰 요소를 제거합니다.

        for (var i = array.length; i >= 0; i--) {

            if (array[i] > 100) {

                array.remove(i);

            }

        }


        // 출력합니다.

        alert(array);

    </script>

</head>

<body>


</body>

</html>

뒤에서 부터 검사를 하기때문에 배열 요소가 줄어드는 것에 영향을 받지 않는다.