Javascript数组有数据但长度为零

Question

编辑：由于我没有正确理解承诺，这似乎是同步问题。我以为“.then”等待承诺解决。显然情况并非如此。

我遇到了一个我以前从未见过的奇怪错误。

我有这段代码，可以在Chrome控制台中生成以下输出。

显然它是一个数组，它有数据和长度，但是当我打印长度属性时它是零。 （我也不能用地图迭代它）

我真的很困惑，任何帮助都会非常感激。

const readFile = (file) => (
  new Promise((resolve) => {
    const fr = new FileReader();
    fr.onload = () => {
      resolve(fr.result);
    };
    fr.readAsText(file);
  })
);

const readFiles = (files) => {
  const readFiles = [];
  files.forEach((file) => (readFile(file)).then((data) => readFiles.push({name: file.name, data })));
  return readFiles;
};

const scenes = readFiles(...grabbed from file picker dialog...)
console.log('scenes: ', ui.value.scenes);
console.log('length: ', ui.value.scenes.length);

Answer 1

您从读取文件返回的内容是一个承诺，因此您应该阅读then方法中的已解析值

 readFile().then( (scenes) => {
     console.table(scenes)
 }

您可以在控制台中看到值的原因是，在Chrome和Firefox中使用console.log时，对象的实时版可能会从以后的代码中更改（来自承诺解析） ）。
 如果您想要及时打印对象状态，您可以运行console.log(JSON.stringify(obj)) 以下是MDN

的摘录

  

请注意，如果您在最新版本中记录对象   您在控制台上登录的Chrome和Firefox是一个参考   对象，这不一定是＆＃39;值＆＃39;的对象   你调用console.log（）的时刻，但它是值的   对象在你点击它打开的那一刻。