使用 Javascript 数组索引了解 await

Question

我在 Javascript 代码中遇到了一个问题，其中与数组索引返回值结合使用的await的行为与我预期的不同。

我有一个异步 function 返回一个数组，类似于这个例子：

const myFn = async () => {
   let result = [];
   for(i=0; i<100; i++) {
      result.push(i);
   }
   return result;
};

const a = await myFn()[0]; // -> undefined

const result = await myFn();
const b = result[0]; // -> 0

在这里，我看到a是undefined ，而b是 0。我原以为a和b都会被分配 0。然后我还发现数组索引上的 await 是有效的语法，这就解释了为什么上面的两个值是不同的如果 await 语句只针对最高级别的操作。

const myArr = [ 'a', 'b', 'c' ];

const a = await myArr[0];

所以我的问题是，当您等待数组索引时实际发生了什么，为什么这是有效的语法？

Answer 1

await的运算符优先级是 17 。 相比之下，成员访问，例如[0] ，具有更高的优先级 20。

所以

await myFn()[0];

相当于

await (myFn()[0]);

这是有效的语法，因为任何表达式都可以被await ed（对于非 Promise 这样做没有多大意义）。

 (async () => { const contains5 = await 5; console.log(contains5); })();

await myFn()[0]; 访问由 myFn 返回的myFn的[0] th 属性 - 但 Promise 没有这样的属性，因此undefined 。

在不使用单独行的情况下实现您想要的另一种方法是将myFn Promise 与括号分组（括号分组覆盖所有其他优先级）：

const a = (await myFn())[0];

您还可以在左侧进行解构：

const [a] = await myFn();