遍历嵌套对象数组，获取指定firstName对应address并解决undefined问题

你的代码返回undefined核心原因是**forEach方法不会返回任何有效结果**，它仅用于遍历数组执行回调逻辑，所以renderPerson和renderAddress函数没有返回值，自然输出undefined。另外，你需要精准定位firstName为Max的条目，而非遍历整个数组。

修正步骤与代码实现 #

1. 精准定位Max的条目 #

使用Array.find()方法直接找到匹配的对象，这比forEach更高效且符合需求：

const maxEntry = person.find(item => item.firstName === 'Max');

2. 生成带折叠子链接的HTML #

可以利用HTML原生的<details>和<summary>标签实现点击展开子链接的效果，无需额外JS事件处理：

const renderMaxAddressLinks = () => {
  if (!maxEntry) return '<li>未找到匹配用户</li>';
  
  // 生成地址子链接
  const addressLinks = maxEntry.address.map((addr, index) => {
    const key = Object.keys(addr)[0];
    const value = addr[key];
    return `<li><a href="#${key}-${value}">${key}: ${value}</a></li>`;
  }).join('');

  // 组装主链接与折叠面板
  return `
    <li>
      <details>
        <summary><a href="#max">${maxEntry.firstName} ${maxEntry.secondName}</a></summary>
        <ul>${addressLinks}</ul>
      </details>
    </li>
  `;
};

3. 渲染到页面 #

const html = renderMaxAddressLinks();
document.getElementById("display").innerHTML = html;

完整代码示例 #

<ul id="display"></ul>

<script>
const person = [
  {
    firstName: 'Alex',
    secondName: 'Lexi',
    address: [
      { place: 'California'},
      { pin: 1233 }
    ]
  },
  {
    firstName: 'Max',
    secondName: 'Lui',
    address: [
      { place: 'New York' },
      { pin: 3455 }
    ]
  }   
];

const maxEntry = person.find(item => item.firstName === 'Max');

const renderMaxAddressLinks = () => {
  if (!maxEntry) return '<li>未找到匹配用户</li>';
  
  const addressLinks = maxEntry.address.map((addr, index) => {
    const key = Object.keys(addr)[0];
    const value = addr[key];
    return `<li><a href="#${key}-${value}">${key}: ${value}</a></li>`;
  }).join('');

  return `
    <li>
      <details>
        <summary><a href="#max">${maxEntry.firstName} ${maxEntry.secondName}</a></summary>
        <ul>${addressLinks}</ul>
      </details>
    </li>
  `;
};

document.getElementById("display").innerHTML = renderMaxAddressLinks();
</script>

关键修改点说明 #

• 替换forEach为find：find会返回第一个匹配条件的数组元素，直接拿到Max的完整数据，避免无意义遍历。
• 利用原生HTML控件：<details>和<summary>是原生折叠组件，无需额外JS事件监听即可实现点击展开/收起子链接的效果。
• 动态生成子链接：通过map遍历address数组，将每个地址项转为对应的链接元素，最后用join('')拼接成完整的HTML字符串。

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