javascript - 如何遍历模板文字中的对象数组并为每个对象使用函数？

Question

请指教如何做对。我有:

1. 对象数组

2. 类方法:

   buildItem(obj){
      let item = `<div class="${obj.name}">
                    <h1 class="main-title">${obj.title}<h1>
                    <img src="${obj.img}" alt="${obj.alt}">
                  </div>`
      return item;
   } 
   

3. 同类的另一个方法:

   buildMarkup(arrayOfObjects){                      
     let markup = `<div class="container">
                     <div class="${title}" id="${id}">
   
                      ...iterate here...
   
                     </div>
                   </div>`
   }
   

4. 问题:如何在 p.3 中通过 arrayOfObjects 进行迭代并使用此模板文字调用 buildItem(obj)？或者也许有更好的方法来做到这一点？这样的事情不起作用:

    buildMarkup(arrayOfObjects){                      
     let markup = `<div class="container">
                     <div class="${title}" id="${id}">                           
                       ${arrayOfObjects.forEach(obj => {
                         this.buildItem(obj)    
                         })}
                     </div>
                   </div>`
   }
   

Answer 1

人们使用 map和 join为此:

${arrayOfObjects.map(obj => this.buildItem(obj)).join("")}

join 将 map 创建的数组条目与它们之间的给定字符串连接起来。由于您的项目字符串是 div，因此我假设您不希望它们之间有任何内容，但如果您愿意，可以使用空格或换行符。不过，您可能希望将某种字符串传递给它，因为它的默认值是 ","，您可能不需要。

如果 buildItem 不关心调用它时 this 是什么，并且只使用它的第一个参数(这两个参数对于您的问题中的参数都是正确的)，您可以省略箭头函数并将 buildItem 直接传递给 map:

${arrayOfObjects.map(this.buildItem).join("")}

在上下文中:

buildMarkup(arrayOfObjects){                      
  let markup = `<div class="container">
                  <div class="${title}" id="${id}">                           
                    ${arrayOfObjects.map(this.buildItem).join("")}
                  </div>
                </div>`
}