能否用纯JavaScript改写循环函数为高效版本？并优化showHide切换函数

首先，原代码里的async/await是多余的——forEach是同步执行的，不需要异步等待，这部分可以直接去掉。另外，每次调用showHide都手动传入要隐藏的元素列表，不仅冗余还容易出错（比如新增元素时要手动更新所有调用）。下面是几种更优的实现方式：

方式一：批量选择元素，避免手动传参 #

把所有要切换的内容div归类（比如加个统一的classcontent-item），通过选择器一次性获取，不需要每次手动指定隐藏列表：

完整代码 #

<div>
  <li onclick="showHide('c1')">Show One</li>
  <li onclick="showHide('c2')">Show Two</li>
  <li onclick="showHide('c3')">Show Three</li>
  <li onclick="showHide('c4')">Show Four</li>
  <div id="c1" class="content-item">Showing Item 1</div>
  <div id="c2" class="content-item">Showing Item 2</div>
  <div id="c3" class="content-item">Showing Item 3</div>
  <div id="c4" class="content-item">Showing Item 4</div>
</div>

<style>
.content-item:not(#c1) {
  display: none;
}
li {
  cursor: pointer;
}
</style>

<script>
function showHide(showId) {
  // 批量获取所有内容元素
  const allItems = document.querySelectorAll('.content-item');
  // 隐藏所有元素
  allItems.forEach(item => {
    item.style.display = 'none';
  });
  // 显示目标元素
  document.getElementById(showId).style.display = 'block';
}
</script>

方式二：利用CSS类切换（更高效，减少DOM操作） #

比起直接操作style.display，切换CSS类是更优的方式——浏览器对类的渲染优化更好，代码也更清晰：

完整代码 #

<div>
  <li onclick="showHide('c1')">Show One</li>
  <li onclick="showHide('c2')">Show Two</li>
  <li onclick="showHide('c3')">Show Three</li>
  <li onclick="showHide('c4')">Show Four</li>
  <div id="c1" class="content-item active">Showing Item 1</div>
  <div id="c2" class="content-item">Showing Item 2</div>
  <div id="c3" class="content-item">Showing Item 3</div>
  <div id="c4" class="content-item">Showing Item 4</div>
</div>

<style>
.content-item {
  display: none;
}
.content-item.active {
  display: block;
}
li {
  cursor: pointer;
}
</style>

<script>
function showHide(showId) {
  // 移除所有元素的active类
  document.querySelector('.content-item.active').classList.remove('active');
  // 给目标元素添加active类
  document.getElementById(showId).classList.add('active');
}
</script>

这种方式的优势：

• 仅需两次DOM操作（移除旧active、添加新active），比遍历所有元素隐藏更高效
• 样式逻辑完全放在CSS里，JS只负责控制状态，代码更易维护
• 新增内容元素时，只需添加content-item类，无需修改JS代码

方式三：事件委托（进一步优化，减少事件绑定） #

如果有大量切换按钮，逐个绑定onclick会冗余，用事件委托只需给父元素绑定一次事件：

完整代码 #

<div class="tab-container">
  <ul>
    <li data-target="c1">Show One</li>
    <li data-target="c2">Show Two</li>
    <li data-target="c3">Show Three</li>
    <li data-target="c4">Show Four</li>
  </ul>
  <div id="c1" class="content-item active">Showing Item 1</div>
  <div id="c2" class="content-item">Showing Item 2</div>
  <div id="c3" class="content-item">Showing Item 3</div>
  <div id="c4" class="content-item">Showing Item 4</div>
</div>

<style>
.content-item {
  display: none;
}
.content-item.active {
  display: block;
}
li {
  cursor: pointer;
}
</style>

<script>
// 给父容器绑定单次事件
document.querySelector('.tab-container').addEventListener('click', function(e) {
  // 判断点击对象是切换按钮
  if (e.target.tagName === 'LI') {
    const targetId = e.target.dataset.target;
    // 移除旧active类（可选链避免初始无active时报错）
    document.querySelector('.content-item.active')?.classList.remove('active');
    // 给目标元素添加active类
    document.getElementById(targetId).classList.add('active');
  }
});
</script>

这种方式的优势：

• 无论多少个切换按钮，仅需绑定一次事件，性能更优
• 动态新增按钮时，无需重新绑定事件，自动生效

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