源内容可在此找到:https://github.com/LinkedInLearning/javascript-essential-training-2832077/tree/main/08_17。问题代码是这里的这个代码块:
import backpackObjectArray from "./components/data.js";
const content = backpackObjectArray.map((backpack)=>{
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
// Set article ID to the backpack.id property
backpackArticle.setAttribute("id", backpack.id);
backpackArticle.innerHTML=`
<figure class="backpack__image">
<img src=${backpack.image} alt="" />
</figure>
<h1 class="backpack__name">${backpack.name}</h1>
<ul class="backpack__features">
<li class="packprop backpack__volume">Volume:<span> ${
backpack.volume
}l</span></li>
<li class="packprop backpack__color">Color:<span> ${
backpack.color
}</span></li>
<li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
<li class="packprop backpack__pockets">Number of pockets:<span> ${
backpack.pocketNum
}</span></li>
<li class="packprop backpack__strap">Left strap length:<span> ${
backpack.strapLength.left
} inches</span></li>
<li class="packprop backpack__strap">Right strap length:<span> ${
backpack.strapLength.right
} inches</span></li>
<li class="feature backpack__lid">Lid status:<span> ${
backpack.lidOpen ? "open" : "closed"
}</span></li>
</ul>
`;
return backpackArticle;
})
const main = document.querySelector(".maincontent");
content.forEach((backpack)=>{
main.append(backpack);
}
)
本质上，是否有可能只是使用forEach循环输出相同的结果，当我们使用map()数组方法，这是为每个对象输出HTML文章?
如果您想的话，您绝对可以使用forEach循环，代码将略有不同。如果您喜欢新代码的外观，则不必使用map。
import backpackObjectArray from "./components/data.js";
const main = document.querySelector(".maincontent");
backpackObjectArray.forEach((backpack) => {
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
// Set article ID to the backpack.id property
backpackArticle.setAttribute("id", backpack.id);
backpackArticle.innerHTML = `
<figure class="backpack__image">
<img src=${backpack.image} alt="" />
</figure>
<h1 class="backpack__name">${backpack.name}</h1>
<ul class="backpack__features">
<li class="packprop backpack__volume">Volume:<span> ${
backpack.volume
}l</span></li>
<li class="packprop backpack__color">Color:<span> ${
backpack.color
}</span></li>
<li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
<li class="packprop backpack__pockets">Number of pockets:<span> ${
backpack.pocketNum
}</span></li>
<li class="packprop backpack__strap">Left strap length:<span> ${
backpack.strapLength.left
} inches</span></li>
<li class="packprop backpack__strap">Right strap length:<span> ${
backpack.strapLength.right
} inches</span></li>
<li class="feature backpack__lid">Lid status:<span> ${
backpack.lidOpen ? "open" : "closed"
}</span></li>
</ul>
`;
main.append(backpackArticle);
});
*Pseudo-code* Array.prototype.map(function(ea){return backpackArticle})将简单地创建一个新数组，并包含您在每次迭代中返回的内容。
您可以通过其他方式实现相同的功能，但是，正如已经说过的，需要更多的代码。实际上，在这种情况下的"意义"只是用更少的代码实现预期的结果。
我认为在你的例子中，它是显式地创建一个新数组，然后显式地使用forEach将每个backpackArticle附加到<main>。您可以跳过使用map创建新数组。
EDIT
对不起，我似乎没有仔细阅读你的问题。在您的情况下，是的，您可以将.map与.forEach交换，并直接追加创建的元素，而无需将它们存储在中间数组中。
但是，我将保留其余部分，也许有人会发现它有用。
作为一个比较一般的答案，"是的，您可以使用.forEach并获得相同的结果"。你也可以用.reduce来做。但是，如果您希望从源列表中获得结果列表(如您的示例中)，则.map是您的选择。
我将以更一般的方式回答你的问题，因为它在我看来，你是在问
.forEach之间的差异和.map。
Array.prototype上的每个方法都有一个目的。.map的目的是将函数投影(或"映射"，因此得名)到列表的所有项上。因此，如果你想从一个值列表到另一个值列表，你可以使用.map。
const sources = [1, 2, 3, 4, 5];
const results = sources.map(n => n + 1);
console.log(results); // logs [2, 3, 4, 5, 6]
要获得与.forEach相同的结果，您将拥有相同数量的变量，但您必须编程两个步骤:一个用于创建results数组，一个用于手动添加项目到它。
const sources = [1, 2, 3, 4, 5];
const results = [];
sources.forEach(n => {
results.push(n);
});
console.log(results);
通过直接比较，你可以很容易地看到使用.forEach会产生稍微多一些的代码，这些代码的声明性更少，而在风格上更命令式。
.reduce将函数映射到值，并将其累加到结果列表中。事实上，利用.reduce可以编写大量的操作。如果你感兴趣，可以搜索transducers，这里有几种不同语言的库。
回到使用reduce:
const sources = [1, 2, 3, 4, 5];
const results = sources.reduce((acc, n) => acc.concat(n + 1), []);
console.log(results); // logs [2, 3, 4, 5, 6]