如何通过字符串设置JavaScript对象的子级属性

你遇到的问题是因为JavaScript会把['player.type']当成一个完整的字符串属性名，而不是解析成嵌套路径。要修改player.type这种子属性，有两种常用方案：

1. 手动嵌套展开（适合层级少的场景） #

直接逐层展开对象，只修改目标子属性，保留其他原有属性：

setPlayer({
  ...playerDetails, // 展开外层所有属性
  player: {
    ...playerDetails.player, // 展开player对象的原有属性
    type: e.target.value // 覆盖type属性
  }
})

这种方式直观，适合固定层级的嵌套结构，不需要额外工具函数。

2. 动态解析路径（适合不确定层级或路径是动态字符串的场景） #

如果你的key是类似'player.type'的动态路径字符串，可以写一个工具函数来递归处理嵌套更新：

// 工具函数：根据路径更新嵌套属性，返回新对象
function updateNested(obj, path, value) {
  const keys = path.split('.');
  const lastKey = keys.pop();
  // 复制原对象，避免修改原数据
  const newObj = {...obj};
  let current = newObj;

  // 逐层创建嵌套对象的副本，直到最后一层
  keys.forEach(key => {
    current[key] = {...current[key]};
    current = current[key];
  });

  // 更新最后一层的目标属性
  current[lastKey] = value;
  return newObj;
}

// 调用方式
setPlayer(updateNested(playerDetails, 'player.type', e.target.value));

这个函数可以处理任意层级的嵌套路径，比如'player.stats.goals'这种多层结构也能正常工作，而且完全遵循不可变更新的原则。

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