ES6之Set集合(通俗易懂,含实践)

简介: ES6之Set集合(通俗易懂,含实践)

Set是什么?它的方法有哪些?它在实例开发中有什么作用?

让我为大家介绍一下吧!

ES6提供了新的数据结构 Set(集合) 。它类似于数组,但成员的值是唯一的,常用于数组去重。

创建方法:

let s = new Set()
    console.log(s)

它属于什么类型?

console.log(typeof s) //object

我们通常在set中写入数组

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s)

由此可见,set 可以自动帮我们去重

Set 对象的几个常用方法和属性

1.size

可以获取元素的个数

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.size) //4

2.add( )

向 Set 添加新元素

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.add("四大名著")
    console.log(s)

3.delete( )

删除由其值指定的元素

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.add("四大名著")
    s.delete("四大名著")
    console.log(s)

4.has( )

如果值存在则返回 true,否则false

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.has("西游记")) //true
    console.log(s.has("四大名著")) //false

5.clear( )

清空

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.clear()
    console.log(s)

6.我们可以使用for…of遍历

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    for(let v of s) {
        console.log(v)
    }

7.keys( )

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    console.log(s.keys())

8.forEach( )

为每个元素调用回调

let s = new Set(["西游记","三国演义","水浒传","红楼梦","西游记"])
    s.forEach(item=>{
        console.log(item)
    })

实践

1.数组去重

let arr = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let result = [...new Set(arr)]
    console.log(result)

2.交集

let result = [...new Set(arr1)].filter(item=>new Set(arr2).has(item)
    // {
    //     // 把arr2也变成一个集合
    //     let s2 = new Set(arr2)
    //     // 判断arr2里是否有arr1里的元素
    //     if(s2.has(item)){
    //         return true
    //     }else {
    //         return false
    //     }
    // }) 
    )
    console.log(result)

3.并集

let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let arr2 = [1,2,3,3,2,4]
    let result = [...new Set([...arr1,...arr2])]
    console.log(result)

4.差集

let arr1 = [1, 2, 3, 3, 2, 1, 4, 5, 1]
    let arr2 = [1,2,3,3,2,4]
    // 取反
    let result = [...new Set(arr1)].filter(item=>!(new Set(arr2).has(item)))
    console.log(result);

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

相关文章
|
3天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
1月前
|
监控 算法 安全
带用集合算法set union讲解
带用集合算法set union讲解
20 0
|
1月前
|
存储 安全 Java
java集合框架及其特点(List、Set、Queue、Map)
java集合框架及其特点(List、Set、Queue、Map)
|
3月前
|
JavaScript 前端开发 定位技术
JavaScript 中如何代理 Set(集合) 和 Map(映射)
JavaScript 中如何代理 Set(集合) 和 Map(映射)
50 0
|
11天前
|
程序员 索引 Python
06-python数据容器-set(集合)入门基础操作
06-python数据容器-set(集合)入门基础操作
|
1月前
|
存储 Shell Linux
【Shell 命令集合 系统设置 内置命令】⭐⭐⭐Linux 设置或修改shell环境变量set命令 使用指南
【Shell 命令集合 系统设置 内置命令】⭐⭐⭐Linux 设置或修改shell环境变量set命令 使用指南
32 0
|
1月前
|
存储 安全 Java
Python教程第3章 | 集合(List列表、Tuple元组、Dict字典、Set)
Python 列表、无序列表、字典、元组增删改查基本用法和注意事项
51 1
|
1月前
|
存储 安全 Java
【Java】集合(二)Set
【Java】集合(二)Set
19 0
|
2月前
|
存储 Java
java set集合相关介绍和方法使用操作
java set集合相关介绍和方法使用操作
27 2