Question

我正在处理像应用程序这样的多页涂料，有一个“清除”按钮。当用户按下它时，我希望清除该页面上绘制的所有形状。以下是清除按钮背后的代码。

clear.addEventListener('click', function (e) {
        canvas.width = canvas.width;
        tempCanvas.width = tempCanvas.width;
        var tempShapes = shapes.slice();
        alert(tempShapes.length);
        for(var i=0; i<tempShapes.length; i++)
        {

            var A = tempShapes[i];
            if(A.pageNum == pNum)
            {
                alert('in');
                shapes.splice(i, 1);
            }
        }
        //shapes.length = 0;
        e.preventDefault();
    }

shapes[]是包含所有页面的完整对象的数组。我只想删除当前pagenumber（pNum）的那些。当代码运行时，它会在该特定页面的形状数组中留下一个元素，有时会留下两个元素。我希望删除该特定页面的形状数组的所有元素。

Answer 1

您可能会发现Array.filter对此任务更有用，例如：

shapes = shapes.filter(function(shape, i) {
    return tempShapes[i].pageNum != pnum;
})

Answer 2

问题是删除第一个元素后，您的数组索引不同步：

orig : 0-0, 1-1, 2-2 
temp : 0-0, 1-1, 2-2

remove orig[0] -> index 0 -> temp[0] = 0

orig : 0-0, 1-1, 2-2 
temp : 0-1, 1-2

remove orig[1] -> index 1 -> temp[1] = 2 !!

您可以从正在迭代的同一个数组中删除：

clear.addEventListener('click', function (e) {
    for(var i=shapes.length-1; i>=0; i--) {
        if(shapes[i].pageNum == pNum) {
            shapes.splice(i, 1);
        }
    }
    e.preventDefault();
}

或者你可以filter他们：

clear.addEventListener('click', function (e) {
    shapes = shapes.filter(function(item) { return item.pageNum != pNum });
    e.preventDefault();
}

如何从数组中删除元素？

2 个答案: