JavaScript处理重复MAC数据：更新现有条目而非新增

核心思路 #

用**对象（或Map）**存储数据，以MAC地址作为唯一键，对应存储TTL和TIME值。遇到重复MAC时，直接覆盖旧值即可，无需复杂的数组查找操作。

具体实现步骤 #

1. 解析服务器数据
   每次收到数据后，按规则拆分并整理：

// 示例服务器返回的字符串
let a = "18647AF0D0,59,6]1864726D1,65,5]1864726A,85,5]1864726A,75,5]";
// 按]分割数据，过滤掉空条目（避免末尾]产生的空值）
const dataItems = a.split("]").filter(item => item.trim() !== "");

// 用对象存储MAC对应的TTL和TIME
const macData = {};
dataItems.forEach(item => {
  const [mac, ttl, time] = item.split(",");
  // 重复MAC会自动覆盖旧数据，完成更新
  macData[mac] = { ttl, time };
});

2. 渲染到页面
   将整理好的数据渲染到已有的HTML结构中（以表格为例）：

// 获取表格主体容器
const tableBody = document.querySelector("#macTable tbody");
// 清空旧内容
tableBody.innerHTML = "";

// 遍历对象生成表格行
Object.entries(macData).forEach(([mac, { ttl, time }]) => {
  const row = document.createElement("tr");
  row.innerHTML = `
    <td>${mac}</td>
    <td>${ttl}</td>
    <td>${time}</td>
  `;
  tableBody.appendChild(row);
});

3. 处理持续追加的新数据
   服务器发送新数据时，只需追加后重复解析和渲染逻辑即可：

// 处理新数据的函数
function handleNewData(newData) {
  a += newData; // 追加新数据到原变量
  // 重新解析数据
  const dataItems = a.split("]").filter(item => item.trim() !== "");
  const macData = {};
  dataItems.forEach(item => {
    const [mac, ttl, time] = item.split(",");
    macData[mac] = { ttl, time };
  });
  // 重新渲染页面
  renderMacData(macData);
}

// 封装渲染逻辑，方便复用
function renderMacData(data) {
  const tableBody = document.querySelector("#macTable tbody");
  tableBody.innerHTML = "";
  Object.entries(data).forEach(([mac, { ttl, time }]) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${mac}</td>
      <td>${ttl}</td>
      <td>${time}</td>
    `;
    tableBody.appendChild(row);
  });
}

优势说明 #

对象的键天然具备唯一性，不需要手动遍历数组判断MAC是否存在，直接赋值就能完成更新，代码简洁且高效。如果需要保留数据的插入顺序，用Map替代普通对象即可，逻辑完全一致。

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