对象属性查重与动态添加属性：处理positions对象left重复问题

刚好之前处理过类似的布局对象需求，咱们一步步来实现你要的功能：给重复left值的子对象中的某一个加上top属性，避免布局重叠。

核心思路 #

1. 先统计重复情况：遍历所有子对象，记录每个left值出现的次数，这样能快速定位哪些值是重复的。
2. 针对性修改重复项：再次遍历原对象，遇到重复的left值时，给其中一个（或按需给多个）子对象添加top属性。

TypeScript 实现示例 #

看你用了public修饰符，应该是在 Angular 或者类组件里使用这个对象，直接上可运行的代码：

// 你的原始对象
public positions = {
  reading: { left: "10px" },
  writing: { left: "20px" },
  speaking: { left: "20px" },
  listening: { left: "7px" },
};

// 处理重复left值的方法
public fixDuplicatePositions(): void {
  // 第一步：统计每个left值的出现频率
  const leftCountMap = new Map<string, number>();
  Object.values(this.positions).forEach(pos => {
    const leftVal = pos.left;
    leftCountMap.set(leftVal, (leftCountMap.get(leftVal) || 0) + 1);
  });

  // 第二步：遍历对象，给重复项添加top属性
  const updatedPositions = { ...this.positions };
  // 用Set记录已经处理过的重复left值，确保只给其中一个加top
  const handledDuplicates = new Set<string>();

  Object.entries(updatedPositions).forEach(([key, pos]) => {
    const leftVal = pos.left;
    // 如果当前left值重复，且还没处理过这个重复组
    if (leftCountMap.get(leftVal) > 1 && !handledDuplicates.has(leftVal)) {
      // 给当前子对象添加top属性，这里用"10px"作为示例，你可以自定义值
      updatedPositions[key] = { ...pos, top: "10px" };
      // 标记这个left值已处理，避免重复操作
      handledDuplicates.add(leftVal);
    }
  });

  // 更新原对象
  this.positions = updatedPositions;
}

灵活调整逻辑 #

如果你的需求是给所有重复项（除了第一个）都加top，可以把第二步的遍历逻辑改成这样：

// 替代第二步的遍历逻辑
Object.entries(updatedPositions).forEach(([key, pos]) => {
  const leftVal = pos.left;
  if (leftCountMap.get(leftVal) > 1) {
    updatedPositions[key] = { ...pos, top: "10px" };
    // 减少计数，直到只剩一个项不处理
    leftCountMap.set(leftVal, leftCountMap.get(leftVal)! - 1);
  }
});

比如有三个子对象left都是"20px"，这段代码会给前两个加top，第三个保持原样，完全根据你的需求来调整就行。

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