JavaScript陣列優化可提高性能

Question

我使用WebGL創建將落到平面上的球體。 這些球體存儲到名為ballArray的數組中，並在計時器上連續創建。 如果任何球體超過某個-y值，它們將從場景和數組中移除。 我遇到的麻煩是每幀我都調用render（），所以如果說ball0被刪除，我的循環仍然會尋找它，但是程序運行任何球的方式可能會下降，無論數組中的位置如何。 我是怎么做到的：

    var ballArray =[];
    var i = 0;
    var temp;

    function createBall()
    {
        temp = Math.random() * (4 - 1) + 1; //creates the size of the ball
        ball = new Physijs.SphereMesh(
        new THREE.SphereGeometry(temp,16,16),
        Physijs.createMaterial(new THREE.MeshLambertMaterial(
        {
            color: 0xff0000,
            reflectivity: 0.8
        }),0.4,0.6),1 ); //generates the ball with Physijs (this uses three.js)

        var r = 
        {
            x: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
            y: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12,
            z: Math.random() * (Math.PI - Math.PI / 12) + Math.PI / 12
        };

        //sets all the attributes associated with the ball
        ball.rotation.set(r.x, r.y, r.z);
        ball.position.y = 40;
        ball.castShadow = true;
        ball.receiveShadow = true;
        ball.name = "ball"+i; //sets the name to 'ball' + whatever iteration its on

        //Gather all the ball information
        var json = {Name: "ball"+i, X: ball.position.x, Y: ball.position.y, Z: ball.position.z, Size: temp, Ball: ball};
        console.log(JSON.stringify(json));
        ballArray.push(json); // Push it to the array
        delete temp, json, ball; // clear the variables used

    }

    var timer = setInterval(function() { addBall() }, 1000); // Call add ball using a timer

    function addBall()
    {
        if(i >= 0) // just to be used while testing the balls will fall continuously 
        {
            createBall();
            scene.add(ballArray[i].Ball); //add the ball to the scene
            i++;  // increment i 

        }
        else
        {
            //console.log("Finished");
            clearInterval(timer);
        }
    }

    render();
    scene.simulate();

    function render() 
    {
        for (var i = 0; i < ballArray.length; i++)  //Loop through the array
        {
            object = scene.getObjectByName( "ball"+i, true ); //get the reference to the ball
            if(object) //if there is a ball
            {
                if (object.position.y <= -50) //if the balls position has gone below -50 
                {
                    scene.remove(object); //remove the object from the scene
                    ballArray.splice(i,1); //remove the object from the array
                    console.log(" ball"+i+" removed"); //print out
                }
            }
            else //if there is not a ball in the scene
            {
                console.log("ball gone is ball"+i);
            }
            delete object;
        }
        renderer.render(scene, camera); //render
        requestAnimationFrame(render);
    }

我知道線object = scene.getObjectByName( "ball"+i, true ); 這就是為什么它尋找它的原因，但是有沒有更優化的方法來使用數組搜索場景，所以說到后期時，它無需搜索100個已移除的球就可以更新屏幕上的當前球。 。

******這個問題已經過編輯，以包含有關我如何制作和使用球的所有必要信息

Answer 1

會做這樣的事情：

//empty ball array    
var ballArray = [];

//add any ball you want
ballArray.push("ball1");
ballArray.push("ball2");
ballArray.push("ball3");

//It will keep in note the index to delete AFTER the forEach loop
var indexToDelete = [];

//For each ball that are still in the table
ballArray.forEach(function(entry) {

    object = scene.getObjectByName(entry, true);

    //That IF statement can be removed if you want
    //Maybe you can use now a try catch
    if (object) {
         if (object.position.y <= -50) //if the balls position has gone below -50 
         {
            scene.remove(object); //remove the object from the scene
            console.log(entry + " removed"); //print out
            indexToDelete.push(ballArray.indexOf(entry)) //add the index to delete
         }
    }

    delete object;

});

//Loop to remove the balls
for (var i = 0; i < indexToDelete.length; i++)
{
    ballArray.splice(indexToDelete[i], 1);
}

編輯：沒有表副本的代碼