javascript - 无法弄清楚如何在不破坏网页其余部分的情况下删除数组项之间的逗号

Question

我正在创建一个图像数组，这些图像将被标记为使用按钮进行排序，我知道该数组正在被转换为一个字符串(？)，这就是为什么每组标签后的逗号显示在最后的item(每个数组项末尾的“}”)。我已经包含了我的代码以将数组拉入页面上的“<div id="app"></div>”。这里有替代方案吗？

我知道这个问题困扰着我，因为我从根本上缺乏对 javascript 的理解，所以我不理解我在网上找到的解决方案，这些解决方案不会破坏我目前设置的所有内容，我正在这里有一个截止日期——这段代码与我在这个网页上的其他代码一起工作，做很多其他的事情，当我使用我的解决方案时，我不了解将这个标签系统与其他代码集成在一起设法在网上找到。

const imgArr = [{
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 0,
    Sunshades: 1,
    GlassRailings: 1
  }
];

/* Gemeric function to display array content on screen */
const init = (ar) => ar.map(el => {
  return `<div class="MasonryImagesDiv"><img class="MasonryImage" alt="FillerImage" src=${
    el.src
  }>
      <div>MultiFamily: ${el.MultiFamily}<br>
        AllGlass: ${el.AllGlass}
  </div>`;
});

const sortByAllGlass = (a, b) => {
  if (a.AllGlass === b.AllGlass) {
    return 0;
  }
  return a.AllGlass > b.AllGlass ? 1 : -1;
};
    /* MultiFamily Sorter low to high */
const sortByMultiFamily = (a, b) => {
  if (a.MultiFamily === b.MultiFamily) {
    return 0;
  }
  return a.MultiFamily > b.MultiFamily ? 1 : -1;
};
    
/* Generate array sorted by ascending numbers */
const function1 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByAllGlass));
}
const function2 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByMultiFamily));
}

document.getElementById("app").innerHTML = init(imgArr);

Answer 1

正如@Octavian 所说，您缺少 src 属性周围的双引号 (")。此外，由于 array.map 总是返回一个数组，因此使用 array.entries 可能会让您更好。

const imgArr = [{
    src: "https://via.placeholder.com/150/0000FF/808080?text=Image1",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image2",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/FFFF00/000000?text=Image3",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/000000/FFFFFF/?text=Image4",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 0,
    Sunshades: 1,
    GlassRailings: 1
  }
];

const init = (ar) => {
  let $output = ''; // initialize an empty string
  for (const [index, el] of ar.entries()) {
    //append our template for each array item
    $output += `
    <div class="MasonryImagesDiv">
      <img class="MasonryImage" alt="FillerImage" src="${el.src}">
      <div>MultiFamily: ${el.MultiFamily}<br>
           AllGlass: ${el.AllGlass}
      </div>
    </div>`;
  }
  return $output; // return the final string
}

document.getElementById("app").innerHTML = init(imgArr);

<div id="app"></div>