如何基于用户评分从布局列表中匹配最优JS布局

背景与需求 #

已通过代码生成20个随机布局，每个布局的options包含多个模块配置值（范围0-5，其中portfolio固定为1-5）。需要基于用户的模块偏好评分，筛选出最贴合的布局：

• 若用户评分中某模块值为0，候选布局对应模块必须也为0；
• 在符合硬性要求的布局中，选择各模块配置值与用户评分差值的绝对值之和最小的布局（差值越小，贴合度越高）。

完整代码实现 #

function getRandomNumber(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// 生成单个随机布局
function generateRandomLayout(index: number) {
  const layout = {
    name: `Layout${index + 1}`,
    options: {
      watchList: getRandomNumber(0, 5),
      instrumentDetail: getRandomNumber(0, 5),
      portfolio: getRandomNumber(1, 5),
      orders: getRandomNumber(0, 5),
      transactions: getRandomNumber(0, 5),
      chart: getRandomNumber(0, 5),
      Mazaneh: getRandomNumber(0, 5),
    },
  };
  return layout;
}

// 生成20个随机布局
const randomLayouts = [];
for (let i = 0; i < 20; i++) {
  const layout = generateRandomLayout(i);
  randomLayouts.push(layout);
}

// 用户偏好评分示例
const userScores = {
  watchList: 3,
  instrumentDetail: 5,
  portfolio: 2,
  transactions: 4,
  chart: 5,
  orders: 3,
  Mazaneh: 0,
};

// 筛选最优布局的算法
function findBestLayout(layouts: typeof randomLayouts, userScores: typeof userScores) {
  // 第一步：过滤不符合0值要求的布局
  const validLayouts = layouts.filter(layout => {
    return Object.entries(userScores).every(([key, score]) => {
      return score !== 0 || layout.options[key as keyof typeof layout.options] === 0;
    });
  });

  if (validLayouts.length === 0) {
    return null;
  }

  // 第二步：计算每个有效布局的贴合度分数
  const scoredLayouts = validLayouts.map(layout => {
    let totalDifference = 0;
    Object.entries(userScores).forEach(([key, score]) => {
      const layoutValue = layout.options[key as keyof typeof layout.options];
      if (score !== 0) {
        totalDifference += Math.abs(layoutValue - score);
      }
    });
    return {
      ...layout,
      fitScore: totalDifference
    };
  });

  // 第三步：按贴合度排序，取最优结果
  scoredLayouts.sort((a, b) => a.fitScore - b.fitScore);
  return scoredLayouts[0];
}

// 执行筛选并输出
const bestLayout = findBestLayout(randomLayouts, userScores);
console.log("最优布局:", bestLayout);

算法逻辑说明 #

1. 合法性过滤：遍历所有布局，仅保留满足"用户评分0的模块，布局对应值也为0"的候选，排除不符合硬性规则的布局；
2. 贴合度计算：对每个合法布局，计算其与用户评分的差值绝对值总和——该值越小，布局与用户偏好的匹配度越高；
3. 排序选优：将合法布局按贴合度分数从小到大排序，排名第一的即为最优布局。

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