如何用JavaScript将API获取的教程链接分组并实现批量打开？

核心思路：用整数运算分配分组 #

遇到links.length /3得到小数的情况，关键是用整数除法取整+余数分配来拆分数组，保证每组数量尽可能均匀，总数刚好匹配。

具体步骤与代码示例 #

假设你已经通过API获取到了links数组，按以下方式处理：

1. 计算基础分组数与余数

const links = []; // 替换为你的API返回链接数组
const totalLinks = links.length;
const baseCount = Math.floor(totalLinks / 3); // 每组基础数量（向下取整）
const remainder = totalLinks % 3; // 无法均分的剩余链接数

2. 拆分三组链接
   根据余数把多出来的链接分配到前1-2组（保证分组尽可能均匀）：

// 第一组：基础数 + 余数>=1则加1
const group1 = links.slice(0, baseCount + (remainder >= 1 ? 1 : 0));
// 第二组：起始位置是第一组的长度，长度为基础数 + 余数>=2则加1
const group2Start = baseCount + (remainder >= 1 ? 1 : 0);
const group2 = links.slice(group2Start, group2Start + baseCount + (remainder >= 2 ? 1 : 0));
// 第三组：从第二组结束位置到数组末尾
const group3 = links.slice(group2Start + baseCount + (remainder >= 2 ? 1 : 0));

3. 绑定按钮点击事件
   给三个按钮添加点击逻辑，打开对应组的链接（注意：浏览器可能拦截批量弹窗，建议提前提示用户允许弹窗）：

// 打开前三分之一按钮
document.getElementById('openGroup1').addEventListener('click', () => {
  group1.forEach(link => {
    window.open(link, '_blank');
  });
});

// 打开中间三分之一按钮
document.getElementById('openGroup2').addEventListener('click', () => {
  group2.forEach(link => {
    window.open(link, '_blank');
  });
});

// 打开最后三分之一按钮
document.getElementById('openGroup3').addEventListener('click', () => {
  group3.forEach(link => {
    window.open(link, '_blank');
  });
});

特殊情况处理 #

• 当链接总数小于3时：比如只有2个链接，第三组会是空数组，你可以给对应按钮添加disabled属性，或者点击时提示“该组无链接”。
• 当总数刚好是3的倍数：余数为0，三组数量完全相等，逻辑依然适用。

示例验证（以31个链接为例） #

• baseCount = Math.floor(31/3) = 10，remainder = 31%3 =1
• group1长度：10+1=11，group2长度：10，group3长度：10，总数11+10+10=31，完全匹配。

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