JavaScript删除数组的索引不起作用

Question

我有这个数组：

var sizes = [
        [20, 10, 0],
        [40, 20, 0],
        [60, 30, 0],
        [80, 40, 0],
        [100, 50, 0]
        ];

我想随机将矩形的大小更改为大小：（20,10）或（40,20）或（60,30）或（80,40）或（100,50）并更改X位置（这似乎不是我的问题的一部分）

每个尺寸最多只能显示10次。 我在数组的第3列保存了大小的计数器。 当它计数10时我想删除这个可能大小的大小，所以它不能再次更改为这个大小。 此外，这应该将更改限制为最多50次。

随机更改矩形的我的代码如下所示：

function changeRec() {

        if (sizes.length == 0) {
            return;
        }

        var rnd = Math.round(Math.random() * (sizes.length -1 ));

        var x = sizes[rnd][0];
        var y = sizes[rnd][1];

        var element = document.getElementById("rectangle");

        element.style.width = x + "px";
        element.style.height = y + "px";

        var newX = (Math.random() * (document.body.clientWidth -200));
        var rect = element.getBoundingClientRect();
        if (Math.abs(newX - rect.left) < 30) {
            changeRec();
        } else {
            element.style.left = newX+"px";
            sizes[rnd][2]++;

            if (sizes[rnd][2] == 10) {
                delete sizes[rnd];
                console.log("deleted");
            }

            count++;
            calculate();
        }           
    }

但是，此代码似乎无法正常工作。 我真的不知道为什么，但似乎从sizes数组的索引中删除不起作用。

我得到错误： TypeError: undefined is not an object (evaluating 'sizes[rnd][0]')

Answer 1

delete sizes[rnd]不会将数组缩小一个，而是会给你一个空元素。 因此，当您第二次点击该索引时，它会抛出一个错误。

要从数组中删除项目，您应该使用splice 。

更改

delete sizes[rnd]

至

sizes.splice(rnd, 1)