在JavaScript/Vue.js中如何将变量值作为另一对象的属性名动态取值

在JavaScript中如果要动态拼接属性名获取对象值，不能直接拼接点语法的字符串，需要使用方括号属性访问语法实现，具体说明如下：

前置注意 #

你给出的feeds和measurements都是数组结构，首先需要先取出数组中对应的目标对象，示例中两个数组都只有1个元素，所以取下标为0的元素即可，如果实际业务中有多个元素，需要对应匹配遍历。

如果你实际使用中已经把数组内的单个对象提取出来赋值给了对应变量（比如feeds已经是单个对象不是数组），可以跳过取数组元素的步骤。

实现代码 #

新版JS（支持模板字符串） #

// 取出数组中的目标对象
const targetFeed = feeds[0];
const targetMeasurement = measurements[0];

// 动态拼接属性名，用方括号访问
const myField = targetFeed[`field${targetMeasurement.fieldId}`];

兼容旧版JS写法 #

const targetFeed = feeds[0];
const targetMeasurement = measurements[0];
const myField = targetFeed['field' + targetMeasurement.fieldId];

运行后myField的取值就是你需要的16.40000。

原理解释 #

• 点语法只能访问固定名称的对象属性，无法识别动态拼接的属性名字符串
• 方括号语法会自动计算括号内的表达式结果，将结果作为属性名去对象中读取对应值，刚好匹配你动态拼接属性名的需求

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