如何通过变量动态访问与设置JavaScript对象的key对应值

问题原因 #

使用点操作符为对象赋值时，JS会将.后面的内容作为固定的字符串属性名处理，不会解析为对应变量的值，因此你当前的写法实际是在给cache对象添加/修改名为star的属性，而非star变量对应的属性名。

解决方法 #

改用方括号语法操作对象属性即可，方括号内部可以放入变量、表达式，JS会自动解析其值作为属性名，不需要额外使用模板字符串。

修正后的setCache函数代码如下：

function setCache(cache, star, value) {
    // 方括号内会自动解析star变量的值作为key
    cache[star] = value
}

扩展说明 #

• 只有当属性名是固定的字面量时，才适合用点操作符赋值/取值
• 如果属性名是动态的（来自变量、需要拼接计算），统一使用方括号语法即可
• 如果你确实需要拼接属性名（比如要给key加统一前缀），才需要用到模板字符串，举个示例：

// 示例：给所有key加前缀 constellation_
function setCache(cache, star, value) {
    cache[`constellation_${star}`] = value
}

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