JS 中的 console.log 與 return 的問題

Question

我在這里遇到了一些問題，希望能得到一些幫助。 我有以下 function 與 for 循環以及模板文字。 如果我使用 console.log，我會得到我期望的結果（發布在下面）但是如果我嘗試返回它，我會得到 undefinedundefined 或 object Object。 另外，我在這里寫它的方式我無法從我的 return 語句中的 for 循環訪問 [i]。 有人可以在這里給我一些指示嗎？

renderPlaylistCard() {
  for (let i = 0; i < this.tracks.length; i++) {
    console.log(this.name, this.tracks[i].title, this.tracks[i].artist)
  }
  let n;
  for (n = 0; n < this.tracks; n++) {
    console.log(this.name, this.tracks[n].title, this.tracks[n].artist)
  }
  return `            
      <div data-id=${this.id}>
      <h4><li>Playlist Name: ${this.name}</h4></li> 
      <h4><li>Title: ${this.tracks[i].title}</h4></li> 
      <h4><li>Artist: ${this.tracks[i].artist}</h4></li> 

     </div> </li>
      `
}
}

這是我有 console.logged 的預期結果

 Country Songs Fourth Song Kristy
 Country Songs First Song Randy
 Pop Songs Third Song Brady
 Pop Songs Hip Hop Horray Randy
 Pop Songs Second Song Kristy

如果我刪除這一行，我將不再收到"undefinedundefined"錯誤，所以我猜我在那里也做錯了什么。 任何幫助將不勝感激！

for(n=0; n<this.tracks; n++){ // when this is removed the undefinedundefined error is no more. 

Answer 1

增量器i的范圍在 for 循環的該塊內，這就是為什么您無法在外部訪問它的原因。 我相信您嘗試做的事情可以通過以下方式完成：

renderPlaylistCard() {
  let output = "";

  for(let i=0; i < this.tracks.length; i++){
    output += `
    <div data-id=${this.id}>
      <h4><li>Playlist Name: ${this.name}</h4></li> 
      <h4><li>Title: ${this.tracks[i].title}</h4></li> 
      <h4><li>Artist: ${this.tracks[i].artist}</h4></li> 
    </div>`;
  }

  return output;
}

Answer 2

循環應該是for(n=0; n<this.tracks.length; n++){我認為你遺漏了length 。 您需要按照定義n的方式定義i 。