如何在此设置中使用 array.map()？

Question

我对 js 比较陌生，并试图弄清楚如何在这个 function 中使用 map()。 我很卡住..有什么想法吗？

我很困惑，因为在这种情况下 map() 用于迭代 inititalList，我真的不需要返回值，我认为..？

const addListItems = () => {     
  for (var i = 0; i < initialList.length; i++) {      
    if (i === 0) {          
      listWrapper.innerHTML += `<li class=active data-key=${initialList[i]}>${initialList[i]}</li>`;
    } else {
      // convert to template literals/strings
      listWrapper.innerHTML += `<li data-key=${initialList[i]}> ${initialList[i]} </li>`;
    }
};

我试过这个，但有些不对劲：

const addListItems = () => {
      let map = initialList.map(item{i === 0 ? listWrapper.innerHTML += <li class=active data-key=${initialList[i]}>${initialList[i]}</li>; :
 listWrapper.innerHTML += <li data-key=${initialList[i]}> ${initialList[i]} </li>; })

};

Answer 1

尝试这个。 封装你的函数以获得更易读的代码也是一个好主意。 在这里，我没有写一个长的 html 片段，而是在我的循环中说英语。

 const formatFirstListItem = (item) => item.innerHTML += `<li class=active data-key=${item}>${item}</li>`; const formatListItem = (item) => item.innerHTML += `<li data-key=${item}> ${item} </li>`; function addListItems (list){ return list.map((item, index)=> { if(index === 0) return formatFirstListItem(item) return formatListItem(item) }) }

Answer 2

Array.map()用于迭代可迭代集合并基于原始集合创建一个新值，然后将其返回。 在您的情况下，您没有任何使用map的目的，您应该使用简单的 for 循环，或者如果您真的想使用 function 只需使用.forEach ：

initialList.forEach((item, index) => index === 0 ? listWrapper.innerHTML += `<li class=active data-key=${item}>${item}</li>` : listWrapper.innerHTML += `<li data-key=${item}> ${item} </li>`);

您的解决方案不起作用，因为您没有向 .map 提供.map ，而是提供三元条件语句。

Answer 3

我认为您不需要在您的情况下使用map() ，因为map()接收到一个回调，该回调会在每个循环中返回一些内容，因此map()方法返回一个与迭代数组长度相同的新数组。 这就是map()的目的。

在您的情况下，您想返回一个HTML string ，我建议您只使用forEach ：

initialList.forEach((item, index) => {
  const element = index === 0 ? `<li class=active data-key=${item}>${item}</li>` : `<li data-key=${item}>${item}</li>`
  listWrapper.innerHTML += element
})

或者如果你对 ES6 感兴趣，你可以尝试reduce()代替：

listWrapper.innerHTML = initialList.reduce((acc, cur, index) => {
  return index === 0 ? acc + `<li class=active data-key=${cur}>${cur}</li>` : acc + `<li data-key=${cur}>${cur}</li>`
}, '')