如何通过可复用函数按点分隔键路径动态修改嵌套JSON值

问题原因 #

你的代码失效的核心原因是：JavaScript 中数字、字符串、布尔值这类基础类型是值传递，你遍历路径把最后一层属性的值赋值给临时变量configKey后，再给configKey赋值只会修改这个临时变量本身，不会同步修改原config对象的对应属性。要修改原对象，需要先定位到目标键的父级对象，再对父级对象的目标键赋值。

正确实现代码 #

function setNestedValue(config, path, value) {
  const keys = path.split('.')
  // 遍历到倒数第二层，拿到目标键的父级对象
  let currentParent = config
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i]
    // 可选容错逻辑：如果中间路径不存在，自动创建空对象，可根据需求删除
    if (!currentParent[key]) currentParent[key] = {}
    currentParent = currentParent[key]
  }
  // 对父级对象的目标键直接赋值，修改会同步到原对象
  const lastKey = keys[keys.length - 1]
  currentParent[lastKey] = value
}

// 调用示例
const config = {
  string: "Hi",
  number: 0,
  boolean: false,
  object: {
    subString: "Hello",
    subNumber: 1,
    subBoolean: true,
    subObject: {
      subSubString: "Hello World"
    },
    subArray: ["-1", "-2", "-3"]
  },
  array: ["1", "2", "3"]
}
// 修改object.subNumber为5
setNestedValue(config, "object.subNumber", 5)
console.log(config.object.subNumber) // 输出5

补充说明 #

该实现也支持数组下标操作，比如要把object.subArray的第二个元素改为-test，直接传路径object.subArray.1即可正常生效。

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