如何用Reduce迁移数组数据并为分组Commit消息添加SHA链接？

没问题，这事儿用reduce完全能搞定，而且还能同时完成按日期分组和数据迁移整合两个目标。我结合你给出的脚本片段，给你写个完整的实现方案：

核心思路 #

我们要做的就是遍历原始的Commit数据，用reduce把它们按日期分组，同时把每个Commit的SHA值、生成的GitHub链接一起打包到分组后的对象里。具体步骤是：

1. 从原始Commit数据里提取日期、消息、SHA值
2. 用你定义的gitHubUrl加上SHA生成对应Commit的跳转链接
3. 用reduce构建按日期为键的分组对象，每个键对应的值是包含完整信息的Commit数组

完整代码示例 #

function fetchDatafromGitHub() {
  const user = "google";
  const repo = "coding-with-chrome";
  // 用模板字符串拼接更简洁
  const gitHubUrl = `https://github.com/${user}/${repo}/commit/`;

  // 这里模拟从GitHub API获取到的原始Commit数据（实际项目里你会用fetch/axios请求）
  const rawCommits = [
    {
      sha: "abc123xyz",
      commit: {
        message: "修复移动端布局错位问题",
        author: { date: "2024-05-20T14:30:00Z" }
      }
    },
    {
      sha: "def456uvw",
      commit: {
        message: "新增代码高亮功能",
        author: { date: "2024-05-20T16:45:00Z" }
      }
    },
    {
      sha: "ghi789rst",
      commit: {
        message: "更新README文档",
        author: { date: "2024-05-21T09:15:00Z" }
      }
    }
  ];

  // 关键：用Reduce完成分组+数据整合
  const newData = rawCommits.reduce((groupedData, currentCommit) => {
    // 提取日期（只保留YYYY-MM-DD部分，去掉时间）
    const commitDate = currentCommit.commit.author.date.split("T")[0];
    const commitMessage = currentCommit.commit.message;
    const commitSha = currentCommit.sha;
    // 生成Commit的GitHub链接
    const commitUrl = `${gitHubUrl}${commitSha}`;

    // 如果当前日期还没有分组，初始化一个空数组
    if (!groupedData[commitDate]) {
      groupedData[commitDate] = [];
    }

    // 把整合了SHA和链接的Commit项加入对应分组
    groupedData[commitDate].push({
      message: commitMessage,
      sha: commitSha,
      url: commitUrl
    });

    return groupedData;
  }, {}); // 初始值是一个空对象，用来存储分组结果

  // 测试输出，你可以在这里把newData渲染到页面
  console.log("按日期分组后的Commit数据：", newData);

  // 示例：把newData渲染成带链接的HTML
  renderCommitData(newData);
}

// 可选：渲染函数，把分组后的Commit数据显示到页面
function renderCommitData(commitData) {
  const container = document.getElementById("commit-container");
  if (!container) return;

  Object.entries(commitData).forEach(([date, commits]) => {
    // 创建日期标题
    const dateHeading = document.createElement("h3");
    dateHeading.textContent = date;
    container.appendChild(dateHeading);

    // 创建每个Commit的链接项
    commits.forEach(commit => {
      const commitItem = document.createElement("p");
      // 使用生成的url作为链接地址
      commitItem.innerHTML = `<a href="${commit.url}" target="_blank">${commit.message}</a> <small>SHA: ${commit.sha}</small>`;
      container.appendChild(commitItem);
    });
  });
}

// 调用函数
fetchDatafromGitHub();

代码解释 #

• Reduce的作用：这里的reduce相当于一个"分组器"，初始值是空对象{}，每次遍历一个Commit就把它放到对应的日期分组里，同时把SHA和链接信息一起存进去
• 链接生成：用模板字符串拼接gitHubUrl和SHA值，得到的commitUrl就是对应Commit在GitHub上的直接跳转链接
• 日期处理：把GitHub返回的带时间的日期字符串（比如2024-05-20T14:30:00Z）拆分，只保留前面的日期部分，保证分组的准确性

这样处理后，newData里每个日期分组下的Commit项都包含了消息、SHA值和对应的GitHub链接，完全满足你的需求～

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