JavaScript 的 Set 天然支持好友关注去重：添加重复 ID 自动忽略，查询 O(1)，初始化时用 new Set(rawList.map(id => String(id))) 统一类型并去重，结合 UI 实时驱动按钮状态，需注意类型归一、异步更新时机及 localStorage 持久化。
用 JavaScript 的 Set 实现好友列表的关注去重，核心是利用其“自动忽略重复值”的特性——只要把用户 ID（或唯一标识）存入 Set，重复添加同一 ID 不会改变集合内容，天然完成去重。
用 Set 存储关注的用户 ID
关注行为本质是维护一个“已关注用户 ID 集合”。Set 比数组更合适，因为：
– 添加重复 ID 时不会报错，也不新增元素；
– 查询是否存在某 ID 是 O(1) 时间复杂度，比 Array.includes() 快得多；
– 无需手动遍历比对。
示例：
const following = new Set();
// 用户点击关注
function follow(userId) {
following.add(userId); // 若 userId 已存在，自动忽略
}
// 用户取消关注
function unfollow(userId) {
following.delete(userId);
}
// 判断是否已关注
function isFollowing(userId) {
return following.has(userId);
}
// 获取当前关注总数
function getFollowCount() {
return following.size;
}
从后端数据初始化关注列表时去重
如果首次加载页面时后端返回了关注列表（可能含重复 ID 或格式不一），可用 Set 一步清洗：
立即学习“Java免费学习笔记（深入）”；
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 确保所有 ID 转为字符串（避免
1和"1"被视为不同）； - 用扩展运算符转回数组（如需渲染列表）；
- 不建议直接用
new Set(arr)处理原始响应，除非确认 ID 类型统一。
示例：
// 假设后端返回：[123, "456", 123, "789", "456"] const rawList = response.following || []; const uniqueIds = [...new Set(rawList.map(id => String(id)))]; // → ["123", "456", "789"]
与 UI 交互结合：按钮状态实时同步
关注/取消关注按钮的状态（如“已关注”/“关注”）应由 Set 实时驱动，避免状态和数据不一致：
- 点击按钮时调用
follow()或unfollow()； - 立即用
isFollowing()更新按钮文案和样式； - 不需要额外维护布尔数组或对象映射，
Set就是唯一真相源。
小技巧：可将 Set 挂在组件实例或全局状态上（如 React 的 useState + useMemo 包裹），保证跨函数共享。
注意边界情况
实际使用中几个易错点：
-
ID 类型不一致：后端传数字、前端存字符串 → 统一用
String(id)归一化； -
异步操作未等待：比如先发关注请求再更新
Set，但请求失败时Set已变 → 应在请求成功回调里更新； -
持久化需求：
Set是内存结构，刷新即丢失 → 需搭配localStorage或服务端同步（例如存成 JSON 数组）。
例如本地缓存同步：
// 加载时读取
const saved = localStorage.getItem('following');
if (saved) {
following = new Set(JSON.parse(saved));
}
// 每次变更后保存
function saveFollowing() {
localStorage.setItem('following', JSON.stringify([...following]));
}
