线性数组与环形数组匹配获取目标结果的技术实现求助

核心思路 #

• 预处理color1数组，建立颜色到对应src列表的映射，减少重复查找开销
• 为每个颜色维护一个当前使用的索引，遍历colors时按顺序取src，通过取模运算实现环形循环（索引到达列表末尾后自动回到起点）

代码实现（JavaScript） #

// 原始输入数组
const colors = ["blue", "blue", "blue", "blue", "Green", "Green", "red", "red", "red", "red"];
const color1 = [["blue", "src1"], ["blue", "src2"], ["red", "src3"], ["red", "src4"], ["Green", "src5"]];

// 构建颜色与src列表的映射
const colorSrcMap = {};
color1.forEach(([color, src]) => {
  colorSrcMap[color] ??= []; // 初始化空数组（兼容旧环境可改用if(!colorSrcMap[color]) colorSrcMap[color] = []）
  colorSrcMap[color].push(src);
});

// 遍历colors数组，实现环形匹配
const currentIndex = {};
const result = colors.map(color => {
  const srcList = colorSrcMap[color];
  // 初始化当前颜色的索引
  if (currentIndex[color] === undefined) {
    currentIndex[color] = 0;
  }
  // 获取当前src并更新索引（环形循环）
  const targetSrc = srcList[currentIndex[color]];
  currentIndex[color] = (currentIndex[color] + 1) % srcList.length;
  return `${color}:${targetSrc}`;
});

// 输出结果
console.log(result.join(',\n'));

运行结果 #

blue:src1,
blue:src2,
blue:src1,
blue:src2,
Green:src5,
Green:src5,
red:src3,
red:src4,
red:src3,
red:src4

关键逻辑说明 #

• 映射表colorSrcMap将分散的src按颜色归类，比如blue对应['src1', 'src2']，Green对应['src5']
• currentIndex对象记录每个颜色当前使用到第几个src，取模运算% srcList.length确保索引不会越界：当索引等于列表长度时，取模结果为0，实现环形复用
• 对于仅含单个src的颜色（如Green），取模后索引始终为0，因此每次返回同一个src，完全符合需求

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