Vue.js中如何通过变量值作为键访问嵌套对象数据

问题场景 #

现有如下对象：

let item = {
    name: {
        first_name: "Mark",
        last_name: "James"
    }
}

已知可以通过item.name.first_name直接获取属性值，但如果想要用形如let key = "name.first_name"的字符串变量来访问对应的属性，该如何实现？

解决方案 #

方法1：拆分路径后循环访问 #

把字符串路径按.拆分为数组，逐层遍历对象访问属性：

let item = {
    name: {
        first_name: "Mark",
        last_name: "James"
    }
};
let key = "name.first_name";

// 拆分路径为单个属性的数组
const pathParts = key.split('.');
let targetValue = item;

// 逐层遍历访问
for (const part of pathParts) {
    // 可选：处理属性不存在的边界情况
    if (!targetValue || !(part in targetValue)) {
        targetValue = undefined;
        break;
    }
    targetValue = targetValue[part];
}

console.log(targetValue); // 输出 "Mark"

方法2：用Array.reduce()简化逻辑 #

利用数组的reduce方法链式访问属性，代码更简洁：

let item = {
    name: {
        first_name: "Mark",
        last_name: "James"
    }
};
let key = "name.first_name";

const getNestedProp = (obj, path) => {
    return path.split('.').reduce((current, part) => {
        // 用可选链操作符自动处理属性不存在的情况
        return current?.[part];
    }, obj);
};

console.log(getNestedProp(item, key)); // 输出 "Mark"

注意事项 #

• 如果属性名本身包含.（比如"user.info"作为属性名），这种按.拆分的方法会失效，需要更换分隔符或做特殊转义处理。
• 建议保留属性存在性检查，避免因访问不存在的属性抛出TypeError。

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