javascript - array.length es cero, pero la matriz tiene elementos

arrays scope

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Es floja la consola JavaScript de Chrome para evaluar matrices? 7 respuestas

Actualmente estoy en el proceso practicando el uso de electrones, pero soy bastante nuevo con JavaScript y me he encontrado con un problema que me tiene completamente desconcertado. Tengo el siguiente código:

    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);
    }

Que se supone que debe buscar en un directorio definido por dirPath , luego recorre y obtiene la ruta completa de todos los archivos en ese directorio. Los agrega a una matriz y luego, en la parte inferior, registra la matriz en la consola, seguida de la longitud de la matriz. Lo que me desconcierta es que dado ese código, la matriz se registra en la consola como se esperaba, pero luego la consola registra cero como la longitud. Mi opinión actual es que tiene algo que ver con el alcance, pero eso no tiene sentido porque estoy declarando la matriz, filePaths en la función anterior a la que se está ejecutando. A menos que me haya perdido algo. ¿Alguien podría señalar lo que estoy haciendo mal?

Answer 1

Solo para ampliar la respuesta de @ ibrahim-mahrir, significan así

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);
    });
}

Answer 2

readdir es asíncrono. No obtendrá el resultado de inmediato. Debe registrar las filePaths dentro de la devolución de llamada. La única razón por la que la consola muestra el valor es porque la consola evalúa la matriz cuando la despliega.

Cuando presionas la pequeña flecha a la izquierda, coloca el mouse en el cuadro i a la derecha. Lo que sucede es que la consola mantiene una referencia a la matriz, por lo que cuando el usuario despliega la matriz, muestra cuál es su valor actual. Pero cuando registra filePaths.length la matriz está vacía porque readdir no terminó de leer todavía, por eso obtiene 0. Pero para cuando abra la consola y presione esa flecha, readdir ya habrá terminado de leer y la consola imprimirá el valor actual de la matriz (después de que se haya llenado).

Ejemplo para demostrar el problema: (no es una solución, es solo entender lo que realmente está sucediendo)

Intente ejecutar este código y vea qué sucede:

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

Aquí, la matriz y su longitud se registran antes de que se complete la matriz. La matriz se llenará después de 5 segundos. Entonces la salida será 0 y una array[] cadenas array[] . Ahora, debido a que las matrices podrían tener toneladas de datos, la consola no mostrará esa información hasta que el usuario despliegue la matriz. Entonces, lo que hace la consola es mantener una referencia a la matriz hasta que el usuario presione la flecha desplegable. Si despliega la matriz antes de 5 segundos, verá que la matriz está vacía (aún no está llena). Si espera hasta que pasen los 5 segundos y luego lo despliegue, verá que está lleno.

Nota: Además, la línea que se registra en la consola (algo así como > Array(0) ) es solo una representación de cadena del objeto / matriz en el momento en que ocurre el registro. No se actualizará si el objeto / matriz cambia. Entonces eso también puede parecer confusing veces.

Espero que esté claro ahora.