如何在此設置中使用 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>`
}, '')