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);
}

编辑：没有表格副本的代码