异步函数结合对象字面量与switch-case，访问对象键返回undefined？

问题现象 #

尝试从返回对象的异步函数中获取属性值时，bar1中调用异步函数并直接通过.exe1访问属性的项返回undefined，但bar2中直接存储异步函数返回结果的所有键均有对应值。

代码示例 #

const foo = async()=> {
    let zoo
    let data = [
        {
            key1:"1",
            key2:"a",
            key3:3,
            key4:"cal",
        }
    ]
    
    for (const iterator of data) {
            bar1 = {
                objectLiteral_swithAsync:  await objectLiteral_swithAsync(iterator["key4"]).exe1,
                objectLiterals_withOutAsync :   objectLiterals_withOutAsync(iterator["key4"]).exe1,
                switch_WithAsync : await switch_WithAsync(iterator["key4"]).exe1,
                switch_WithOutAsync :  switch_WithOutAsync(iterator["key4"]).exe1,
            }
            bar2 ={
                objectLiteral_swithAsync:  await objectLiteral_swithAsync(iterator["key4"]),
                objectLiterals_withOutAsync :   objectLiterals_withOutAsync(iterator["key4"]),
                switch_WithAsync : await switch_WithAsync(iterator["key4"]),
                switch_WithOutAsync :  switch_WithOutAsync(iterator["key4"]),
            }
            zoo = {
                bar1 :bar1,
                bar2: bar2
            }
    }
    return zoo
}

async function objectLiteral_swithAsync(param) {
    let obj=  {
        'cal': 2 * 2
    }[param]
    let result = {
        exe1 : obj,
        exe2: 2
    }
    return result
}

function objectLiterals_withOutAsync(param) {
    let obj=  {
       'cal': 2 * 2
    }[param]
    let result = {
        exe1 : obj,
        exe2: 2
    }
    return result
}
async function switch_WithAsync (param){
    let obj
    switch (param) {
        case "cal":
            obj = 2 * 2
            break;
        default:
            obj =0
            break;
    }
     result = {
        exe1 : obj,
        exe2: 2
    }
    return result
}

function switch_WithOutAsync  (param){
    let obj
    switch (param) {
        case "cal":
            obj = 2 * 2
            break;
        default:
            obj =0
            break;
    }
     result = {
        exe1 : obj,
        exe2: 2
    }
    return result
}

foo().then( result=>{
    console.log('--->1',result)
})

原因解析 #

问题出在运算符优先级：await的优先级低于成员访问运算符.，所以await objectLiteral_swithAsync(iterator["key4"]).exe1会先尝试访问异步函数返回的Promise对象上的.exe1属性。但Promise本身没有exe1属性，因此得到undefined，再对undefined执行await操作，结果依然是undefined。

而bar2中是先通过await等待异步函数返回完整对象，再直接存储这个对象，自然能得到正确的结果。

解决方案 #

给await的异步函数调用加上括号，确保先等待异步函数返回对象，再访问其属性：

修改bar1的定义为：

bar1 = {
    objectLiteral_swithAsync:  (await objectLiteral_swithAsync(iterator["key4"])).exe1,
    objectLiterals_withOutAsync :   objectLiterals_withOutAsync(iterator["key4"]).exe1,
    switch_WithAsync : (await switch_WithAsync(iterator["key4"])).exe1,
    switch_WithOutAsync :  switch_WithOutAsync(iterator["key4"]).exe1,
}

这样就能正确获取异步函数返回对象的exe1属性值了。

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