如何利用路径变量修改JS嵌套对象指定层级的属性？

要通过路径数组实现目标修改，核心是顺着路径逐层遍历到目标父对象，再修改其children属性，具体实现如下：

基础实现 #

直接遍历路径数组，逐层获取嵌套对象：

// 你的路径数组
const path = ['props', 'children', 'props'];
// 从根对象开始
let current = children;

// 遍历路径，深入到目标父节点
for (const key of path) {
  current = current[key];
}

// 此时current等价于children.props.children.props，直接修改children
current.children = 'test';

这段代码和你原来的children.props.children.props.children = 'test'效果完全一致，只是把固定的链式访问改成了动态遍历路径数组。

健壮性优化（避免报错） #

如果路径中某一步的节点不存在，直接遍历会抛出Cannot read property 'xxx' of undefined错误，可以加判断处理这种情况：

const path = ['props', 'children', 'props'];
let current = children;

for (const key of path) {
  // 检查当前节点是否为有效对象，避免报错
  if (!current || typeof current !== 'object') {
    console.error('路径无效，中间节点不存在或不是对象');
    break;
  }
  current = current[key];
}

// 确认到达有效父节点后再修改
if (current && typeof current === 'object') {
  current.children = 'test';
} else {
  console.error('无法定位到目标父对象');
}

原理说明 #

路径数组['props','children','props']对应了你原来链式访问中的每一层键，通过循环依次访问每个键，最终让current指向children.props.children.props这个对象，之后修改它的children属性就和直接写链式访问完全等价。

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