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

Question

我对js比较陌生，试图弄清楚如何在这个函数中使用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

我认为你不需要在你的情况下使用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>`
}, '')

Answer 2

试试这个。此外，封装函数以获得更具可读性的代码也是一个好主意。在这里，我没有写一个很长的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 3

Array.map()用于在可迭代集合上迭代并基于原始值创建新值，然后返回它． 在你的情况下，你没有使用map的任何目的，你应该使用一个简单的for循环，或者如果你真的想使用一个函数，就使用.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提供函数，而是一个三元条件语句。