JavaScript如何无需提前检查父属性直接设置嵌套动态键值

原生JS根本没有能直接跳过中间层检查、一步写完多层嵌套动态属性赋值的内置语法。你要是直接跑obj[key1][key2] = 'randomvalue'，只要key1在obj上不存在，obj[key1]返回的就是undefined，给undefined挂属性直接抛TypeError，根本跑不通。

根据你的使用场景选下面的方案就行：

• 只需要处理两层嵌套的话，两行代码搞定
  用ES2020的逻辑空赋值??=给父级做兜底就够了，这个运算符只有在属性值是null或者undefined的时候才会赋值为空对象，不会覆盖已经存在的合法值：

  let key1 = 'firstkey'
  let key2 = 'secondkey'
  let obj = {}
  
  obj[key1] ??= {}
  obj[key1][key2] = 'randomvalue'
  // 跑完obj就是你要的 { firstkey: { secondkey: 'randomvalue' } }
  

  别图省事写obj[key1] = obj[key1] || {}，这破写法会把0、空字符串、false这类本来合法的假值全给覆盖成空对象，坑得很，用??=才是对的。

• 经常要写多层嵌套赋值的话，封装个通用工具函数一劳永逸
  不管套3层还是4层，函数会自动逐层检查，遇到不存在的属性就初始化为空对象，不用你手动写一堆判断：

  function setNested(target, keyPath, value) {
    let current = target
    // 遍历到倒数第二个key，逐层补空对象
    for (let i = 0; i < keyPath.length - 1; i++) {
      const key = keyPath[i]
      current[key] ??= {}
      current = current[key]
    }
    // 最后一级塞值
    current[keyPath.at(-1)] = value
    return target
  }
  
  // 调用的时候把路径按顺序放数组里传进去就行
  setNested(obj, [key1, key2], 'randomvalue')
  

别找什么魔法单行写法了，所有能实现这个效果的方案，本质都是在赋值前做了中间层的空值初始化，只是封装程度不一样而已，JS原生本身不会自动给你创建不存在的中间对象。

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