JavaScript遍历对象数组按每两项拆分并插入指定内容的实现

var original = [{
        image: 'sampleImage1.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage2.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage3.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage4.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    }
];
var captions = ["a", "b", "c", "d"];

// 拆分captions为每2个一组，和图像分组一一对应
var captionGroups = [];
for (var i = 0; i < captions.length; i += 2) {
    captionGroups.push(captions.slice(i, i + 2));
}

var output = [];
for (var k = 0; k < original.length; k += 2) {
    // 插入当前分组的图像元素
    output.push(original.slice(k, k + 2));
    // 插入对应分组的标题
    output.push(captionGroups[k / 2]);
    // 插入固定的空单元格配置
    output.push([
        { text: "", border: [false, false, false, false], fillColor: "white" },
        { text: "", border: [false, false, false, false], fillColor: "white" }
    ]);
}

console.log(output);

逻辑说明 #

• 先将captions数组按照和图像分组相同的规则（每2个元素为一组）拆分，得到和图像分组数量完全匹配的caption分组数组
• 遍历原始图像数组的过程中，按顺序插入「图像组 → 对应caption组 → 空配置数组」三个元素即可
• 兼容原始数组长度为奇数的场景，最后一组不足2个元素时也能正常生成结构

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