將值添加到具有匿名函數的Array中的JavaScript對象

Question

我正在使用Filepicker.io來存儲圖像。我試圖使用它們的filepicker.stat()函數獲取圖像的元數據。然而，雖然它讓我與元數據的內部工作，像這樣：

filepicker.stat(InkBlobs[i], { width: true, height: true }, function(metadata){ console.log(JSON.stringify(metadata)) }); 

我不能得到的元數據指出，匿名函數。我想要做的是這樣的：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(metadata){ InkBlobs[i].add(JSON.stringify(metadata)); }); 
} 

這顯然是行不通的（在InkBlobs[i].add(...)）的一部分，所以我怎麼能捕獲元數據，並與位於陣列中的其他數據包括它？數組內容可以是JSON.stringify()'d。

Answer 1

首先，我假設回調收到metadata作爲參數;這是從問題中的代碼中遺漏的，但我會假設如下。

你基本上可以做你寫的東西，你只需稍微改變一下管理i並有一個地方來存儲它。由於這是JavaScript，因此您可以將自己的屬性添加到InkBlob實例中，但這通常有點危險（如果您與非公開內容發生衝突，或者他們在下一個版本中添加了類似對象的內容等） 。

首先讓我們處理i：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, makeCallback(i)); 
} 
function makeCallback(index) { 
    return function(metadata){ 
     InkBlobs[index].add(JSON.stringify(metadata)); 
     // This bit ^^ is still theoretical 
    }; 
} 

現在，不要關在i，我們的回調關閉了index，這是我們傳遞給makeCallback當我們在循環中調用它的觀點。回調發生前i發生變化，index沒有。

您還可以使用ES5的bind如果回調看到this不必通過stat進行控制：

for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(index, metadata){ 
     InkBlobs[index].add(JSON.stringify(metadata)); 
     // This bit ^^ is still theoretical 
    }.bind(null, i)); 
} 

注意i我們通過bind參數通過所提供的任何的前面顯示出來stat（在我的示例中bind，null的第一個參數是回調期間設置的this）。

我從這裏開始使用bind，因爲它更簡潔。

現在我們必須使用inkblobs存儲元數據。這裏有一種方法：

var data = []; 
var count = 0; 
for(i = 0; i < InkBlobs.length; i++) 
{ 
    filepicker.stat(InkBlobs[i], { width: true, height: true }, function(index, metadata){ 
     data[index] = { 
      blob:  InkBlobs[index], 
      metadata: metadata // No reason to stringify it that I know of, but you could 
     }; 
     ++count; 
     if (count === InkBlobs.length) { 
      useTheNewArray(); 
     } 
    }.bind(null, i)); 
} 

請注意，我們迫不及待地打電話useTheNewArray，直到我們看到回調所有斑點。另外請注意，我們不只是將push添加到新陣列中，因爲它們可能無序到達（理論上）。當然，如果訂單無關緊要，push就不用了，你不再需要count變量了。