使用Vanilla JS与模板字面量遍历含数组属性的对象数组时的图标显示问题

嘿，我之前刚踩过这个坑！根据你的描述，大概率是你在处理技能图标数组的时候，没有把所有图标HTML片段累加起来，反而每次都覆盖了之前的内容，最后就只剩最后一个图标啦。

常见错误原因 #

比如你可能写了类似这样的代码：

// 错误示例：每次赋值而非累加
let skillIcons = '';
project.skillIcons.forEach(icon => {
  skillIcons = `<img src="${icon}" alt="技能图标">`;
});

这里每次循环都会把skillIcons重新赋值成当前图标的HTML，之前的内容都被覆盖了，最后自然只能看到最后一个图标。

正确的两种解决方法 #

方法1：用累加的方式拼接图标HTML

初始化一个空字符串，然后遍历图标数组时用+=把每个图标的HTML片段加进去：

portfolioProjects.forEach(project => {
  let skillIconsHtml = '';
  // 遍历每个图标，累加HTML片段
  project.skillIcons.forEach(icon => {
    skillIconsHtml += `<img src="${icon}" alt="技能图标" class="skill-icon">`;
  });
  
  // 把完整的图标字符串插入模板字面量
  const projectCard = `
    <div class="portfolio-project">
      <h2>${project.title}</h2>
      <div class="skills-used">${skillIconsHtml}</div>
    </div>
  `;
  
  // 渲染到页面
  document.getElementById('portfolio').insertAdjacentHTML('beforeend', projectCard);
});

方法2：用map + join更简洁实现

这是我更推荐的写法，代码更简洁，可读性也更高：

portfolioProjects.forEach(project => {
  // 用map把每个图标转成HTML字符串，再用join拼接成完整的字符串
  const skillIconsHtml = project.skillIcons.map(icon => {
    return `<img src="${icon}" alt="${icon.split('.')[0]}技能图标" class="skill-icon">`;
  }).join(''); // 一定要用join('')，否则数组转字符串会自带逗号分隔符！
  
  const projectCard = `
    <div class="portfolio-project">
      <h2>${project.title}</h2>
      <div class="skills-used">${skillIconsHtml}</div>
    </div>
  `;
  
  document.getElementById('portfolio').insertAdjacentHTML('beforeend', projectCard);
});

这里要注意：map返回的是一个数组，如果直接插入模板字面量，数组会自动转成字符串，元素之间会加逗号，所以必须用join('')把数组元素拼接成一个无分隔符的字符串。

如果这样调整后还是有问题，可以检查下图标的路径是否正确，但根据你的描述，核心问题应该就是字符串拼接的方式不对～

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