JavaScript ES6 中的集合

介绍

在 ES6 之前，JavaScript 没有原生的 Set 实现。什么是 Set？Set 是一个不能包含重复值的列表。让我们来探索一下原生 ES6 Set 解决了哪些问题，以及如何使用它们。

构造函数

要创建一个新集合，我们可以使用new Set()。您也可以直接在构造函数中提供迭代器。

const set = new Set()
console.log(set) // Set {}

const set = new Set([1, 2, 3])
console.log(set) // Set { 1, 2, 3 }

如果给出一个有重复项的可迭代对象，Set 将忽略第一个重复项之后的重复项：

const set = new Set([1, 2, 2, 2, 3, 4, 5, 5, 5, 4])
// Set { 1, 2, 3, 4, 5 }

add方法和size属性

Set 有一个add方法，允许你向其中添加单个元素。Set 还提供了一个size属性，用于获取其中元素的数量。

const set = new Set()
set.size // 0
set.add(2)
set.size // 1

如果集合已经具有以下值，则忽略添加：

const set = new Set(['Hello', 'World'])
set.add('Hello')
console.log(set) // Set { 'Hello', 'World' }

通过变通方法解决问题

在集合出现之前，你必须使用普通对象来模拟集合。由于只能使用字符串作为键，因此可能会出现一些问题。例如，5 会被强制转换为 "5"，{} 会被强制转换为 "[object Object]"。集合不会强制转换值。5 和 "5" 是两个不同的值。

const set = new Set()
set.add({})
set.add({})

set.size // 2
console.log(set) // Set { {}, {} }

set.add(5)
set.add('5')
set.add(5) // this will be ignored

set.size // 4
console.log(set) // Set { {}, {}, 5, '5' }

因此，可以将多个对象添加到集合中。集合用于Object.is()比较两个值：


Object.is(5, 5) //true
Object.is(5, '5') //false
Object.is({},{}) //false

has 、delete和clear方法

has(value)检查值是否在集合中。返回 true 或 false
delete(value)从集合中删除值
clear()从集合中删除所有值

const set = new Set()
set.add(5)

set.has(5) // true
set.has(8) // false

const set = new Set([1, 2, 3])
set.size // 3
set.delete(2)
set.size // 2
set.clear()
set.size // 0

迭代

要遍历集合，可以使用 forEach() 方法。与对对象/数组使用该方法相比，有一点不同。forEach() 接受三个参数：

价值
键（索引）
您正在迭代的数组或对象

然而，在集合中，前两个参数是相同的。这是因为集合没有键。所以：

const set = new Set([1, 2, 3])
set.forEach((value, key, s) => {
    console.log(`${value} ${key}`)
    console.log( set === s)
})

//1 1
//true
//2 2
//true
//3 3
//true

这样，您可以使用与数组和对象相同的方法。

设置 => 数组

我们已经看到，可以通过将数组传递给 Set 构造函数来将数组转换为集合。你还可以使用扩展运算符将集合转换为数组：

const set = new Set([1, 2, 3])
const array = [...set]
console.log(array) // [ 1, 2, 3 ]

弱集

这些集合可以称为强集合，因为它保存的是对象引用。它的工作方式就像将对象存储在变量中一样。只要集合实例存在，就无法通过垃圾回收来释放内存。

const set = new Set()
let obj = {}

set.add(obj)
set.size // 1
obj = null
set.size // 1

// We can retrieve the original reference
obj = [...set][0]
console.log(obj) // {}

在某些情况下，你确实希望集合中的引用在所有其他引用消失时也消失。ES6 包含弱集。弱集只能存储弱对象引用。因此，如果某个对象没有其他引用，集合中的引用将会消失。弱集也不能包含原始值（例如字符串或整数）。

const set = new WeakSet()
let obj = {}

set.add(5) // ERROR
let obj = {}
set.add(obj)
set.has(obj) // true
obj = null // remove the reference to obj, also removes it in set
set.has(obj) // false

弱集：

如果将非对象传递给add()、has()或delete() ，将会抛出错误。
不可迭代。不能使用 for-of 或 forEach() 方法。
没有大小属性。

弱集的有限功能对于正确处理内存是必要的。

结论

ES6 提供了一种创建集合的新方法，并解决了许多 ES5 中开发者常用的变通方法的问题。如果您只需要跟踪对象引用并防止内存泄漏，请使用弱集合。

鏂囩珷鏉ユ簮锛�https://dev.to/damcosset/sets-in-javascript-es6-3fdh

JavaScript ES6 中的集合

JavaScript ES6 中的集合

介绍

构造函数

add方法和size属性

通过变通方法解决问题

has 、delete和clear方法​

迭代

设置 => 数组

弱集

结论

has 、delete和clear方法