利用数学逻辑实现JavaScript数组的智能重复与对齐教程

const texts = ['text1', 'text2', 'text3', 'text4', 'text5']; // 5个元素
const images = ['image1', 'image2']; // 2个元素

/**
 * 根据主数组长度，智能扩展辅助数组元素并进行匹配。
 *
 * @param {Array<string>} texts 主数组，例如文本列表。
 * @param {Array<string>} images 辅助数组，例如图片URL列表。
 * @returns {Array<string>} 匹配后的结果数组，每个元素包含一个文本和一个对应的图片。
 */
function alignArraysWithRepetition(texts, images) {
  // 1. 处理 images 数组为空的特殊情况
  if (images.length === 0) {
    console.warn("Images array is empty. All mapped images will be undefined.");
    return texts.map(text => `${text} - undefined`);
  }

  // 2. 计算基础重复因子
  // num 表示 images 数组中的每个元素至少需要重复多少次
  const num = Math.floor(texts.length / images.length);

  // 如果 num 为 0 (意味着 texts.length < images.length)，则每个 text 对应一个 image
  // 并且 images 数组不会完全用尽。在这种情况下，num 应该至少为 1，
  // 否则 Math.floor(index / num) 会导致 Infinity 或 NaN。
  // 但根据问题描述 "I always have fewer images"，所以 images.length < texts.length 成立，
  // 故 num 至少为 1。如果 images.length >= texts.length, 则 num 至少为 0，
  // 此时 Math.floor(index / num) 会有问题。
  // 为了健壮性，这里可以稍微调整 num，确保其至少为 1，但对于原始问题场景，当前逻辑是足够的。
  // 实际上，当 images.length >= texts.length 时，num 会是 0，导致 index/num 为 Infinity 或 NaN。
  // 此时 Math.min(Infinity/NaN, images.length - 1) 会导致所有 texts 映射到 images 的最后一个元素。
  // 如果希望 images.length >= texts.length 时直接按索引匹配，则需要额外判断。
  // 但鉴于问题明确指出 "always have fewer images"，我们假设 num >= 1。
  // 如果 num 真的为 0 (例如 texts.length=3, images.length=5)，
  // 则 Math.floor(index/0) 会是 Infinity，Math.min(Infinity, images.length-1) 会是 images.length-1，
  // 导致所有 texts 映射到 images 的最后一个元素。
  // 原始问题的意图是 images 总是更短，所以 num >= 1 是一个合理推断。
  const actualNum = num === 0 ? 1 : num; // 确保 num 至少为 1，避免除以零或小数导致的问题

  // 3. 遍历主数组并计算对应的图片索引
  const result = texts.map((text, index) => {
    // Math.floor(index / actualNum) 将连续的 actualNum 个 text 索引映射到同一个 image 索引。
    // Math.min(..., images.length - 1) 确保计算出的 image 索引不会超出 images 数组的范围。
    // 当计算出的索引尝试超出范围时，它会被限制为 images 数组的最后一个索引，
    // 从而实现最后一个图片元素的额外重复填充。
    const imageIndex = Math.min(Math.floor(index / actualNum), images.length - 1);
    return `${text} - ${images[imageIndex]}`;
  });

  return result;
}

// 示例用法 1: 原始问题场景
const texts1 = ['text1', 'text2', 'text3', 'text4', 'text5'];
const images1 = ['image1', 'image2'];
const alignedResult1 = alignArraysWithRepetition(texts1, images1);
console.log("示例 1 (texts: 5, images: 2):", alignedResult1);
// 预期输出: ['text1 - image1', 'text2 - image1', 'text3 - image2', 'text4 - image2', 'text5 - image2']

// 示例用法 2: 完美倍数
const texts2 = ['textA', 'textB', 'textC', 'textD', 'textE', 'textF']; // 6个元素
const images2 = ['imageX', 'imageY', 'imageZ']; // 3个元素
const alignedResult2 = alignArraysWithRepetition(texts2, images2);
console.log("示例 2 (texts: 6, images: 3):", alignedResult2);
// 预期输出: ['textA - imageX', 'textB - imageX', 'textC - imageY', 'textD - imageY', 'textE - imageZ', 'textF - imageZ']

// 示例用法 3: images 数组为空
const texts3 = ['t1', 't2'];
const images3 = [];
const alignedResult3 = alignArraysWithRepetition(texts3, images3);
console.log("示例 3 (images为空):", alignedResult3);
// 预期输出: ['t1 - undefined', 't2 - undefined']

// 示例用法 4: images 数组只有一个元素
const texts4 = ['a', 'b', 'c', 'd'];
const images4 = ['singleImage'];
const alignedResult4 = alignArraysWithRepetition(texts4, images4);
console.log("示例 4 (images只有一个元素):", alignedResult4);
// 预期输出: ['a - singleImage', 'b - singleImage', 'c - singleImage', 'd - singleImage']