JavaScript中不使用map()如何实现同等效果？map()的作用是什么？

1. map()方法的作用以及不使用map()的实现方式 #

map()在当前代码中的意义 #

Array.map()是数组的映射方法，核心能力是遍历原数组的每一个元素，按照回调函数的逻辑处理后，返回一个和原数组长度一致的新数组，且不会修改原数组。
在你提供的代码里，map()的作用就是把原数组backpackObjectArray中的每一个背包对象，一一对应转换为封装好内容的article DOM节点，最终得到一个全是DOM节点的新数组content，供后续插入页面使用。

不使用map()的实现方案 #

你可以手动初始化空数组，配合for...of循环或者普通for循环实现完全相同的效果，示例代码如下：

import backpackObjectArray from "./components/data.js";

const content = []
// 用for...of遍历原数组
for (const backpack of backpackObjectArray) {
  let backpackArticle = document.createElement("article");
  backpackArticle.classList.add("backpack");
  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>
  `;
  // 手动将生成的节点存入空数组
  content.push(backpackArticle)
}

const main = document.querySelector(".maincontent");
content.forEach((backpack)=>{
  main.append(backpack);
})

2. 是否可以仅用forEach实现相同效果 #

完全可以，甚至可以省去存储DOM节点的中间数组，生成节点的同时直接插入页面，代码更简洁，示例如下：

import backpackObjectArray from "./components/data.js";
const main = document.querySelector(".maincontent");

backpackObjectArray.forEach((backpack)=>{
  let backpackArticle = document.createElement("article");
  backpackArticle.classList.add("backpack");
  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);
})

两种方法的适用场景差异 #

• 如果你后续还需要对生成的article节点做批量操作（比如批量绑定事件、批量修改属性），用map()把节点存在数组里更方便后续调用
• 如果只是一次性生成节点插入页面，没有后续操作需求，用forEach更直接，没有冗余代码

内容的提问来源于stack exchange，提问作者yan