JavaScript中根据动态分组大小批量分割数组元素的教程

var group_size = [1, 3, 5];
var elements = ['a','b','c','d','e','f','g','h','i','j','k','l'];

var output = [];
for (var i=0; i < group_size.length; i++) {
    output.push(elements.slice(i, group_size[i]));
}
console.log(output);
// 错误输出: [["a"], ["b", "c"], ["c", "d", "e"]]
// 期望输出: [['a'], ['b','c','d'],['e','f','g','h','i'],['j','k','l']]

/**
 * 根据动态分组大小数组分割元素数组。
 *
 * @param {Array} array 要分割的原始元素数组。
 * @param {Array} groups 包含每个分组大小的数字数组。
 * @returns {Array<Array>} 包含分割后子数组的数组。
 */
function splitIntoGroups (array, groups) {
    let output = [];      // 存储最终的分组结果
    let maxLength = 1;    // 记录遇到的最大分组长度，默认为1
    let offset = 0;       // 记录当前切片的起始偏移量

    // 阶段一：根据预定义的分组大小进行切片
    // 循环条件：遍历完所有预定义分组，或原始数组已全部处理完毕
    for (var i = 0; i < groups.length && offset < array.length; i++) {
        const currentGroupSize = groups[i];
        // 切片操作：从当前偏移量开始，切片长度为 currentGroupSize
        output.push(array.slice(offset, offset + currentGroupSize));
        // 更新偏移量
        offset += currentGroupSize;
        // 更新最大分组长度，用于后续处理剩余元素
        maxLength = Math.max(maxLength, currentGroupSize);
    }

    // 阶段二：处理剩余元素
    // 如果原始数组中还有未处理的元素
    while (offset < array.length) {
        // 使用之前记录的最大分组长度进行切片
        output.push(array.slice(offset, offset + maxLength));
        // 更新偏移量
        offset += maxLength;
    }

    return output;
}

let elements = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
let groups = [1, 3, 5, 5, 5, 1000]; // groups数组可以包含任意大小，甚至超出原始数组长度

console.log("--- 示例 1: 原始数组较短 ---");
// 当原始数组元素不足以填满所有预定义分组时，会按实际长度截断
console.log(splitIntoGroups(elements.slice(0, 3), groups));
// 预期输出: [['a'], ['b','c']]
// (因为原始数组只有3个元素，第一个分组1，第二个分组3，但只有2个剩余，所以是['b','c'])

console.log("\n--- 示例 2: 原始数组长度适中 ---");
console.log(splitIntoGroups(elements.slice(0, 5), groups));
// 预期输出: [['a'], ['b','c','d'], ['e']]
// (第一个分组1，第二个分组3，剩余一个元素用最大分组5，但只剩1个，所以是['e'])

console.log("\n--- 示例 3: 原始数组长度与预定义分组匹配 ---");
console.log(splitIntoGroups(elements.slice(0, 12), [1, 3, 5, 3]));
// 预期输出: [['a'], ['b','c','d'],['e','f','g','h','i'],['j','k','l']]
// (这里的groups是[1,3,5,3]，总和为12，正好匹配)

console.log("\n--- 示例 4: 原始数组超出预定义分组，使用最大分组长度 ---");
// 这里的 groups 是 [1, 3, 5]，最大分组长度是 5。
// 原始数组有16个元素，前三个分组用掉 1+3+5=9 个元素。
// 剩余 16-9=7 个元素，将按最大分组长度 5 进行分组。
// 7个元素会分成 [...,...,...,...,...] (5个) 和 [...,...] (2个)
console.log(splitIntoGroups(elements, [1, 3, 5]));
// 预期输出: [['a'], ['b','c','d'],['e','f','g','h','i'],['j','k','l','m','n'], ['o','p']]

console.log("\n--- 示例 5: 原始数组超出预定义分组，最大分组长度为5 (原groups) ---");
console.log(splitIntoGroups(elements, groups));
// 预期输出: [['a'], ['b','c','d'],['e','f','g','h','i'],['j','k','l','m','n'], ['o','p']]
// (此处的groups数组为[1,3,5,5,5,1000]，但实际只用了前三个分组1,3,5，maxLength为1000。
//  当elements.length = 16，前3个分组用掉9个，剩余7个。
//  7个元素会按maxLength=1000来分，但实际只有7个，所以分成 [...,...,...,...,...,...,...] (7个)
//  注意：这里与示例4的输出不同，因为maxLength是由[1,3,5,5,5,1000]中的1000决定的。
//  如果groups是[1,3,5]，maxLength就是5。如果groups是[1,3,5,1000]，maxLength就是1000。
//  因此，如果剩余元素按maxLength分组，且maxLength很大，它会一次性切完所有剩余元素。)

// 修正示例5的理解，如果groups是[1,3,5,5,5,1000]，maxLength会是1000。
// 那么剩余的7个元素会一次性被切片为1个子数组。
// 让我们重新运行并分析：
// input: elements = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p']
// groups = [1, 3, 5, 5, 5, 1000]
// 1. ['a'] (offset=1, maxLength=1)
// 2. ['b','c','d'] (offset=4, maxLength=3)
// 3. ['e','f','g','h','i'] (offset=9, maxLength=5)
// 4. for循环继续，i=3, groups[3]=5。
//    output.push(array.slice(9, 9+5)) -> ['j','k','l','m','n'] (offset=14, maxLength=5)
// 5. for循环继续，i=4, groups[4]=5.
//    output.push(array.slice(14, 14+5)) -> ['o','p'] (offset=16, maxLength=5)
// 6. for循环继续，i=5, groups[5]=1000.
//    offset (16) >= array.length (16)。for循环终止。
// 7. while循环：offset (16) >= array.length (16)。while循环不执行。
// 最终输出: [['a'], ['b','c','d'],['e','f','g','h','i'],['j','k','l','m','n'], ['o','p']]
// 这个结果与示例4是一致的，说明示例4的groups [1,3,5]中，maxLength是5。
// 而示例5的groups [1,3,5,5,5,1000]中，maxLength在for循环结束后也会更新为1000，
// 但由于元素已经全部处理完，while循环并未执行。
// 因此，这里的关键是 `offset < array.length` 这个条件，它会阻止切片超出数组范围。