javascript - 使用 Array.prototype.map(callback, index) 在模板文字中索引 [data-attribute]？

Question

假设我有一个对象数组，这些对象是从某个 api 的提取返回的。 我目前正在创建这样的标记...

var cardMarkup = objects.map(cardBuilder).join("");

function cardBuilder(meeting){
  var template = `<div class="meeting">${meeting.organizer}</div>`
  return template
}

我想为在 cardMarkup 中构建和吐出的每张卡片创建一个增量索引。 所以我最终得到的 DOM 看起来像这样......

<div class="meeting" data-index = 0 >${meeting.organizer}</div>
<div class="meeting" data-index = 1 >${meeting.organizer}</div>
<div class="meeting" data-index = 2 >${meeting.organizer}</div>

我的意思是我以后可以单独/具体地查询这些卡片 div，因为现在它们都具有相同的类名。也许这个问题需要一个单独的解决方案，我愿意接受所有建议!

Answer 1

查看map 的文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

您会看到传递给回调的第二个参数是索引，因此您只需要引用它并将其用作数据属性即可。

function cardBuilder(meeting, index){
  var template = `<div class="meeting" data-index="${index}">${meeting.organizer}</div>`
  return template
}