Javascript

Question

这是我的代码：

var fr = new FileReader();
var readFiles;
var fileI;
var files;

fr.onload = () => {
  readFiles.push(fr.result);
  fileI ++;
  if (fileI < files.length) {
    fr.readAsDataURL(files[fileI]);
  }
};

function getVideoImage(path, secs, callback) {
  var me = this, video = document.createElement('video');
  video.onloadedmetadata = function() {
    if ('function' === typeof secs) {
      secs = secs(this.duration);
    }
    this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
  };
  video.onseeked = function(e) {
    var canvas = document.createElement('canvas');
    canvas.height = video.videoHeight;
    canvas.width = video.videoWidth;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    var img = new Image();
    img.src = canvas.toDataURL();
    callback.call(me, img, this.currentTime, e);
  };
  video.onerror = function(e) {
    callback.call(me, undefined, undefined, e);
  };
  video.src = path;
}

$uploadFiles.on("input", () => {
  files = $uploadFiles[0].files;
  var value = $uploadFiles[0].value;
  fileI = 0;
  readFiles = [];
  fr.readAsDataURL(files[0]);
  for (var i = 0; i < files.length; i++) {
    var format = files[i].name.split(".").pop().toUpperCase();
    var thumbnail;
    getVideoImage(readFiles[i], 0, (img) => {
      thumbnail = img;
    });
    if (fileFormat.video.includes(format)) {
      propertiesData.FILES.contents[0].push({
        thumbnail: thumbnail,
        title: files[i].name,
        file: readFiles[i]
      });
    } else if (fileFormat.image.includes(format)) {
      console.log(readFiles);
      console.log(i);
      console.log(readFiles[i])
      propertiesData.FILES.contents[1].push({
        thumbnail: readFiles[i],
        title: files[i].name,
        file: readFiles[i]
      });
    } else if (fileFormat.audio.includes(format)) {
      propertiesData.FILES.contents[2].push({
        thumbnail: "Assets/Logo.PNG",
        title: files[i].name,
        file: readFiles[i]
      });
    } else {
      alert("File Format Not Supported");
    }
    $("#properties-left-menu li[style='color: ${color[1]}']")
  }
});

它读取上传的文件并将原始文件保存在数据对象（propertiesData）中。问题是这部分：

      console.log(readFiles);
      console.log(i);
      console.log(readFiles[i])
      propertiesData.FILES.contents[1].push({
        thumbnail: readFiles[i],
        title: files[i].name,
        file: readFiles[i]
      });

console.log(读取文件);显示原始文件数组，如 this 和 console.log(i);显示正确的索引所以 console.log(读取文件[i]);应该显示原始文件字符串之一，但它只显示未定义。为什么？

Answer 1

出于性能原因，浏览器控制台仅在稍后评估引用（如对象引用或数组）。所以，它并没有告诉你当时的实际内容，即日志语句被执行了。

来自MDN：

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you click it open.

要获取当时的实际内容，使用

console.log(readFiles.toString());

然后你会看到，此时数组还是空的，因为FileReader.readAsDataURL()是异步执行的。

进一步阅读：

console.log() shows the changed value of a variable before the value actually changes
Weird behavior with objects & console.log
Please stop using console.log(), it’s broken…

Javascript - 仅返回未定义的数组索引

Javascript - array index returning only undefined

arrays

indexing

undefined