ES6的new Set()方法有什么用法

news/2024/7/10 23:11:02 标签: es6, 前端, ecmascript

Set 是什么?

  • Set是es6新增的数据结构,类似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。
  • Set本身是一个构造函数,用来生成 Set 数据结构。
  • Set函数可以接受一个数组作为参数用来初始化。

new Set()生成出来的数据是Set数据结构,需要自行转换成对应结构,size是set的长度标识。元素唯一使用全等‘===’判断,除了NaN,在set 中,NaN是相等的。

Set 的用法:

1.  数组去重,字符串去重
// 数组去重
let arr = [1, 2, 3, 4, 1, 2, 3];
new Set(arr)  // Set(4) {1, 2, 3, 4}

// 将结果重新转换为数组
[...new Set(arr)] // [1, 2, 3, 4]

// 数组方法也可以用来转换为数组
Array.from(new Set(arr))


// 字符串去重
let str = 'abcdab';
new Set(str) // Set(4) {'a', 'b', 'c', 'd'}

// 将结果重新转换为字符串
[...new Set(str)].join('')  // 'abcd'

只能去重简单数据类型,复杂数据类型不可以。

2. Set 实例的方法,增、删、查、清空

主要分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。

  • Set.prototype.add(value):添加某个值,返回 Set 结构本身。
  • Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。
  • Set.prototype.clear():清除所有成员,没有返回值。
let s = new Set();
s.add(1).add(2).add(2);  // 2被加入了两次,但实际上只会被添加一次

s.size // 2 Set(2) {1, 2}

// 判断Set是否包含某值
s.has(1) // true
s.has(2) // true
s.has(3) // false

// 删除Set中的值
s.delete(2);
s.has(2) // false

// 清除所有值
s.clear()
s // Set(0) {size: 0}
3. 遍历方法

1) 遍历Set的keys(), 返回键名的遍历器,相等于返回键值遍历器values()

2) 遍历Set的values(), 返回键值的遍历器

3) 遍历Set的entries(), 返回键值对的遍历器

4) 遍历forEach(), 使用回调函数遍历每个成员

let arr = ['a', 'b', 'c'];

let result = new Set(arr);

// keys()
for(let i of result.keys()) { 
    console.log(i) // 依次打印 a, b, c
}

// values()
for(let i of result.values()) { 
    console.log(i) // 依次打印 a, b, c
}

// entries()
for(let i of result.entries()) { 
    console.log(i) // 依次打印 ['a', 'a']  ['b', 'b']  ['c', 'c']
}

// forEach()
result.forEach((value, key) => {
  console.log(`${key}: ${value}`) // 依次打印 a: a   b: b   c: c
})


http://www.niftyadmin.cn/n/5472392.html

相关文章

Java8 进阶

Java8 进阶 文章目录 Java8 进阶什么是函数式接口&#xff1f;public interface Supplierpublic interface Consumerpublic interface Predicatepublic interface FunctionJava8 特性总结&#xff1a;一、Function<T, R>二、Consumer<T>三、Supplier<T>四、P…

算法刷题Day24 | 216.组合总和III、17.电话号码的字母组合

目录 0 引言1 组合总和 III1.1 我的解题 2 电话号码的字母组合2.1 我的解题2.2 优秀的题解 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;算法刷题Day24 | 216.组合总和III、17.电话号码的字母组合❣️ 寄…

手机扫码查看视频如何实现?扫描二维码在线看视频的制作技巧

现在的学校或者幼儿园会需要拍摄学生的视频&#xff0c;然后展示给其他人查看&#xff0c;为了能够方便用户能够快速的获取文件内容&#xff0c;所以经常会通过生成视频二维码的方法&#xff0c;将二维码分享之后手机扫码来获取视频内容&#xff0c;有效提升用户获取内容的体验…

Linux第5课 Linux目录介绍

文章目录 Linux第5课 Linux目录介绍一、打开系统目录二、查看系统目录 Linux第5课 Linux目录介绍 系统目录就是指操作系统的主要文件存放的目录&#xff0c;目录中的文件直接影响到系统是否正常工作&#xff0c;了解这些目录的功能&#xff0c;对使用系统会有很大的帮助。 一…

深入探索力扣第12题:整数转罗马数字的算法之旅

力扣&#xff08;LeetCode&#xff09;第12题“整数转罗马数字”提供了一个绝佳的学习机会&#xff0c;不仅让我们深入古罗马的数字系统&#xff0c;也锻炼了我们的编程技巧。一起看看其背后的逻辑。 罗马数字基础 罗马数字是一种古老的数字表示方法&#xff0c;广泛用于古罗…

考研回忆录【二本->211】

备考时长差不多快一年半&#xff0c;从22年的11月底开始陆陆续续地准备考研&#xff0c;因为开始的早所以整个备考过程显得压力不是很大&#xff0c;中途还去一些地方旅游&#xff0c;我不喜欢把自己绷得太紧。虽然考的不是很好&#xff0c;考完我甚至都没准备复试&#xff0c;…

设置Chrome打开链接在新标签页显示

Chrome版本 版本 123.0.6312.106&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; 下面这两个页面都有设置按钮&#xff1a; https://www.google.com/?pli1或者https://www.google.com/?hlzh-CN 要先退出账号&#xff0c;要不然看不到右下角的 “设置” 。…

常用软件架构模式优缺点及应用场景

1、分层架构模式 最常见的架构模式就是分层架构或者称为 n 层架构。大部分软件架构师、设计师和开发者都对这个架构模式非常熟悉。尽管对于层的数量和类型没有具体限制&#xff0c;但大部分分层架构主要由四层组成&#xff1a;展现层、业务层、持久层和数据库层&#xff0c;如…