ES6 新增的 Set 和 Map 详解和区别

1. Set

1.1 定义

• 类似于数组（类数组对象），可以存储任意类型的唯一值，无论是基本类型或者对象引用。
• 成员的值都是唯一的，没有重复。
• Set 是一个构造函数，通过 new 命令来创建 Set 对象。

const mySet = new Set([1, 2, null, NaN, { name: 'fruit' }])

Set 接收一个数组或具有 iterable 接口的其他数据结构作为参数，用来初始化。

1.2 属性

1.2.1 size 返回 Set 对象中（唯一的）元素的个数。

const mySet = new Set([1, 2, null, NaN, { name: 'fruit' }])
console.log(mySet.size) // 5 

1.3 操作方法

1.3.1 add(value) 添加某个值，返回 Set 结构本身

const mySet = new Set();
mySet.add('orange')
mySet.add('apple')
console.log(mySet)

1.3.2 delete(value) 删除某个值，返回一个布尔值，表示删除成功

const mySet = new Set();
mySet.add('orange')
mySet.add('apple')
console.log(mySet)
mySet.delete('orange')
console.log(mySet)

1.3.3 has(value) 返回一个布尔值，表示参数是否为 Set 的成员

const mySet = new Set();
mySet.add('orange')
mySet.add('apple')
console.log(mySet.has('apple')) // true
console.log(mySet.has('banana')) // false

1.3.4 clear() 清除所有成员，没有返回值

const mySet = new Set();
mySet.add('orange')
mySet.add('apple')
mySet.clear()
console.log(mySet)

1.4 遍历操作

Set 结构的实例有4个遍历方法，可用于遍历成员。

1.4.1 keys(): 返回键名的遍历器

1.4.2 values(): 返回键值的遍历器

1.4.3 entries(): 返回键值对的遍历器

1.4.4 forEach(): 使用回调函数遍历每个成员

2. Map

2.1 定义

• Map 对象是键值对的集合。
• Map 中的一个键只能出现一次。
• Map() 是一个构造函数，通过 new 命令来创建 Map 对象。

const newMap = new Map([['name', 'banana'], ['age', 18]])
console.log(newMap)

Map 对象初始化的值为一个二维数组（一个元素是键值对的数组或其他可迭代对象）

2.2 属性

2.2.1 size 是可访问属性，返回 Map 对象的成员数量。

const newMap = new Map([['name', 'banana'], ['age', 18]])
console.log(newMap.size) // 2

2.3 操作方法

2.3.1 set() 为 Map 对象添加或更新一个指定了键（key）和值（value）的（新）键值对

const myMap = new Map()
myMap.set('name', 'banana')
myMap.set('age', 18)
console.log(myMap)

2.3.2 get() 从 Map 对象返回指定的元素

const myMap = new Map()
myMap.set('name', 'banana')
myMap.set('age', 18)
console.log(myMap.get('age')) // 18

2.3.3 delete() 移除 Map 对象中指定的元素

const myMap = new Map()
myMap.set('name', 'banana')
myMap.set('age', 18)
myMap.delete('age')
console.log(myMap)

2.3.4 has() 返回一个布尔值，判断指定键的元素是否存在。

const myMap = new Map()
myMap.set('name', 'banana')
myMap.set('age', 18)
console.log(myMap.has('age')) // true
myMap.delete('age')
console.log(myMap.has('age')) // false

2.3.5 clear() 移除 Map 对象中的所有元素

const myMap = new Map()
myMap.set('name', 'banana')
myMap.set('age', 18)
myMap.clear()
console.log(myMap)

2.4 遍历操作

• forEach() 方法按照插入顺序依次对 Map 中每个键/值对执行一次给定的函数。
• keys() 返回一个引用的迭代器对象。它包含按照顺序插入 Map 对象中每个元素的 key 值。
• values() 方法返回一个新的迭代器对象。它包含按顺序插入 Map 对象中每个元素的 value 值。
• entries() 方法返回一个新的迭代器对象，其中包含 Map 对象中按插入顺序排列的每个元素的 [key, value] 对

3. Set 和 Map 的相同点和区别

3.1 相同点

• Map 和 Set 都是构造函数，必须使用 new 命令来创建对应的实例。
• Map 和 Set 查找速度都非常快，时间复杂度为 O(1)。
• Map 对象不允许键重复，Set 对象不允许值重复。

3.2 区别

• Set 对象初始化的值为一维数组，Map 对象初始化的值为一个二维数组。
• Map 对象的键不能改的，但是值能改；Set 对象只能通过迭代器来更改值。