ES6学习笔记——Set 和 Map 数据结构

在 ES6 中新增了两种数据结构，它们分别是 Set 和 Map，我们可以分别将它们和 Array、Object 进行对比

Set

Set 的字面意思就是集合，与 Array 类似，都是一些成员的聚集

根据中学数学我们知道，集合中的所有元素都是唯一的，所以 Set 和 Array 之间最大的区别是：Set中所有的成员都是唯一的

const s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(1)

// s1 的值为 {1, 2}

Set 函数可以接受一个可遍历的数据结构作为参数来初始化

const s2 = new Set([1,2,1,3,4])
// s2 的值为 {1, 2, 3, 4}

可遍历的数据结构有哪些呢？数组、类数组、含有 iterable 接口 的其他数据结构都是可遍历的

属性与方法

size

s2.size // 4

add(value)

向 Set 中添加一个值，返回 Set 结构本身

s2.add(5).add(6).add(7)

delete(value)

删除一个值，返回布尔值表示是否成功删除

s2.delete(7)

has(value)

Set 中是否包含某个值，返回布尔值

s2.has(1)

clear()

清除所有成员，无返回值

s2.clear()

遍历

可以通过forEach进行遍历

s1.forEach((value, key) => console.log(value, key))

由于 Set 没有键名，只有键值，所以 key 和 value 是同一个值

Map

Object 是键值对的集合，而其中的键只能使用字符串，而 Map 与 Object 类似，也是键值对的集合，但是 Map 的键可以是何种类型的值

const m1 = new Map()
const k = {key, 'value'}

m1.set(k, 'mapValue')
m1.get(k)

Map 可以接受一个数组作为参数，这个数组的成员是一个个表示键值对的数组

const m2 = new Map([
    ['name', 'xiaoming'],
    ['age', 18]
])

// {'name'=>'xiaoming', 'age'=>18}

属性与方法

size

m2.size //2

set(key, value)

设置一个键名为 key 键值为 value 的成员，并返回整个 Map 结构，如果已经存在该键名，则会更新键值

m2.set('sex', 'boy')

get(key)

读取这个 key 对应的值，如果没有则返回 undefined

m2.get('sex')

has(key) / delete(key) / clear()

使用方法可参照上文 Set 对应的方法使用方式

遍历

keys() / values() / entries()

这三个遍历器生成函数分别返回 键名的遍历器、键值的遍历器、所有成员的遍历器

for (let key of m2.keys()) {console.log(key)}

for (let value of m2. values()) {console.log(value)}

for (let item of m2. entries()) {console.log(item[0], item[1])}
// 这里的 item 是一个数组，其中第一个值为键名，第二个值为键值

forEach()

m2.forEach((value, key) => console.log(value, key))

扫码关注前端周记公众号