JavaScript流程控制通过布尔逻辑干预DOM创建或显隐来实现按需显示，核心方式包括：①if/else动态增删节点；②三元运算符拼接HTML字符串；③class/dataset切换显隐状态，选择依据是初始化一次性判断还是高频响应式更新。
JavaScript 中的流程控制直接决定页面是否渲染某段内容，核心是用布尔逻辑干预 DOM 的创建或显隐。它不依赖框架，而是通过原生 JS 操作 HTML 结构或样式来实现“按需显示”。
用 if/else 控制元素插入与移除
最基础的方式是根据条件动态生成或销毁 DOM 节点。适合一次性判断、内容变化不频繁的场景。
- 先获取容器元素，如
const container = document.getElementById('app') - 用
if (condition)判断状态，再调用innerHTML或appendChild()插入对应结构 - 若需清除已有内容，可先执行
container.innerHTML = ''再重新写入 - 注意：频繁使用
innerHTML可能导致事件监听器丢失，推荐搭配document.createElement安全构建
用三元运算符拼接 HTML 字符串
适用于结构简单、嵌套浅的条件展示，代码紧凑，但不宜用于复杂 UI。
- 写法示例：
const html = isLoggedIn ? '<div>欢迎回来</div>' : '<button>登录</button>' - 赋值后统一写入：
container.innerHTML = html - 优点是直观；缺点是字符串拼接易出错，且无法自动绑定事件，需额外处理
用 class 或 dataset 控制显隐（推荐高频切换）
不增删 DOM，仅切换 CSS 状态，性能更好，适合按钮开关、折叠面板等交互频繁的场景。
立即学习“Java免费学习笔记（深入）”；
- 给目标元素添加类名，如
<div id="panel" class="hidden">... - JS 中根据条件切换：
panel.classList.toggle('hidden', !shouldShow) - 或用
dataset标记状态：panel.dataset.visible = 'true'，再配合 CSS 规则[data-visible="false"] { display: none; }
用逻辑与（&&）安全渲染 JSX 或模板字符串
在 React 或支持 JSX 的环境中，&& 是常用简写，但必须确保右侧是合法 JSX，不能是 0、空字符串等 falsy 值。
- 正确用法：
{ isLoading && <Spinner /> }—— 只有isLoading为真时才渲染组件 - 错误用法：
{ count && count }—— 若count是0，页面会显示 “0”，而非隐藏 - 稳妥替代：
{ count > 0 ? <List items={items} /> : null }
不复杂但容易忽略的是：条件渲染的本质不是“画出来”，而是“要不要让浏览器创建或保留这个节点”。选哪种方式，取决于你是在初始化时做一次判断，还是需要响应式地持续响应状态变化。
