前端常见问题以及处理方式 - - - (八) ES6中的set和map（set篇）

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

前言

set和map的应用场景：数据去重和数据存储

• Set是一种叫做集合的数据结构；
• Map是一种叫做字典的数据结构.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一. set是什么？

1. set是一个集合，它类似于数组，但是成员的值都是唯一的，没有重复的值。它允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

2. set是一个构造函数，它有一个可选的参数一个可迭代对象。如果传递了这个参数它的所有元素将不重复地被添加到新的 Set中。如果不指定此参数或其值为null，则新的Set为空。它返回一个新的Set实例。

代码如下（示例）：

let s1 = new Set([NaN, undefined, null, +0, -0, Infinity, -Infinity, NaN, undefined, null])

console.log(s1)

//返回结果
Set(6) {NaN, undefined, null, 0, Infinity, …}
	[[Entries]]
		0: NaN
		1: undefined
		2: null
		3: 0
		4: Infinity
		5: -Infinity
		size: 6
	[[Prototype]]: Set

---

二. 类型转换

// Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];

// String 转 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

---

三. set有什么作用？

**数组去重**

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
				//[...a] 就是将 set 转换成 array。以后需要将 set 转换成 array 基本都使用这种方法。

**并集**

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

**交集**

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

**差集**

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

---

四、Set 原型方法

• size： 返回Set数据结构的数据长度

(1). Set对象方法

1.add(value):

用来向一个Set对象的末尾添加一个指定的值，它返回Set对象本身。

let s2 =new Set([1])
s2.add(2).add(3)// { 1, 2, 3 }

2.has(value):

返回一个布尔值来指示对应的值value是否存在Set对象中。

3.delete(value):

可以从一个Set对象中删除指定的元素，成功删除返回 true，否则返回false。

4.clear():

用来清空一个Set对象中的所有元素，返回undefiend。

• 代码如下（示例）：

const mySet = new Set(['a', 'a', 'b', 11, 22, 11])
console.log(mySet)  // {'a', 'b', 11, 22}

myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 11, 22, 'c', {a: 1}}
console.log(mySet.size) // 6

mySet.has(22) // true

---

(2). Set遍历方法

1.values():

返回一个Iterator对象，这个对象以插入Set 对象的顺序包含了原Set对象里的每个元素。返回键值的遍历器

2.keys():

values()的别名，功能和values()完全相同。返回键名的遍历器

3.entries():

返回一个新的迭代器对象 ，这个对象的元素是类似[value, value]形式的数组。返回键值对的遍历器

4.forEach(callback[, thisArg]):

根据集合中元素的顺序，对每个元素都执行提供的callback函数一次。它接受两个参数第一个是回调函数，第二个是回调函数的this指向（可选）。 使用回调函数遍历每个成员，无返回值

• 代码如下（示例）：

由于Set结构没有键名，只有键值（**或者说键名和键值是同一个值**），所以keys方法和values方法的行为完全一致。

const set = new Set(['a', 'b', 'c'])

for (let item of set.keys()) {
  console.log(item)
}
// a
// b
// c

for (let item of set.values()) {
  console.log(item)
}
// a
// b
// c

for (let item of set.entries()) {
  console.log(item)
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]

// 直接遍历set实例，等同于遍历set实例的values方法
for (let i of set) {
  console.log(i)
}
// a
// b
// c

set.forEach((value, key) => console.log(key + ' : ' + value))

// a: a
// b: b
// c: c

---

总结

这里对文章进行总结：

 // set和map的区别

1.Map是键值对，Set是值的[集合]，当然键和值可以是任何的值；

2.Map可以通过get方法获取值，而set不能因为它只有值；

3.都能通过迭代器进行for…of遍历；

4.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储

5.map和set都是stl中的关联容器，map以键值对的形式存储，key=value组成pair，是一组映射关系。set只有值，可以认为只有一个数据，并且set中元素不可以重复且自动排序。