Question

https://stackoverflow.com/a/1234337/1690081

表明array.length = 0;将清空数组，但在我的代码中它不会

这是一个示例：

window.onload = draw;
window.onload = getFiles;
var namelist = [];
function draw(){
    // assing our canvas to element to a variable
    var canvas = document.getElementById("canvas1");
    // create html5 context object to enable draw methods
    var ctx = canvas.getContext('2d');

    var x = 10; // picture start cordinate
    var y = 10; // -------||---------
    var buffer = 10; // space between pictures
    for (i=0; i<namelist.length; i++){
        console.log(namelist[i])
        var image = document.createElement('img');
        image.src = namelist[i];
        canvas.appendChild(image);
        ctx.drawImage(image,x,y,50,50);
        x+=50+buffer;
    }
}
function getFiles(){
    namelist.length = 0;// empty name list
    var picturesFiles = document.getElementById('pictures')
    picturesFiles.addEventListener('change', function(event){
        var files = picturesFiles.files;

        for (i=0; i< files.length; i++){
            namelist.push(files[i].name);
            console.log(namelist)
        }
        draw();
    }, false);

}

我第二次打电话给getFiles()之后。它不会删除以前的列表，只是附加到它。知道为什么吗？

Answer 1

您应该在事件处理程序中清空数组，而不是getFiles，每个页面加载只调用一次。它实际上什么都不做，因为当页面加载时数组已经为空。

picturesFiles.addEventListener('change', function(event){
    namelist.length = 0; //empty it here
    var files = picturesFiles.files;

    for (i=0; i< files.length; i++){
        namelist.push(files[i].name);
        console.log(namelist)
    }
    draw();
}, false);

另一个问题是，您不能只将.src设置为文件名。这会向您的服务器请求该文件。

要真正解决此问题，只需将文件对象推送到名称列表：

namelist.push(files[i]);

然后，当您在绘图中处理它们时，创建本地化的BLOB URL以显示它们：

var file = namelist[i];
var url = (window.URL || window.webkitURL).createObjectURL( file );
image.src = url;

Answer 2

看起来您正在使用namelist作为全局变量。如果您将新数组作为返回值传递出函数，这将更容易（并且可以避免需要将其清空）。

即：

function getFiles() {
    var newNameList = [];
    ..... //push entries here.
    return newNameList;
}

...然后从您调用它的返回值填充namelist：

namelist = getFiles();

然而，要回答实际问的问题：

您可以通过将数组设置为新数组来重置数组，而不是将长度设置为零：

namelist = [];

您还没有向我们展示您如何'将'条目推送到列表中，但我怀疑最终结果是namelist是作为通用对象而不是数组对象生成的。如果是这种情况，那么设置.length=0只会将属性添加到名为length的对象，其值为0。您使用它的方式中的length属性仅适用于Array个对象。

希望有所帮助。

Answer 3

如果使用非数字索引，则阵列将不会清除。 “......每当更改length属性时，将自动删除名称为数组索引且其值不小于新长度的每个属性”

Test:
var arr = [];
arr['this'] = 'that';
arr.length = 0;
console.log(arr);
//output ['this':'that']

var arr = [];
arr[0] = 'that';
arr.length = 0;
console.log(arr);
//output []

Answer 4

如何清空数组没有任何问题，因此代码中必须存在其他错误。

这很好用，数组第二次不包含前面的项目：

var namelist = [];

function draw() {
    alert(namelist.join(', '));
}

function getFiles() {
    namelist.length = 0; // empty name list
    namelist.push('asdf');
    namelist.push('qwerty');
    namelist.push('123');
    draw();
}

getFiles();
getFiles();

演示：http://jsfiddle.net/Guffa/76RuX/

编辑：

看到你的实际代码，问题来自于使用回调方法来填充数组。每次调用该函数时，都会添加另一个事件处理程序，因此在调用该函数后，它会调用两个事件处理程序，每个事件处理程序将所有项添加到数组中。

只添加一次事件处理程序。

JavaScript空数组

4 个答案:

编辑：