如何按均匀分配规则扩展数组至与另一数组等长？

需求分析 #

需要将较短的images数组元素均匀分配到较长的texts数组中，保证每个图片元素重复次数尽可能平均；若texts长度无法被images长度整除，最后一个图片元素多出现一次来补全长度。

解决方案 #

通过计算基础重复次数和余数，确定每个图片元素的重复次数，最终生成与texts长度一致的分配数组：

1. 计算每个图片元素的基础重复次数：Math.floor(texts.length / images.length)
2. 计算需要额外分配的次数：texts.length % images.length，这部分次数全部加到最后余数个图片元素上（余数不为0时仅针对最后一个元素）
3. 遍历images数组，按计算出的次数重复每个元素并拼接结果

代码实现 #

function distributeImages(texts, images) {
  const textLen = texts.length;
  const imageLen = images.length;
  
  // 处理空数组或文本数组更短的边界情况
  if (imageLen === 0) return [];
  if (textLen <= imageLen) return images.slice(0, textLen);

  const baseCount = Math.floor(textLen / imageLen);
  const remainder = textLen % imageLen;
  const result = [];
  
  for (let i = 0; i < imageLen; i++) {
    // 前(imageLen - remainder)个元素用基础次数，剩下的元素多重复一次
    const repeatCount = i < imageLen - remainder ? baseCount : baseCount + 1;
    // 将当前图片元素重复指定次数后推入结果数组
    result.push(...Array(repeatCount).fill(images[i]));
  }
  
  return result;
}

测试案例 #

// 案例1：文本长度4，图片长度2
const texts1 = ['text1', 'text2', 'text3', 'text4'];
const images1 = ['image1', 'image2'];
console.log(distributeImages(texts1, images1)); 
// 输出: ['image1', 'image1', 'image2', 'image2']

// 案例2：文本长度9，图片长度4
const texts2 = Array(9).fill('text');
const images2 = ['image1', 'image2', 'image3', 'image4'];
console.log(distributeImages(texts2, images2));
// 输出: ['image1','image1','image2','image2','image3','image3','image4','image4','image4']

// 案例3：文本长度5，图片长度2
const texts3 = ['text1', 'text2', 'text3', 'text4', 'text5'];
const images3 = ['image1', 'image2'];
console.log(distributeImages(texts3, images3));
// 输出: ['image1','image1','image2','image2','image2']

在React中使用 #

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

return texts.map((text, index) => (
  <div key={index}>
    {text}
    <img src={distributedImages[index]} alt={`${text}对应的图片`} />
  </div>
));

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