为何JavaScript中打印数组为空展开却有数据？如何解决？

• 异步操作未等待完成：map的回调是async函数，每个回调都会返回一个Promise，但你没有等待这些Promise全部执行完毕就直接调用了console.log(textArray)。此时异步的getTranslatedText请求还没完成，textArray自然是空的。
• 浏览器控制台特性：控制台打印数组时，显示的是打印瞬间的状态快照，但展开数组时会重新读取当前的实时状态。当你展开时，之前的异步请求已经完成，textArray被填充，所以能看到数据。

推荐用Promise.all批量等待所有异步请求完成，直接获取最终结果数组，无需手动push：

async function createGrid(data){ 
   const lang = "eng";
   // 用map生成所有异步请求的Promise，通过Promise.all等待全部完成
   const textArray = await Promise.all(
     data.map(obj => getTranslatedText(lang, obj.type))
   );

   console.log(textArray); // 此时数组已填充完整数据
}

如果坚持保留push的方式，也可以手动收集所有Promise并等待：

async function createGrid(data){ 
   let textArray = [];
   const lang = "eng";
   // 收集所有异步操作的Promise
   const promises = data.map(async obj => {
     const res = await getTranslatedText(lang, obj.type);
     textArray.push(res);
   });
   // 等待所有异步操作结束
   await Promise.all(promises);
   console.log(textArray); // 此时数组已填充
}

内容的提问来源于stack exchange，提问作者Mad