增加数组数量而不重置它（Javascript/Canvas）答案

【问题标题】：Increase array amount without resetting it (Javascript/Canvas)增加数组数量而不重置它（Javascript/Canvas）
【发布时间】：2019-02-22 17:17:17
【问题描述】：

在我的项目中，我希望我的数组每 5 秒增加一次。我尝试使用 setInterval 调用一个函数来执行此操作，但它每 5 秒重置一次我的数组，数量增加而不是自然增长。有没有办法增加数量而不必每次都重置数组？

这些是我用来称呼我的“植物”的函数：

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

    reproducePlants();

    setInterval(reproducePlants, 5000);

}   

function reproducePlants() {
    plantSpawn += 5;

    for(var i=0; i<plantSpawn; i++){

        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
            plant.x = Math.random() * canvas.width;
            plant.y = Math.random() * canvas.height;
            plant.rad = 2;
            plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        myPlants[i] = plant;

    }
}

【问题讨论】：

目前它每次都会更新已经存在的植物。如果您只想添加 5 个新元素，请运行 for 循环 5 次 (i < 5) 并使用 myPlants.push(plant)

标签： javascript arrays canvas

【解决方案1】：

当你这样做时，你明确地重置了数组的所有值：

for(var i=0; i < plantSpawn; i++){... myPlants[i] = plant; ...}

请注意，plantSpawn 将保存新的数组大小，因此您将遍历所有旧索引和新索引并重新分配它们的值。

因此，您可以改为使用 Array.push() 将 5 新元素添加到数组中：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        // Push a new plant on the array.
        myPlants.push(plant);
    }
}

作为建议，您甚至可以将创建新工厂的逻辑封装在方法中，如下所示：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function createPlant()
{
    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';
    return plant;
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        myPlants.push(createPlant());
    }
}

【讨论】：

【解决方案2】：

您将覆盖所有现有值，因此不要使用myPlants[i] = plant;，而是使用myPlants.push(plant)

【讨论】：

【解决方案3】：

您需要修改函数以将植物添加到现有数组中，而不是循环遍历数组并为其分配新值。

如果你想每 5 秒向你的数组添加一个新值，这样的事情应该可以工作：

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

     reproducePlants();

     setInterval(reproducePlants, 5000);

}   

function reproducePlants() {

    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

    myPlants.push(plant);
}

这只是在数组末尾添加一个新植物，而不是在每次调用函数时为当前数组分配新值。如果您想一次添加多于 1 个的植物，您应该可以从这里将其放入 for 循环中。循环的每次迭代只会向您的数组添加一个计划。

【讨论】：