JavaScript 变量赋值/返回

Question

我正在使用 d3.js 加载 2 个 csv 文件并希望合并它们。然而，我被困在一些更基本的事情上。

我有以下功能可以正常工作:

function loadData(file) {
   d3.csv(file, function (d){...}, 
        function (data) {displayData(data);});
}

现在我尝试以 loadData() 的方式重构代码以返回 data 对象，这样我就可以调用它两次，合并 data 数组并使用合并后的数组调用 displayData()。

我尝试返回数据:

function loadData(file) {
   d3.csv(file, function (d){...}, 
        function (data) {return data});

   return data;
}

使用全局变量

 var gdata1 = {};
 var gdata2 = {};
 function loadData(file) {
   d3.csv(file, function (d){...}, 
        function (data) {gdata = data});

   gdata2 =  data;
}

除此之外，似乎没有任何效果。

令人惊讶的是，

使用全局变量

 var gdata1 = {};
 var gdata2 = {};
 function loadData(file) {
   d3.csv(file, function (d){...}, 
        function (data) {gdata = data; displayData(gdata)});


}

工作正常。

任何人都可以解释一下从 displayData 函数中获取数据数组的最佳/正确方法是什么以及如何合并两个数据数组(我希望数据是 map 数组，例如 data[0] 是 map ) .

Answer 1

loadData() 应该接受回调。然后就可以在第一个文件的回调中加载第二个文件了。

function loadData(file, callback) {
    d3.csv(file, function(d) { ...}, callback);
}

loadData(file1, function(err1, data1) {
    loadData(file2, function(err2, data2) {
        // code to combine data1 and data2 and display result
    });
});

这样做的缺点是它会序列化文件访问，因此它的性能不如将 Promise 与 Promise.all() 结合使用(如 Thomas 的回答)。

要处理任意数量的文件，您可以使用每次递增的变量从数组中提取它们。

function loadNextFile(files, i, dataArray) {
    if (i >= files.length) {
        // merge dataArray and display it
    } else {
        loadData(files[i], function(err, data) {
            dataArray.push(data);
            loadNextFile(files, i+1, dataArray);
        }
    }
}
var filesToLoad = [...];
loadNextFile(filesToLoad, 0, []);