优化JavaScript代码：实现父子组件记录标题唯一性校验

先明确原代码存在的核心问题：

• validateData 里的条件判断存在明显错误（activity.title != activity.title 永远为false），逻辑完全无法正常执行
• 每次调用 isUniqueTitle 都会重新遍历一次 activities，加上外层的 forEach，导致双重遍历，效率低下

优化后的实现（一次遍历完成校验） #

利用 Array.some() 方法（找到匹配项就立即终止遍历，效率更高），一次遍历就能覆盖新增/编辑场景的唯一性校验：

const validateTitleUniqueness = (data, activities) => {
  const targetTitle = data.title.toLowerCase();
  const isEditing = !!data.id;
  const originalActivity = isEditing ? activities.find(act => act.id === data.id) : null;

  // 编辑模式下，若标题未修改，直接通过校验
  if (isEditing && originalActivity?.title.toLowerCase() === targetTitle) {
    return true;
  }

  // 一次遍历检查是否存在重复
  const hasDuplicate = activities.some(activity => {
    // 编辑模式跳过当前正在编辑的原记录
    if (isEditing && activity.id === data.id) {
      return false;
    }
    return activity.title.toLowerCase() === targetTitle;
  });

  if (hasDuplicate) {
    // 此处显示重复提示
    return false;
  }
  return true;
};

// 子组件调用示例：
// const isValid = validateTitleUniqueness(formData, activities);

逻辑说明 #

1. 统一大小写处理：先将提交的标题转成小写，避免大小写差异导致的误判
2. 编辑模式特殊判断：
   • 先识别是否为编辑状态（提交数据带id），并获取对应的原记录
   • 若原记录标题与提交标题（小写后）一致，说明未修改标题，直接通过校验
3. 单次遍历查重：
   • 用 some 遍历数组，编辑模式下跳过当前编辑的原记录
   • 只要找到匹配的重复标题，立即终止遍历并判定为重复
4. 最终返回 true（标题唯一）或 false（标题重复）

优化点总结 #

• 仅需一次遍历（最多遍历到第一个重复项就停止），性能更优
• 逻辑清晰区分新增/编辑场景，避免冗余判断
• 修复了原代码中的逻辑错误

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