高效利用JavaScript map 方法进行条件渲染：提取数组中指定索引的元素

function fetchData() {
  fetch("https://api.github.com/repos/vercel/next.js/issues")
    .then((response) => {
      if (!response.ok) {
        throw new Error("网络请求失败");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
      const html = data
        .map((user) => {
          return `
            <ul id="myUL">
              <div style="min-height: 50px;">
                <div class="card card-body" style="width: 100%;">
                  <li>
                    <a href="#">
                      ${user.title}

                      <!-- 渲染第一个标签 -->
                      <button>
                        ${user.labels.map((label, index) => {
                          if (index === 0) {
                            return label.name;
                          }
                          return ''; // 对于非第一个标签，返回空字符串
                        }).join('')}
                      </button>

                      <!-- 渲染第二个标签 -->
                      <button>
                        ${user.labels.map((label, index) => {
                          if (index === 1) {
                            return label.name;
                          }
                          return ''; // 对于非第二个标签，返回空字符串
                        }).join('')}
                      </button>

                      <!-- 渲染第三个标签 -->
                      <button>
                        ${user.labels.map((label, index) => {
                          if (index === 2) {
                            return label.name;
                          }
                          return ''; // 对于非第三个标签，返回空字符串
                        }).join('')}
                      </button>
                    </a>
                  </li>  
                </div>
              </div>
            </ul>
          `;
        })
        .join(""); // 将所有生成的HTML字符串连接起来
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch((error) => {
      console.error("获取数据时发生错误:", error);
    });
}

fetchData();

// 辅助的搜索功能（与核心问题无关，但保留以保持上下文）
function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}