Javascript - 仅返回未定义的数组索引[重复]答案

【问题标题】：Javascript - array index returning only undefined [duplicate]Javascript - 仅返回未定义的数组索引[重复]
【发布时间】：2019-06-26 14:32:42
【问题描述】：

这是我的代码：

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(readFiles);显示原始文件数组，如 this 和控制台.log(i);显示正确的索引所以 console.log(readFiles[i]);应该显示原始文件字符串之一，但它只显示未定义。为什么？

【问题讨论】：

console.log(i) 输出什么？ FileReader onload 事件是异步的，for 循环是同步的，除非使用 async/await。
@guest271314 console.log(i) 输出正确的索引（0, 1, 2, 3...）
if (fileI < files.length) { fr.readAsDataURL(files[fileI]); } 在FileReader onload 处理程序中的用途是什么？是否设置了 multiple 属性？为什么fr.readAsDataURL(files[0])在下一行是循环filesFileList对象的for循环处执行？

标签： javascript arrays indexing undefined

【解决方案1】：

出于性能原因，浏览器控制台仅在以后评估引用（如对象引用或数组）。因此，它不会向您显示当时的实际内容，即日志语句已执行。

来自MDN：

请注意，如果您在最新版本的 Chrome 和 Firefox 中记录对象，则您在控制台上记录的内容是对该对象的引用，这不一定是您当时的对象的“值”调用console.log()，但它是你点击打开时对象的值。

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

console.log(readFiles.toString());

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

进一步阅读：

【讨论】：