如何修复 for 循环在 JavaScript 中的字符串数组中没有得到结果

Question

我正在创建一个音乐播放器，但遇到了 for 循环和数组的问题。我的 main.js 文件中有以下函数

function CreateDatabaseArtists() {
  for (n = 0; n < DatabaseArtists.length+1; n++) {
    if (DatabaseArtists[n.toString()].name === "") {} else {      
      let NewArtistBtn = document.createElement("div");
      NewArtistBtn.id = DatabaseArtists[n].artistgroup;
      // NewArtistBtn.onclick = function() {OpenArtist(NewArtistBtn.id);};
      NewArtistBtn.classList.toggle("column");
      NewArtistBtn.setAttribute("style", "word-wrap: break-word; float: none; width: 150px; text-align:center;align-items:center; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;");           
      let ArtistIMG = document.createElement("img");
      if (DatabaseArtists[n].ArtistArt == "") {
        ArtistIMG.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p298.png";
        ArtistIMG.style.borderRadius = "50%";
      } else {
        ArtistIMG.src = DatabaseArtists[n].ArtistArt;
        ArtistIMG.style.borderRadius = "50%";
      }
      ArtistIMG.style.width = "150px"; ArtistIMG.style.height = "150px";
      NewArtistBtn.appendChild(ArtistIMG);
      let text = document.createElement("p");
      text.innerHTML = "ahhh-humbug";
      // DatabaseArtists[b].name;
      ArtistIMG.setAttribute("aria-label", text.innerHTML);
      NewArtistBtn.appendChild(text);
      document.getElementById("artists").appendChild(NewArtistBtn);
    }
  }
}

还有带有

的部分

for (n = 0; n < DatabaseArtists.length+1; n++) {
        if (DatabaseArtists[n.toString()].name === "") {}

一直失败，我收到一条错误消息，说它找不到“name”的变量，即使在数组中它是"name": "AJR", "explicit": false, "artistgroup": "ajr", "ArtistArt": "" 我该怎么办？

Answer 1

for (n = 0; n < DatabaseArtists.length+1; n++)

您正在遍历数组的末尾，因此最后一个循环将尝试访问undefined 上的name 属性。索引应该从0 到length - 1。

Answer 2

诚实的建议，为什么不拆分应用程序，这样维护起来更容易。此外，如果您使用 forEach 方法，则不必像使用传统的 for 循环那样担心索引。

const defaultStyle = "word-wrap: break-word; float: " +
  "none; width: 150px; text-align:center;align-items:center; " +
  "display: inline-block; white-space: nowrap; " +
  "overflow: hidden; text-overflow:ellipsis;";
const defaultImg = 'https://iplock.weebly.com/uploads/9/5/7/3/95731436/p298.png';
const appRoot = document.getElementById("artists");


const createImage = artist => {
  const img = document.createElement("img");
  const source = artist.ArtistArt === '' ? defaultImg : artist.ArtistArt;

  img.src = source;
  img.style.borderRadius = "50%";
  img.style.width = "150px";
  img.style.height = "150px";

  return img;
};


const createButton = artist => {
  const btn = document.createElement("div");
  const img = createImage(artist);
  const ptag = document.createElement("p");

  ptag.innerHTML = "ahhh-humbug";
  btn.id = artist.artistgroup;
  btn.classList.toggle("column");

  btn.setAttribute("style", defaultStyle);
  btn.appendChild(img);
  btn.appendChild(ptag);

  return btn;
};


const createDatabaseArtists = () => {
  databaseArtists.forEach(artist => {
    if (artist.name !== '') {
      appRoot.appendChild(createButton(artist));
    }
  });
};