JavaScript数组元素按比例扩展与均匀分布策略

const texts = ['text1', 'text2', 'text3', 'text4', 'text5'];
const images = ['image1', 'image2'];

/**
 * 根据自定义逻辑扩展一个数组，使其长度与另一个数组匹配，并均匀分布元素。
 * @param {Array<string>} texts - 目标长度的参照数组。
 * @param {Array<string>} images - 需要扩展的源数组。
 * @returns {Array<string>} 扩展后的图片数组，或一个包含错误信息的数组。
 */
function distributeImagesEvenly(texts, images) {
  // 错误处理：如果图片数组为空，则无法进行分配
  if (images.length === 0) {
    console.warn("图片数组为空，无法进行均匀分配。");
    // 可以选择返回空数组、抛出错误或返回默认值
    return new Array(texts.length).fill(null); // 或者根据需求返回其他默认值
  }

  // 计算每个图片元素至少需要覆盖的文本项数量
  // 例如：texts.length = 5, images.length = 2 => num = Math.floor(5 / 2) = 2
  const num = Math.floor(texts.length / images.length);

  // 遍历文本数组，为每个文本项确定对应的图片
  const resultImages = texts.map((_, index) => {
    // 计算当前文本索引对应的原始图片索引
    // Math.floor(index / num) 确保了前 num 个文本对应第一个图片，
    // 接下来的 num 个文本对应第二个图片，以此类推。
    // Math.min(..., images.length - 1) 确保索引不会超出 images 数组的范围，
    // 并且当超出均匀分配的理想范围时，会重复使用 images 数组的最后一个元素。
    const imageIndex = Math.min(Math.floor(index / num), images.length - 1);
    return images[imageIndex];
  });

  return resultImages;
}

// 示例 1: 基础场景
const texts1 = ['text1', 'text2', 'text3', 'text4', 'text5'];
const images1 = ['image1', 'image2'];
const distributedImages1 = distributeImagesEvenly(texts1, images1);
console.log("示例 1 结果:", distributedImages1);
// 预期输出: ['image1', 'image1', 'image2', 'image2', 'image2']

// 示例 2: 完美整除场景
const texts2 = ['text1', 'text2', 'text3', 'text4'];
const images2 = ['imageA', 'imageB'];
const distributedImages2 = distributeImagesEvenly(texts2, images2);
console.log("示例 2 结果:", distributedImages2);
// 预期输出: ['imageA', 'imageA', 'imageB', 'imageB']

// 示例 3: 图片数组长度大于或等于文本数组长度
const texts3 = ['textX', 'textY'];
const images3 = ['img1', 'img2', 'img3'];
const distributedImages3 = distributeImagesEvenly(texts3, images3);
console.log("示例 3 结果:", distributedImages3);
// 预期输出: ['img1', 'img2'] (在这种情况下，num会是0，但Math.floor(index/0)是Infinity，Math.min会取images.length-1。
// 实际上，如果 images.length >= texts.length，num会是0或1。
// 如果 num = 0 (images.length > texts.length)，则 Math.floor(index/num) 会是 Infinity (如果 index > 0) 或 0 (如果 index = 0)，
// 最终 Math.min 总是会取 images.length - 1。
// 这是一个需要修正的边缘情况。
// 让我们重新思考 num 的计算，或者处理 num 为 0 的情况。
// 如果 images.length >= texts.length，我们实际上只是按顺序取图片即可，不需要重复。
// 修正逻辑：如果 images.length >= texts.length，则直接取前 texts.length 个图片。
// 或者，如果 num < 1，说明每个图片至少覆盖的文本项数量小于1，即图片数量充足。
// 此时，Math.floor(index / num) 就不再适用。
// 让我们修改 `num` 的定义，使其至少为 1，以避免除以零或产生 Infinity。
// 或者更简单地，当 `images.length >= texts.length` 时，直接返回 `images.slice(0, texts.length)`。
// 但原问题的核心是 `images` 数组通常较短。
// 如果 `images.length` 足够长，那么 `num` 可能会是 0。
// 比如 `texts.length = 2, images.length = 3` => `num = Math.floor(2/3) = 0`.
// 此时 `Math.floor(index / num)` 会是 `Infinity` （对于 `index > 0`），`Math.min` 会取 `images.length - 1`。
// 这会导致所有文本都映射到最后一个图片。这不符合“按顺序取”的直觉。

// 重新考虑 `num` 的定义，它应该是每个图片 "占据" 的文本数量。
// 如果图片数量足够，那么每个图片只 "占据" 1 个文本。
// 如果图片数量不足，那么每个图片 "占据" 更多文本。
// 更好的方式是 `step = images.length / texts.length`，然后 `imageIndex = Math.floor(index * step)`.
// 让我们测试这个新的方法。

// 修正后的 `distributeImagesEvenly` 函数
function distributeImagesEvenlyV2(texts, images) {
  if (images.length === 0) {
    console.warn("图片数组为空，无法进行均匀分配。");
    return new Array(texts.length).fill(null);
  }

  // 如果图片数量足够，直接按顺序取
  if (images.length >= texts.length) {
    return images.slice(0, texts.length);
  }

  // 核心逻辑：计算每个图片需要覆盖多少个文本项（向下取整）
  // 这里的 num 表示每个图片的基础重复次数
  const num = Math.floor(texts.length / images.length);
  // 如果 num 为 0，说明 images.length > texts.length，但我们已经在上面处理了。
  // 所以这里 num 至少为 1。

  const resultImages = texts.map((_, index) => {
    // 确定当前文本索引对应的原始图片索引
    // Math.floor(index / num) 确保了前 num 个文本对应第一个图片，
    // 接下来的 num 个文本对应第二个图片，以此类推。
    // Math.min(..., images.length - 1) 处理余数情况，确保索引不越界，
    // 并使最后一个图片重复。
    const imageIndex = Math.min(Math.floor(index / num), images.length - 1);
    return images[imageIndex];
  });

  return resultImages;
}

console.log("\n--- 使用修正后的 V2 函数 ---");

// 示例 1: 基础场景 (同上)
const texts1_v2 = ['text1', 'text2', 'text3', 'text4', 'text5'];
const images1_v2 = ['image1', 'image2'];
const distributedImages1_v2 = distributeImagesEvenlyV2(texts1_v2, images1_v2);
console.log("示例 1 V2 结果:", distributedImages1_v2);
// 预期输出: ['image1', 'image1', 'image2', 'image2', 'image2']

// 示例 2: 完美整除场景 (同上)
const texts2_v2 = ['text1', 'text2', 'text3', 'text4'];
const images2_v2 = ['imageA', 'imageB'];
const distributedImages2_v2 = distributeImagesEvenlyV2(texts2_v2, images2_v2);
console.log("示例 2 V2 结果:", distributedImages2_v2);
// 预期输出: ['imageA', 'imageA', 'imageB', 'imageB']

// 示例 3: 图片数组长度大于或等于文本数组长度 (修正后)
const texts3_v2 = ['textX', 'textY'];
const images3_v2 = ['img1', 'img2', 'img3'];
const distributedImages3_v2 = distributeImagesEvenlyV2(texts3_v2, images3_v2);
console.log("示例 3 V2 结果:", distributedImages3_v2);
// 预期输出: ['img1', 'img2'] (符合预期)

// 示例 4: 图片数组只有一个元素
const texts4_v2 = ['t1', 't2', 't3'];
const images4_v2 = ['singleImage'];
const distributedImages4_v2 = distributeImagesEvenlyV2(texts4_v2, images4_v2);
console.log("示例 4 V2 结果:", distributedImages4_v2);
// 预期输出: ['singleImage', 'singleImage', 'singleImage']

// 示例 5: 空文本数组
const texts5_v2 = [];
const images5_v2 = ['i1', 'i2'];
const distributedImages5_v2 = distributeImagesEvenlyV2(texts5_v2, images5_v2);
console.log("示例 5 V2 结果:", distributedImages5_v2);
// 预期输出: []

// 示例 6: 空图片数组
const texts6_v2 = ['t1', 't2'];
const images6_v2 = [];
const distributedImages6_v2 = distributeImagesEvenlyV2(texts6_v2, images6_v2);
console.log("示例 6 V2 结果:", distributedImages6_v2);
// 预期输出: [null, null] (警告信息也会输出)