Question

请提出正确的做法。我有：

对象数组

类方法：

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;
}

同一类的另一个方法：

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

                   ...iterate here...

                  </div>
                </div>`
}

问题：如何使用此模板文字在{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>`
}

Answer 2

.forEach()不会返回任何有用的信息（实际上，它返回undefined）。尝试使用.map()：

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

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

2 个答案: