Node.js中如何利用Map数据构建动态HTML表格？

核心问题是**Map.prototype.forEach()没有返回值**，所以直接把它的调用结果拼进HTML字符串里，就会得到undefined，导致表格结构异常。下面给几种实用的解决方法：

方法一：用forEach累加行字符串 #

先初始化一个空字符串，在forEach循环里逐个拼接表格行，最后再把完整的行字符串嵌入表格结构：

const myMap = new Map([['name', '张三'], ['age', 25], ['city', '北京']]);
let tableRows = '';

// 遍历Map，累加每一行的HTML代码
myMap.forEach((value, key) => {
  tableRows += `<tr><td>${key}</td><td>${value}</td></tr>`;
});

// 拼接完整表格并插入页面
const tableHTML = `<table border="1">${tableRows}</table>`;
document.body.innerHTML = tableHTML;

方法二：用Array.from+map生成行（更简洁） #

把Map转成数组后，用map()方法生成每一行的字符串，最后用join()把所有行拼接起来——map()会返回新数组，适合直接嵌入字符串：

const myMap = new Map([['name', '张三'], ['age', 25], ['city', '北京']]);

// 转数组→生成行数组→拼接成字符串
const tableRows = Array.from(myMap).map(([key, value]) => 
  `<tr><td>${key}</td><td>${value}</td></tr>`
).join('');

const tableHTML = `<table border="1">${tableRows}</table>`;
document.body.innerHTML = tableHTML;

方法三：直接操作DOM（更安全） #

如果要避免HTML字符串拼接可能带来的XSS风险，也可以直接创建DOM元素来生成表格：

const myMap = new Map([['name', '张三'], ['age', 25], ['city', '北京']]);
const table = document.createElement('table');
table.border = 1;

// 遍历Map，逐个创建表格行和单元格
myMap.forEach((value, key) => {
  const row = table.insertRow();
  const keyCell = row.insertCell();
  keyCell.textContent = key;
  const valueCell = row.insertCell();
  valueCell.textContent = value;
});

// 把表格添加到页面
document.body.appendChild(table);

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