如何从cards数组获取'first'项及遍历cardInfo数组展示cards中所有元素？

嘿，让我来帮你搞定这两个问题！

你要注意，cards是一个数组（看它外面的方括号[]就知道啦），不是单个对象，所以直接写item.cards.first是找不到对应属性的。正确的做法是先访问数组里的第一个元素（索引为0），再去取first属性：

item.cards[0].first

如果你的cards数组以后可能会有多个对象，就需要用循环或者数组方法来逐个获取啦。

要把cards里的所有元素都展示出来，你需要做两层遍历：先遍历外层的cardInfo数组，再遍历每个cardInfo项里的cards数组。这里用嵌套的map方法就很合适，具体步骤如下：

1. 先遍历cardInfo数组，处理每个分组
2. 对每个分组里的cards数组再做一次map，把每个卡片对象的属性转换成对应的h2标签
3. 把嵌套map生成的数组拼接成字符串，插入到模板里

下面是修正后的完整代码：

const cardInfo = [
  {
    name: "Something",
    cards: [
      { first: "Something1", second: "Something2", third: "Something3" },
      // 可以加个测试卡片，看看遍历效果
      { first: "Another1", second: "Another2", third: "Another3" }
    ]
  }
]
window.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.wrapper');
  let displayCards = cardInfo.map((item) => {
    // 遍历当前分组的cards数组，生成每个卡片的HTML
    const cardElements = item.cards.map(card => `
      <div class="card">
        <h2>${card.first}</h2>
        <h2>${card.second}</h2>
        <h2>${card.third}</h2>
      </div>
    `).join(''); // 把数组转成字符串
    
    return `
      <div class="card-group">
        <h1>${item.name}</h1>
        ${cardElements}
      </div>`;
  });
  displayCards = displayCards.join("");
  wrapper.innerHTML = displayCards;
});

<div class="wrapper"></div>

额外小提示：如果以后cards里的对象属性不固定（比如有的多了fourth属性），可以用Object.values(card)来遍历所有属性值，这样代码会更灵活：

const cardElements = item.cards.map(card => `
  <div class="card">
    ${Object.values(card).map(value => `<h2>${value}</h2>`).join('')}
  </div>
`).join('');

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