用Javascript数组索引理解await

Question

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

我有一个async函数返回一个数组，类似于这个例子:

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编辑(只是对于非promise这样做没有多大意义)。

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

执行await myFn()[0];访问myFn返回的Promise的[0]属性-但是Promise没有该属性，因此undefined。

另一种不使用单独行而实现目标的方法是用括号对myFnPromise进行分组(括号分组覆盖所有其他优先级):

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

你也可以在左边解构:

const [a] = await myFn();