如何将动态变量拼接的对象路径传入Object.values()/Object.keys()获取值

你之前的写法错误核心是：模板字符串拼接生成的是普通文本字符串，JS不会自动将其解析为对象属性访问逻辑，Object.values()传入字符串时会将其视为类数组结构，返回每个字符组成的数组，和你预期的访问data对象属性完全无关。

对于固定层级的动态属性访问，直接使用JS对象的方括号访问语法逐层取值即可，示例代码如下：

import data from "~/static/words.json"
let section = "vocabulary"
let lection = "lection1"
// 方括号内可以传入变量作为属性名，多层属性嵌套逐层写方括号即可
const targetObj = data[section][lection]
console.log(Object.values(targetObj)) // 输出结果和硬编码的data.vocabulary.lection1完全一致

如果属性层级不固定，可以封装通用的工具函数处理任意层级的动态路径：

/**
 * 从对象中获取指定路径的嵌套属性
 * @param {object} obj 目标对象
 * @param {array} pathArr 属性路径数组，按层级顺序排列属性名
 * @returns 对应路径的属性值
 */
function getNestedValue(obj, pathArr) {
  return pathArr.reduce((currentLevel, currentKey) => {
    // 上一层不存在就直接返回undefined避免报错
    return currentLevel?.[currentKey]
  }, obj)
}

// 使用示例
const targetObj = getNestedValue(data, [section, lection])
console.log(Object.values(targetObj))
console.log(Object.keys(targetObj))

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