如何在嵌套JS对象中查找所有visible键并批量修改其值？

递归的思路本身是完全可行的，你之前的实现大概率是没有处理数组、空值判断或者深层遍历的逻辑，下面是两种可直接用的实现方案：

方案1：直接修改原对象（适合不需要不可变数据的场景） #

直接遍历并修改原对象的所有visible属性，性能更高：

function setAllVisible(target, isVisible) {
  // 过滤空值和基础类型
  if (typeof target !== 'object' || target === null) return target
  // 处理数组
  if (Array.isArray(target)) {
    target.forEach(item => setAllVisible(item, isVisible))
    return target
  }
  // 处理普通对象
  for (const key in target) {
    if (key === 'visible') target[key] = isVisible
    // 递归处理子属性
    setAllVisible(target[key], isVisible)
  }
  return target
}

// 调用示例
// 全部展开
setAllVisible(yourNestedObj, true)
// 全部收起
setAllVisible(yourNestedObj, false)

方案2：返回新对象（适合React/Vue等需要不可变数据的框架场景） #

不会修改原对象，返回全新的嵌套对象，避免框架响应式失效的问题：

function setAllVisibleImmutable(target, isVisible) {
  if (typeof target !== 'object' || target === null) return target
  // 处理数组
  if (Array.isArray(target)) {
    return target.map(item => setAllVisibleImmutable(item, isVisible))
  }
  // 处理普通对象
  const newObj = {}
  for (const key in target) {
    newObj[key] = key === 'visible' ? isVisible : setAllVisibleImmutable(target[key], isVisible)
  }
  return newObj
}

// 调用示例
const newObj = setAllVisibleImmutable(yourNestedObj, true)

常见的递归实现错误原因 #

• 没有做target !== null的判断：typeof null返回值为object，未过滤会导致代码报错
• 未单独处理数组：数组的遍历逻辑和普通对象不同，直接用对象的遍历方式会遗漏子项
• 仅处理了当前层的visible属性，没有递归遍历所有子属性的值，导致深层嵌套的visible未被修改
• 框架场景下直接修改原对象，没有触发响应式更新，换成不可变版本的实现即可解决

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