JavaScript如何通过路径指针动态修改多层嵌套对象属性值

检索关键词 #

你要找这类场景的参考资料，可以搜以下关键词：

• JS 深度设置嵌套对象属性
• 对象属性路径解析
• deep set nested property
• nested object path access

通用实现方案 #

核心逻辑非常统一：把路径字符串按分隔符拆成属性名数组，逐层向下遍历对象直到目标属性的上一层，最后完成赋值，支持任意深度的嵌套，也可以按需配置中间路径不存在时是否自动创建空对象。

原生JS实现（无依赖） #

function setByPath(obj, path, value, autoCreateNested = true) {
  const keys = path.split('/').filter(Boolean);
  if (keys.length === 0) return obj;

  let cursor = obj;
  // 遍历到倒数第二层节点
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (cursor[key] == null) {
      if (!autoCreateNested) throw new Error(`路径 ${path} 不存在`);
      cursor[key] = {};
    }
    cursor = cursor[key];
  }
  // 赋值最终属性
  cursor[keys.at(-1)] = value;
  return obj;
}

// 调用示例
const enemyData = {
  "id_": "1",
  "name": "Enemy x",
  "image": "image.png",
  "stats": {
    "level": 1,
    "attack": 5,
    "defense": 0
  }
};
// 修改第二层属性
setByPath(enemyData, 'stats/attack', 20);
console.log(enemyData.stats.attack) // 20

// 修改第四层属性，自动创建中间缺失的节点
setByPath(enemyData, 'stats/buff/attack/delta', 5);
console.log(enemyData.stats.buff.attack.delta) //5

如果需要读取对应路径的属性，逻辑类似，逐层遍历取值即可，遇到空节点直接返回undefined就行。

工程化场景方案 #

如果项目里已经引入了Lodash这类通用工具库，不需要自己写实现，直接用内置的_.set方法即可，已经覆盖了所有边界异常处理，稳定性更高：

import _ from 'lodash';
// 路径转成数组即可适配/分隔的格式
const editPath = 'stats/defense';
_.set(enemyData, editPath.split('/'), 10);

注意：绝对不要用eval实现路径访问，只要路径内容可能来自外部输入，就会存在严重的代码注入风险。

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