сплайс не работает на массиве элементов DOM

Question

Я создаю эффект пузырей, но у меня проблема с удалением пузыря, когда он достигает вершины. Пузырьки представляют собой круговые svg элементы и хранятся в массиве. Функция соединения возвращает ошибку. Вы можете увидеть это в функции animateBubbles(). Я не уверен, что делаю не так.

SCRIPT438: объект не поддерживает свойство или метод "сращивания"

let bubbles = [];

let bubblesC = [];

function createBubbles(n, x, y, w, h) {

    for (let i = 0; i < n; i++) {

        let circle = document.createElementNS(svgns, 'circle');

        bubblesC[i] = Math.PI / (Math.random() * Math.floor(10));

        let tmpX =  x + getRandomInt(w);

        circle.setAttribute('cx', tmpX);
        circle.setAttribute('cy', getRandomInt(h)+wHeight);
        circle.setAttribute('r', 3+getRandomInt(10));

        circle.setAttribute("id", "bubble" + i);
        circle.setAttribute("fill", "url(#grad3)");
        circle.setAttribute("stroke", "light");
        circle.setAttribute("opacity", "0.5");

        bubbles.push(circle);

        svg.appendChild(circle);

    }

}

function animateBubbles() {

    for (let i = 0; i < bubbles.length; i++) {

        let bx = parseInt(bubbles[i].getAttribute("cx"));
        let by = parseInt(bubbles[i].getAttribute("cy"));

        bx += Math.round(2 * Math.sin(bubblesC[i]));
        by += -2;

        if (by < wavesY) {
            bubbles[i].setAttribute("fill", "transparent");
            bubbles[i].setAttribute("stroke", "white");
        }

        if (by < wavesY - 20) {
            //by = getRandomInt(wHeight)+wHeight;
            bubbles[i].setAttribute("fill", "url(#grad3)");
            bubbles[i].setAttribute("stroke", "light");
            bubbles[i].setAttribute("opacity", "0.5");
        }

        if (by < wavesY - 40) {

            bubbles[i].splice(i, 1); ////////////////// THIS IS THE PROBLEM

            //bubbles[i].parentNode.removeChild(bubbles[i]);

        }

        bubbles[i].setAttribute("cx", bx);
        bubbles[i].setAttribute("cy", by);

        bubblesC[i] += Math.PI / 8;

    }

}

Answer 1

Array.splice() удалить заданное количество элементов, начиная с заданного индекса, и все остальные элементы сдвигаются вниз. Затем блок запоздалой мысли цикла for увеличивается на i на 1. Таким образом, индекс пропускается.

Взгляните на:

let fiboArray  = [ 1, 1, 2, 3, 5, 8 ];

// Array.splice() fails in forward for loops
for (let i = 0; i <= fiboArray.length ; i++) {
    if (fiboArray[i] === 1) {
        fiboArray.splice(i, 1);
    }
}
console.log(fiboArray); // → [ 1, 2, 3, 5, 8 ]

Обратный цикл for может справиться с этим специальным поведением

let fiboArray  = [ 1, 1, 2, 3, 5, 8 ];

// Array.splice() with backward for loops
for (let i = fiboArray.length - 1; i >= 0; i--) {
    if (fiboArray[i] === 1) {
        fiboArray.splice(i, 1);
    }
}
console.log(fiboArray); // → [ 2, 3, 5, 8 ]

Но, как уже было сказано ранее: splice() можно использовать только на Array

изменить

bubbles[i].splice(i, 1);

до

bubbles.splice(i, 1);

Answer 2

splice можно использовать только для массива, а не для объекта. Используйте bubbles.splice(i, 1);