JavaScript 中 Set 结构怎么实现好友列表的关注去重-js教程-PHP中文网

javascript 的 set 天然支持好友关注去重：添加重复 id 自动忽略，查询 o(1)，初始化时用 new set(rawlist.map(id => string(id))) 统一类型并去重，结合 ui 实时驱动按钮状态，需注意类型归一、异步更新时机及 localstorage 持久化。

javascript 中 set 结构怎么实现好友列表的关注去重

用 JavaScript 的 Set 实现好友列表的关注去重，核心是利用其“自动忽略重复值”的特性——只要把用户 ID（或唯一标识）存入 Set，重复添加同一 ID 不会改变集合内容，天然完成去重。

用 Set 存储关注的用户 ID

关注行为本质是维护一个“已关注用户 ID 集合”。Set 比数组更合适，因为：
– 添加重复 ID 时不会报错，也不新增元素；
– 查询是否存在某 ID 是 O(1) 时间复杂度，比 Array.includes() 快得多；
– 无需手动遍历比对。

示例：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

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 一步清洗：

确保所有 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]));
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南