1

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()二度目に電話した後。前のリストは削除されず、追加されるだけです。理由はありますか？

4

4 に答える 4

1

getFilesページロードごとに 1 回だけ呼び出されるイベント ハンドラーではなく、配列を空にする必要があります。ページがロードされたときに配列がすでに空であるため、実際には何もしていません。

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もう 1 つの問題は、ファイルの名前だけを設定できないことです。これにより、サーバーにファイルのリクエストが送信されます。

これを本当に修正するには、ファイル オブジェクトを名前リストにプッシュするだけです。

namelist.push(files[i]);

次に、描画でそれらを処理するときに、ローカライズされた BLOB URL を作成して表示します。

var file = namelist[i];
var url = (window.URL || window.webkitURL).createObjectURL( file );
image.src = url;
于 2012-12-07T13:20:24.497 に答える
0

namelistグローバル変数として使用しているようです。関数から新しい配列を戻り値として渡すと、これはより簡単になります (そして、それを空にする必要がまったくなくなります)。

すなわち:

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

...そして、namelist呼び出した場所の戻り値から入力します:

namelist = getFiles();

ただし、実際に尋ねられた質問に答えるには：

長さをゼロに設定する代わりに、新しい配列に設定するだけで配列をリセットすることもできます。

namelist = [];

エントリをリストに「プッシュ」する方法を示していませんが、最終結果はnamelist、配列オブジェクトではなく汎用オブジェクトとして生成されていると思われます。この場合、設定は、値が の.length=0名前のオブジェクトにプロパティを追加するだけです。あなたがそれを使用している方法のプロパティは、オブジェクトにのみ適用されます。length0lengthArray

それが役立つことを願っています。

于 2012-12-07T13:16:34.357 に答える
0

配列を空にする方法に問題はないため、コードに何か他の問題があるはずです。

これは正常に機能し、配列には 2 回目の前の項目が含まれていません。

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/

編集：

実際のコードを見ると、問題はコールバック メソッドを使用して配列を設定することにあります。関数を呼び出すたびに、別のイベント ハンドラーを追加するため、関数を 2 回目に呼び出した後、2 つのイベント ハンドラーが呼び出され、それぞれがすべての項目を配列に追加します。

イベント ハンドラーは 1 回だけ追加します。

于 2012-12-07T13:20:32.640 に答える
0

数値以外のインデックスを使用している場合、配列はクリアされません。「...長さプロパティが変更されるたびに、名前が新しい長さよりも小さくない値を持つ配列インデックスであるすべてのプロパティが自動的に削除されます」

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 []
于 2012-12-07T13:17:51.613 に答える