文章目录

1. 基本语法
2. 遍历方式
3. WeakSet

在 JavaScript 里通常使用Array或Object来存储数据。在 ES6 中，新增了数据结构 Set 和 Map，它们分别对应传统数据结构的“集合”和“字典”。首先，我们先来学习下 Set 数据结构。

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

1. 基本语法

// 生成Set实例,可初始化为空
let s = new Set()
// 初始化的参数必须是可遍历的，可以是数组或者自定义遍历的数据结构。
let s = new Set([1, 2, 3, 4])

添加数据

s.add('hello')
s.add('goodbye')
// 也支持链式写法
s.add("hello").add('world')

Set 数据结构不允许数据重复，所以添加重复的数据是无效的（可以用来去重）

删除数据

// 删除指定数据
s.delete('hello') // true
// 删除全部数据
s.clear()

统计数据

// 判断是否包含数据项，返回 true 或 false
s.has('hello') // true
// 计算数据项总数
s.size // 2

数组去重

let arr = [1,2, 2, 3, 4, 2, 3, 1]
let s = new Set(arr)
console.log(s) // Set(4) {1, 2, 3, 4}// 合并去重
let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6]
let s = new Set([...arr1, ...arr2])
console.log([...s])  // [1, 2, 3, 4, 5, 6]
console.log(Array.from(s))  // [1, 2, 3, 4, 5, 6]

交集

let s1 = new Set(arr1)
let s2 = new Set(arr2)
let result = new Set(arr1.filter(item => s2.has(item)))
console.log(Array.from(result))

差集

let arr3 = new Set(arr1.filter(item => !s2.has(item)))
let arr4 = new Set(arr2.filter(item => !s1.has(item)))
console.log(arr3)
console.log(arr4)
console.log([...arr3, ...arr4])

2. 遍历方式

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
for...of：直接遍历每个成员

let s = new Set(['hello','world'])
s.forEach(item => {console.log(item) // hello // world
})for (let item of s) {console.log(item)  // hello // world
}for (let item of s.keys()) {console.log(item)  // hello // world
}for (let item of s.values()) {console.log(item)  // hello // world
}for (let item of s.entries()) {console.log(item[0], item[1])  // hello hello  // world world
}

3. WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

WeakSet 的成员只能是对象，而不能是其他类型的值；
WeakSet 没有size属性，没有办法遍历它的成员

WeakSet 有三个方法：add, delete, has

const ws = new WeakSet()
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

let ws = new WeakSet()
const obj1 = {name: 'imooc'
}
const obj2 = {age: 5
}
ws.add(obj1)
ws.add(obj2)
ws.delete(obj1)
console.log(ws)
console.log(ws.has(obj2)) // true

WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

那么它有啥作用呢？

避免内存泄露（用于存储DOM节点，而不用担心这些节点从文档移除时会引发内存泄露）

const foos = new WeakSet()
class Foo {constructor() {foos.add(this)}method() {if(!foos.has(this)) {throw new TypeError("Foo.prototype..method 只能在Foo的实例上调用")}}
}
// 这段代码的作用是保证了Foo 的实例方法只能在Foo的实例上调用。
// 这里用WeakSet的好处：数组foos对实例的引用不会被计入内存回收机制，所以删除实例时无需考虑foos， 也不会出现内存泄露

【ES6(2015)】Set相关推荐

【ES6(2015)】Module模块
文章目录 1. 模块化的发展 2. export 3. as 4. export default 5. import 1. 模块化的发展随着前端的发展,web技术日趋成熟,js功能越来越多,代码量也 ...
【ES6(2015)】Iterator
文章目录 1. 基本语法 2. Iterator 接口与 Generator 函数 MDN : 处理集合中的每个项是很常见的操作.JavaScript 提供了许多迭代集合的方法,从简单的for循环到m ...
【ES6(2015)】Reflect
文章目录 1. 设计目的 2. 常用方法 Reflect对象与Proxy对象一样,也是ES6 为了操作对象而提供的新 API. 1. 设计目的将Object属于语言内部的方法放到Reflect上 l ...
【ES6(2015)】Proxy
文章目录 1. 基本语法 2. 拦截操作场景 3. 常用操作在 ES6 标准中新增的一个非常强大的功能是 Proxy,它可以自定义一些常用行为如查找.赋值.枚举.函数调用等.通过 Proxy 这个名 ...
【ES6(2015)】Number
文章目录 1. 二进制与八进制 2. 新增方法 3. Math扩展 1. 二进制与八进制 ES5 中进制转换: const a = 5 console.log(a.toString(2)) // 转换 ...
【ES6(2015)】RegExp
文章目录 1. y修饰符 2. u修饰符 1. y修饰符 ES6为正则表达式添加了y修饰符,叫做"粘连"(sticky)修饰符. y修饰符的作用与g修饰符类似,也是全局匹配,后一次 ...
【ES6(2015)】String
文章目录 1. Unicode表示法 2. 遍历器接口 3. 模板字符串 4. 扩展方法 1. Unicode表示法 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其 ...
【ES6(2015)】Map
文章目录 1. 基本语法 2. 遍历方式 3. WeekMap ES6 提供了 Map 数据结构.它类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对 ...
【ES6(2015)】Symbol
文章目录 1. 声明方式 2. Symbol.for() 3. Symbol.keyFor() 4. 作为属性名 5. 属性遍历 6. 消除魔术字符串 ES6 引入了一种新的原始数据类型 Symbol ...

【ES6(2015)】Set

文章目录

1. 基本语法

2. 遍历方式

3. WeakSet

【ES6(2015)】Set相关推荐

最新文章

热门文章