本文旨在解决在 JavaScript 中如何正确地从 Promise 中提取数值，并将其用于后续数组定义的问题。核心在于理解 Promise 的异步特性，以及如何使用 .then() 方法来处理 Promise 的返回值，确保在数组创建时，数值已经准备就绪。同时，避免 top-level-await 带来的潜在问题，提供一种稳健且兼容性良好的解决方案。
在 JavaScript 中，处理异步操作是常见的任务。当我们需要从一个 Promise 中获取数值，并将其用于后续的代码，例如填充数组时，需要特别注意 Promise 的异步特性。直接将 Promise 对象赋值给数组元素会导致数组包含的是一个 Promise，而不是 Promise 的返回值。
解决这个问题的关键在于使用 .then() 方法。.then() 方法允许我们在 Promise resolve 后执行回调函数，从而获取 Promise 的返回值。
示例代码：
立即学习“Java免费学习笔记（深入）”；
假设我们有一个名为 all_kdm_coverage 的 Promise，它最终会返回一个数值。我们想要使用这个数值来创建一个包含 coverage 属性的数组。以下是正确的做法：
const scrolls = [];
all_kdm_coverage.then(coverage => {
scrolls.push({
title: "Kadena de Mano",
link: "./Kdm",
coverage: coverage
});
// 在这里使用 scrolls 数组，确保数据已加载
console.log("scrolls:", scrolls);
});
// 注意：在这里 scrolls 数组可能还是空的，因为 Promise 尚未 resolve
console.log("scrolls (可能为空):", scrolls);代码解释：
- 初始化数组: 首先，我们创建一个空的 scrolls 数组。
- .then() 方法: 我们使用 all_kdm_coverage.then() 方法，传入一个回调函数。这个回调函数会在 all_kdm_coverage Promise resolve 后执行。
- 获取返回值: 回调函数的参数 coverage 就是 all_kdm_coverage Promise resolve 后的返回值。
- 填充数组: 在回调函数内部，我们使用 scrolls.push() 方法向数组中添加一个新的对象，并将 coverage 值赋给对象的 coverage 属性。
- 异步特性： 注意，scrolls.push() 发生在 Promise resolve 之后，因此确保了 coverage 属性的值是 Promise 的返回值，而不是 Promise 对象本身。
- 使用数组： 重要的是，在 .then() 回调函数 内部 使用 scrolls 数组。这是因为 Promise 是异步的，在 .then() 之外的代码可能会在 Promise resolve 之前执行，导致数组为空。
避免使用 top-level-await：
虽然可以使用 await 关键字来等待 Promise resolve，但在模块的顶层作用域（top-level）使用 await 可能会导致错误，如示例中提到的 "The top-level-await experiment is not enabled"。 因此，推荐使用 .then() 方法来处理 Promise 的返回值，以获得更好的兼容性。
注意事项：
- 异步操作： 务必理解 Promise 的异步特性。Promise resolve 需要时间，因此不能假设 Promise 的返回值会立即可用。
- 回调函数： 使用 .then() 方法提供的回调函数来处理 Promise 的返回值。
- 作用域： 在 .then() 回调函数内部使用从 Promise 获取的数据，确保数据已加载。
- 错误处理： 可以使用 .catch() 方法来处理 Promise rejected 的情况，例如 all_kdm_coverage.then(...).catch(error => console.error("Error:", error))。
总结：
通过使用 .then() 方法，我们可以安全地从 Promise 中提取数值，并将其用于后续的代码，例如填充数组。 这种方法避免了 top-level-await 带来的潜在问题，并确保了代码的兼容性和可维护性。 记住，理解 Promise 的异步特性是解决此类问题的关键。
