array.length为零，但数组中包含元素

Question

我目前正在练习使用电子，但我对javascript很新，我遇到了一个令我感到困惑的问题。我有以下代码：

    function getPaths() {
      var dirPath = document.getElementById("mdir").innerHTML;
      var filePaths = [];
      fs.readdir(dirPath, function(err, dir) {
        for(var i = 0, l = dir.length; i < l; i++) {
          var filePath = dir[i];
          filePaths.push(dirPath + "/" + filePath);
        }
      });
      console.log(filePaths);
      console.log(filePaths.length);
    }

应该查看由dirPath定义的目录，然后循环并获取该目录中所有文件的完整路径。它将它们附加到一个数组，然后在底部，它将数组记录到控制台，然后是数组的长度。 令我感到困惑的是，给定该代码，数组会按预期记录到控制台，但随后控制台将长度记录为零。我目前的想法是它与范围有关，但这没有意义，因为我在正在运行的函数上面的函数中声明了数组filePaths。除非我错过了什么。谁能指出我做错了什么？

Answer 1

readdir是异步的。它不会马上得到结果。您应该在回调中记录filePaths。控制台显示该值的唯一原因是控制台在展开数据时对其进行评估。

当您按左侧的小箭头时，将鼠标放在右侧的i框中。发生的事情是控制台保留对数组的引用，因此当用户展开数组时，它会显示其当前值。但是当你记录filePaths.length时，数组是空的，因为readdir没有完成读数，这就是你得到0的原因。但是当你打开控制台并按下那个箭头时，readdir将会已经完成读取，控制台将打印数组的当前值（填充后）。

示例来说明问题:(不是解决方案，只是了解实际发生的事情）

尝试并运行此代码，看看会发生什么：

var arr = [];
setTimeout(function() {
  arr.push(1, 2, 3);
}, 5000);
console.log(arr.length);
console.log(arr);

此处数组及其长度都在数组填充之前记录。阵列将在5秒后填满。因此输出将为0和字符串array[]。现在因为数组可能有大量数据，控制台不会显示数据，直到用户展开数组。所以控制台所做的是保持对阵列的引用，直到用户按下展开箭头。如果在5秒之前展开数组，则会看到数组为空（尚未填充）。如果你等到5秒钟过去然后展开它，那么你会看到它被填满了。

注意：此外，记录到控制台的行（类似> Array(0)）只是日志发生时对象/数组的字符串表示形式。如果对象/数组发生更改，它将不会更新。所以有时也似乎confusing。

我希望现在很清楚。

Answer 2

为了扩展@ ibrahim-mahrir的答案，他们的意思是这样的

function getPaths() {
    var dirPath = document.getElementById("mdir").innerHTML;
    var filePaths = [];
    fs.readdir(dirPath, function(err, dir) {
        for (var i = 0, l = dir.length; i < l; i++) {
            var filePath = dir[i];
            filePaths.push(dirPath + "/" + filePath);
        }
        console.log(filePaths);
        console.log(filePaths.length);
    });
}