我怎樣才能在不使用map()陣列方法的情況下實作同樣的結果？在這里使用map()陣列方法的意義到底是什么？

源內容可在此找到。https://github.com/LinkedInLearning/javascript-essential-training-2832077/tree/main/08_17。有關的代碼是這里的這個塊：

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

const content = backpackObjectArray.map((backpack)=>{

  let backpackArticle = document.createElement("article") 。
  backpackArticle.classList.add("backpack") 。

  //設定文章ID為backpack.id屬性。
  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
      backpack.volume
    }l</span></li>
    <li class="packprop backpack__color">Color:<span> ${ backpack.color
      backpack.color
    }</span></li>
    <li class="backpack__age">年齡:<span> ${backpack.backpackAge()} 天齡</span></li>
    <li class="packprop backpack__pockets">口袋數量：<span> ${
      backpack.pocketNum
    }</span></li>
    <li class="packprop backpack__strap">左肩帶長度：<span> ${
      backpack.tagLength.left
    }英寸</span></li>
    <li class="packprop backpack__strap">右背帶長度：<span> ${
      backpack.tagLength.right
    }英寸</span></li>
    <li class="feature backpack__lid">蓋子狀態：<span> ${背包.蓋子打開？
      backpack.lidOpen ? "open" : "closed"。
    }</span></li>
  </ul>
  `。
  return backpackArticle;
})



const main = document.querySelector(".maincontent") 。

content.forEach((backpack) =>{
  main.append（backpack）。
}
)

實質上，是否可以只使用forEach回圈來輸出與我們使用map()陣列方法時相同的結果，即為每個物件輸出一篇HTML文章？

uj5u.com熱心網友回復：

如果你想的話，你絕對可以使用forEach回圈，只是代碼會有一些不同。如果你喜歡新代碼的樣子，使用map是沒有必要的。

import backpackObjectArray from "./components/data.js"_span>。

const main = document.querySelector(" .maincontent")。

backpackObjectArray.forEach((backpack) =>/span> {
  let backpackArticle = document.createElement("article") 。
  backpackArticle.classList.add("backpack") 。

  //設定文章ID為backpack.id屬性。
  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
        backpack.volume
      }l</span></li>
      <li class="packprop backpack__color">Color:<span> ${ backpack.color
        backpack.color
      }</span></li>
      <li class="backpack__age">年齡:<span> ${backpack.backpackAge()} 天齡</span></li>
      <li class="packprop backpack__pockets">口袋數量：<span> ${
        backpack.pocketNum
      }</span></li>
      <li class="packprop backpack__strap">左肩帶長度：<span> ${
        backpack.tagLength.left
      }英寸</span></li>
      <li class="packprop backpack__strap">右背帶長度：<span> ${
        backpack.tagLength.right
      }英寸</span></li>
      <li class="feature backpack__lid">蓋子狀態：<span> ${背包.蓋子打開？
        backpack.lidOpen ? "open" : "closed"。
      }</span></li>
    </ul>
    `;

  main.append（backpackArticle）。
});

uj5u.com熱心網友回復：

*Pseudo-code* Array.prototype.map(function(ea){return backpackArticle})將簡單地創建一個新的陣列，并在每次迭代中包括你回傳的東西。

你可以通過其他方式實作同樣的事情，但是，正如已經說過的，需要更多的代碼。實際上，在這種情況下，"意義 "只是用更少的代碼實作預期的結果。

我認為在你的例子中，它是明確地創建一個新的陣列，然后明確地將每個backpackArticle附加到<main>使用forEach。你可以跳過用map創建新陣列的程序。

uj5u.com熱心網友回復：

編輯

對不起，我似乎沒有仔細閱讀你的問題。在你的案例中，是的，你可以將.map與.forEach互換，并直接追加創建的元素，而無需將它們存盤在一個中間陣列中。

然而，我將保留其余部分，也許有人發現它是有用的。

我將以一種更普遍的方式來回答你的問題，因為 在我看來，你問的是.forEach和.map之間的差異。 和.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]/span>

標籤：

上一篇：未顯示用戶名文本輸入

下一篇：使用forEach獲取一個物件的屬性，盡管它不存在