JavaScript：如何实现嵌套对象的布尔状态切换？

你可以通过拆分ID的路径字符串来通用处理嵌套对象的状态切换，不用写大量的if-else判断。核心思路是把类似z.aa这种ID拆成路径数组['z', 'aa']，然后逐层遍历对象找到目标属性，切换它的布尔值。

优化后的代码 #

function App() {
  const [state, setState] = useState({
    a: false,
    z: { aa: false, bb: false },
  });

  const handler = (e) => {
    const id = e.target.id;
    // 深度克隆原状态，避免直接修改
    const newState = JSON.parse(JSON.stringify(state));
    // 拆分ID为路径数组
    const path = id.split('.');
    // 逐层定位到目标属性的父对象
    let current = newState;
    for (let i = 0; i < path.length - 1; i++) {
      current = current[path[i]];
    }
    // 切换目标属性的布尔值
    current[path[path.length - 1]] = !current[path[path.length - 1]];
    
    setState(newState);
  };

  return (
    <div onClick={(e) => handler(e)}>
      <input type="checkbox" id="a" checked={state.a} />
      all
      <input type="checkbox" id="z.aa" checked={state.z.aa} />A
      <input type="checkbox" id="z.bb" checked={state.z.bb} />B
    </div>
  );
}

关键逻辑说明 #

1. 路径拆分：用split('.')把ID拆成分层数组，比如z.bb会被拆成['z', 'bb']
2. 逐层定位：通过循环遍历路径数组，从根对象开始逐步深入到目标属性的父层级
3. 状态切换：修改最后一层属性的布尔值，完成状态翻转

这种方法支持任意深度的嵌套对象，不管嵌套多少层都不用额外编写判断逻辑，扩展性更强。

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