如何将D3表格渲染的forEach代码改写为使用.map()方法实现

之前的map实现为什么只渲染日期列 #

你写的尝试代码的问题主要集中在两点：

• 链式调用直接为每条数据新建tr后，只手动追加了一个写有datetime的单个单元格就结束了流程
• 完全没有执行原逻辑中“遍历当前记录所有键值对、逐字段生成单元格”的核心步骤，city、state等其他字段根本没有对应的单元格渲染逻辑
  自然最终效果就只能看到日期列。

正确的map改写方式 #

只要把原代码里两层嵌套的forEach全部替换为map，严格对齐原有的渲染步骤，就能实现和原代码完全一致的表格渲染效果：

let tbody = d3.select("tbody");

filteredSightings.map(sight => {
  // 为单条目击记录创建对应的表格行
  const row = tbody.append("tr");
  // 遍历当前记录的所有键值对，逐个生成单元格填充内容
  Object.entries(sight).map(([_, value]) => {
    row.append("td").text(value);
  });
});

设计层面的注意事项 #

需要明确的是，从JavaScript原生方法的设计初衷来看，.map()的核心定位是对原数组元素做值变换、返回一个全新的数组，并不适合承载操作DOM这类无返回值的副作用逻辑——这类场景使用.forEach()才是语义匹配的写法。
上面的代码虽然可以完全复刻原有功能，但属于为了使用map而使用map的写法，实际项目开发中不推荐这么写，反而会降低代码的语义清晰度。

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