每天十分钟学好ES6---新集合Set和Map

Posted 2022-01-26 桃子叔叔

Set和map是ES6提供的新的数据结构，加上数组和对象，就有了4种数据集合，这4种集合都可以使用遍历器（Iterator）进行处理。

一、Set

Set类似于数组，但是成员都是唯一的，没有重复，也因为这个特性，可用来做特殊处理，比如去除数组重复成员等。

Set本身就是一个构造函数，用来生成Set数据结构。

1.1 Set基本用法

让我们看一下

let s = new Set()
let s2 = new Set(['a','b','c','d','a'])
// 元素个数
console.log(s2.size) // 4
// 添加新元素
s2.add('e')
// 删除元素
s2.delete('c')
// 检测
s2.has('a')
// 清空
s2.clear()

属性	用途
new Set()	生成Set集合
size	检查集合元素个数
add	添加元素
delete	删除元素
has	检测元素
clear	清空集合

由Set于成员都是唯一，我们可以用来去除数组重复成员

let list = ['a','b','c','d','a']
let newList = [...new Set(list)]

看起来代码很清爽，不需要复杂的操作，就可以完成任务。

1.2 遍历操作

由于Set是ES6提供的新集合，也可以被遍历器（Iterator）进行处理，最基本的处理：

let s2 = new Set(['a','b','c','d','a'])
for (let item of s2) 
    console.log(item)

同时Set还提供了四个遍历方法用遍历成员

方法	用途
keys	返回键名
values	返回键值
entries	返回键值对
forEach	遍历成员

实际上，Set遍历方法keys、values使用效果一样

let s2 = new Set(['a','b','c','d','a'])
for (let item of s2.keys) 
    console.log(item)

for (let item of s2.values) 
    console.log(item)

上面两个方法结果是一样的，实际上在使用中，不需要这几个，就直接使用最简单的方法遍历就可以了：

let s2 = new Set(['a','b','c','d','a'])
for (let item of s2) 
    console.log(item)

1.3 Set的并集、交集和差集

let arr = new Set([1, 2, 3])
let arr2 = new Set([4, 2, 3])
// 并集
let union = new Set([...arr, ...arr2])
// 交集
let same = new Set([...arr].filter(x=> arr2.has(x)))
// 差集 方法类似于交集
let same = new Set([...arr].filter(x=> !arr2.has(x)))

二、Map

• es6提供了Map数据结构。类似于对象，也是键值对集合
• 各种类型的值都可以当作键，因此是升级版的对象
• Map实现了Interator接口，所以可以使用【扩展运算符】和for…of进行遍历

我们一起来看下Map的基本用法

let m = new Map()
// 添加元素
m.set('name', '桃子')
m.set('address', 'shanghai')
// size
console.log(m.size)
// 删除
m.delete('name')
// 获取
console.log(m.get('address'))
// 遍历
for (const v of m) 
    console.log(v)

Map的属性和Set高度一致，并且就连遍历方法也一样，这里只需要记住基本的用法和两种集合不同的特点性质就可以了。