当前位置: 首页 > news >正文

js中 new Set()实例的各个api使用

在JavaScript中,Set 是一种存储唯一值的数据结构,类似于数组但成员值都是唯一的。下面详细介绍 Set 实例的各个API及其使用方法:

1. 创建 Set 实例

// 创建空Set
const emptySet = new Set();// 从数组初始化Set(自动去重)
const setFromArray = new Set([1, 2, 2, 3, 'a', 'a']); // Set {1, 2, 3, 'a'}// 从字符串初始化Set(按字符拆分)
const setFromString = new Set('hello'); // Set {'h', 'e', 'l', 'o'}

2. 添加元素:add(value)

  • 作用:向Set中添加一个新元素,如果元素已存在则忽略。
  • 返回值:返回Set实例本身(可链式调用)。
const mySet = new Set();
mySet.add(1);        // Set {1}
mySet.add(2).add(3); // Set {1, 2, 3}
mySet.add(2);        // 重复元素,Set不变:{1, 2, 3}

3. 删除元素:delete(value)

  • 作用:删除Set中指定的元素。
  • 返回值:删除成功返回 true,失败(元素不存在)返回 false
const mySet = new Set([1, 2, 3]);
mySet.delete(2); // true,Set变为 {1, 3}
mySet.delete(4); // false,元素不存在

4. 判断元素是否存在:has(value)

  • 作用:检查Set中是否存在指定元素。
  • 返回值:存在返回 true,否则返回 false
const mySet = new Set([1, 'a']);
mySet.has(1);    // true
mySet.has('a');  // true
mySet.has('b');  // false

5. 获取元素数量:size

  • 作用:返回Set中元素的个数(只读属性)。
const mySet = new Set([1, 2, 3]);
console.log(mySet.size); // 3

6. 清空Set:clear()

  • 作用:移除Set中的所有元素。
const mySet = new Set([1, 2, 3]);
mySet.clear();
console.log(mySet.size); // 0

7. 遍历Set

7.1 keys()values()entries()
  • keys():返回一个包含所有键的迭代器(Set中键和值相同)。
  • values():返回一个包含所有值的迭代器(与 keys() 相同)。
  • entries():返回一个包含 [value, value] 数组的迭代器(为了与Map兼容)。
const mySet = new Set(['a', 'b', 'c']);// keys() 和 values()
const keys = mySet.keys();     // SetIterator {'a', 'b', 'c'}
const values = mySet.values(); // SetIterator {'a', 'b', 'c'}// entries()
const entries = mySet.entries(); 
// SetIterator {['a', 'a'], ['b', 'b'], ['c', 'c']}
7.2 forEach(callback[, thisArg])
  • 作用:遍历Set并对每个元素执行回调函数。
const mySet = new Set([1, 2, 3]);
mySet.forEach((value, key, set) => {console.log(value, key, set === mySet);
});
// 输出:
// 1 1 true
// 2 2 true
// 3 3 true
7.3 for...of 循环
const mySet = new Set([1, 2, 3]);
for (const value of mySet) {console.log(value); // 1, 2, 3
}

8. 转换为数组

使用扩展运算符(...)或 Array.from() 将Set转换为数组:

const mySet = new Set([1, 2, 3]);
const arr1 = [...mySet];       // [1, 2, 3]
const arr2 = Array.from(mySet); // [1, 2, 3]

9. 实用技巧

9.1 数组去重
const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
9.2 集合运算
// 并集
const union = new Set([...setA, ...setB]);// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));

10. 注意事项

  1. 值的唯一性

    • 基本类型(如 1'1')会被视为不同值。
    • 对象引用需指向同一对象才被视为相同:
      const set = new Set();
      set.add({}); // 添加一个空对象
      set.add({}); // 再次添加空对象(引用不同)
      console.log(set.size); // 2
      
  2. 迭代顺序:Set中的元素按插入顺序迭代。

  3. 兼容性:IE11及以下版本不完全支持Set,需使用polyfill。

通过这些API,Set提供了高效的唯一值存储和快速查找能力,适用于去重、集合运算等场景。

http://www.dtcms.com/a/285653.html

相关文章:

  • Http请求中的特殊字符
  • iOS加固工具有哪些?项目场景下的组合策略与实战指南
  • Axios泛型参数解析与使用指南
  • 谷歌地球与ArcGIS Pro查看三维地形
  • Linux操作系统之线程:分页式存储管理
  • VR平台应该具备哪些功能?怎样选择VR平台?
  • RecyclerView与ListView深度对比分析
  • 相机光学(五十)——Depth AF
  • Visual Studio编译WPF项目生成的文件介绍
  • 相机的内外参分别指什么
  • AI生成邮件发送脚本(带附件/HTML排版)与定时爬取网站→邮件通知(价格监控原型)
  • Maven学习总结(62)—— Maven 打包瘦身和提速解决方案
  • [JS逆向] 微信小程序逆向工程实战
  • 7.18 Java基础 |
  • CentOS7/Redhat7破解Root密码(linux)
  • 进阶数据结构:红黑树
  • 解锁 Java 并发编程的奥秘:《Java 并发编程之美》中的技术亮点与难题攻克
  • Java Map 集合详解:从基础语法到实战应用,彻底掌握键值对数据结构
  • 【PTA数据结构 | C语言版】左堆的合并操作
  • 异世界历险之数据结构世界(排序(插入,希尔,堆排))
  • Webpack 项目优化详解
  • uniapp微信小程序 实现swiper与按钮实现上下联动
  • 技术演进中的开发沉思-38 MFC系列:关于打印
  • 微信小程序 wx.request() 的封装
  • 为Notepad++插上JSON格式化的翅膀
  • Git 团队协作完全指南:从基础到高级应用
  • 《向华为学创新》:123页破解华为创新密码【附全文阅读】
  • Jfinal+SQLite解决MYSQL迁移表未复制索引问题,完善迁移工具
  • 私有服务器AI智能体搭建-大模型选择优缺点、扩展性、可开发
  • 数组/链表/【环形数组】实现 队列/栈/双端队列【移动语义应用】【自动扩缩】