在前端开发场景中，后端接口返回的数据往往包含嵌套数组的复杂对象，我们需要从中提取有效数据并渲染为动态HTML内容，这是构建交互页面的常见需求。本文将围绕这一需求展开实践讲解。
核心前置知识
要完成从包含数组的对象中提取数据并构建动态HTML，需要先掌握两个基础概念：
- 对象属性访问：通过
对象.属性名或者对象['属性名']的方式可以获取到对象中存储的对应数据，当属性值是数组时，返回的就是数组本身。 - 数组遍历方法：常用
forEach、map方法遍历数组，获取数组中的每一个元素，再对元素做对应的处理。
示例数据结构说明
我们首先定义一个包含数组的测试对象，后续所有操作都基于这个对象展开：
// 包含数组的测试对象
const userData = {
title: '用户列表',
userList: [
{ id: 1, name: '张三', age: 25, hobby: ['篮球', '阅读'] },
{ id: 2, name: '李四', age: 28, hobby: ['足球', '游戏'] },
{ id: 3, name: '王五', age: 22, hobby: ['绘画', '音乐'] }
]
};
提取对象中的数组数据
第一步是从目标对象中提取出需要处理的数组，这里我们需要提取userList属性对应的数组：
// 提取对象中的数组 const targetArray = userData.userList; console.log(targetArray); // 输出完整的用户数组
如果数组嵌套层级更深，比如userData.info.userList，只需要按照层级逐层访问即可：
// 嵌套对象的数组提取
const nestedData = {
info: {
userList: [{ id: 1, name: '测试用户' }]
}
};
const deepArray = nestedData.info.userList;
遍历数组提取所需字段
提取到数组之后，我们需要遍历数组，获取每个元素中的具体字段，比如用户的姓名、年龄、爱好等：
// 遍历数组提取每个用户的字段
targetArray.forEach(user => {
const userName = user.name;
const userAge = user.age;
const userHobby = user.hobby; // 爱好本身也是数组
console.log(`姓名：${userName}，年龄：${userAge}，爱好：${userHobby.join('、')}`);
});
构建动态HTML内容
接下来我们将提取到的数据转换为HTML字符串，这里使用map方法遍历数组生成每个用户的HTML片段，再拼接成完整的内容：
// 生成动态HTML字符串
const htmlContent = `
<div class="user-container">
<h3>${userData.title}</h3>
<ul class="user-list">
${targetArray.map(user => `
<li class="user-item">
<p>用户ID：${user.id}</p>
<p>姓名：${user.name}</p>
<p>年龄：${user.age}</p>
<p>爱好：${user.hobby.map(h => `<span class="hobby-tag">${h}</span>`).join('')}</p>
</li>
`).join('')}
</ul>
</div>
`;
将动态HTML插入页面
最后我们需要将生成的HTML字符串插入到页面的指定容器中，这里使用innerHTML属性完成插入操作：
// 插入动态HTML到页面
// 假设页面有一个id为app的容器
const container = document.getElementById('app');
if (container) {
container.innerHTML = htmlContent;
}
完整实践案例
以下是完整的可运行代码，你可以将其复制到HTML文件中直接查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态HTML构建示例</title>
<style>
.user-container {
width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.user-list {
list-style: none;
padding: 0;
}
.user-item {
padding: 15px;
margin-bottom: 10px;
border: 1px solid #f0f0f0;
border-radius: 4px;
}
.hobby-tag {
display: inline-block;
padding: 2px 8px;
margin-right: 5px;
background-color: #f5f5f5;
border-radius: 3px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
const userData = {
title: '用户列表',
userList: [
{ id: 1, name: '张三', age: 25, hobby: ['篮球', '阅读'] },
{ id: 2, name: '李四', age: 28, hobby: ['足球', '游戏'] },
{ id: 3, name: '王五', age: 22, hobby: ['绘画', '音乐'] }
]
};
const targetArray = userData.userList;
const htmlContent = `
<div class="user-container">
<h3>${userData.title}</h3>
<ul class="user-list">
${targetArray.map(user => `
<li class="user-item">
<p>用户ID：${user.id}</p>
<p>姓名：${user.name}</p>
<p>年龄：${user.age}</p>
<p>爱好：${user.hobby.map(h => `<span class="hobby-tag">${h}</span>`).join('')}</p>
</li>
`).join('')}
</ul>
</div>
`;
const container = document.getElementById('app');
container.innerHTML = htmlContent;
</script>
</body>
</html>
注意事项
- 如果提取的数据包含用户输入的内容，直接拼接HTML可能存在XSS风险，需要对特殊字符做转义处理。
- 如果数组数据量较大，频繁操作
innerHTML可能影响性能，建议结合DocumentFragment批量插入DOM。 - 当数组是动态更新的时候，需要重新执行数据提取和HTML构建的逻辑，保证页面内容和数据同步。
JavaScript动态HTML对象数组数据提取DOM操作修改时间：2026-07-10 19:24:39