ES6之Set和Map | 易学教程

一、Set

1.set的基本属性和方法

Set类似于数组，不过于数组不同的是，Set中的成员都是唯一的，即使重复添加，也不会添加到Set中去，我们通过构造函数Set()来新建一个Set，以便于更深入的了解。

const set = new Set()

在这里插入图片描述
通过构造函数新建Set实例后，我们可以看到 Set有一些方法和属性，下边我们来了解这些属性和方法。

size: Set中成员的数量
Set(): 构造方法
has(): 判断Set中是否含有某个值，返回布尔类型
add(): 向Set中添加数值
delete(): 删除Set中的值，返回布尔类型
clear()：清除Set中的所有数
keys():遍历Set中的所有键
values():遍历Set中的所有值
entries():遍历Set中的所有项
forEach():遍历Set中的所有键值对

2. Set与数组的相互转换

2.1 set 转数组

const set = new Set([1,2,3,3])
[...set] // [1,2,3]
Array.from(set) //[1,2,3]

2.2 数组转set

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

3.数组去重

function f1(arr) {
	return [...new Set(arr)]
}
function f2(arr) {
	return Array.from(new Set(arr))
}

4.WeakSet

WeakSet如其名弱Set结构，WeakSet的成员都是对象类型，通过WeakSet()构造方法可以得到WeakSet实例，我们可以看到它的属性和方法比Set要少。由于WeakSet对对象的引用是弱引用，对象随时可能被删除，因此WeakSet是不可遍历的，这也是为了防止遍历时成员被删除而出错。
在这里插入图片描述

二、Map

1.Map的基本属性和方法

Map与对象类似，都是键值对组成，不过传统的对象Object中键名只能是字符串，这不利于我们在更广泛的场景下应用，于是就有了Map，Map的键可以是任何类型数字，字符串，布尔类型，undefined 甚至 NaN。我们还是先通过构造函数Map()来生成一个Map实例，来了解一下它的基本属性和方法。

const map = new Map()

在这里插入图片描述

size:表示Map中的成员个数
get(): 通过键名获取Map中与键名对应的键值
set(): 设置Map中的键值对
has():判断Map中是否含有某个值，返回布尔类型
delete():删除Map中的值，返回布尔类型
clear():清除Map中的所有数
keys():遍历Map中的所有键
values():遍历Map中的所有值
entries():遍历Map中的所有项
forEach():遍历Map中的所有键值对

这里有几点需要注意，Map的键可以是任何数据类型，如果键为对象和数组时，要特别注意必须是同一个对象或数组才能保证获取到相应的值，如果只是值相等是获取不到的，因为对象和数组都属于引用类型，保存的是指针地址而非数组，不同的对象和数组值相等但地址不同，下边通过几个例子来说明一下。

示例一：

const map = new Map()
map.set(['a'],'b')
map.get(['a']) // undefined


let a = ['a']
const map = new Map()
map.set(a,'b')
map.get(a) // b

第一个例子中，set和get方法表面上是针对一个键，但其实是不同的内存地址，因此，通过set方法将以[‘a’]为键名的键值对插入到Set中，再用[‘a’]来获取是获取不到值的，

第二个例子中，声明数组为一个变量，在进行set 和get时针对的是同一个键，这样就可以获取到值了。

示例二：

let k1 = ['a']
let k2 = ['a']
const map = new Map()
map.set(k1, 'b')
map.set(k2, 'b')

map.get(k1)  // b
map.get(k2)  // b

上边的例子中，k1和k2的值相同，map中键相同的话，后插入的值会覆盖之前插入的值，我们可以看到值并没有被覆盖，k1 k2两个键都可以获取到相应的键值，k1 和 k2 虽然值相同，但内存地址是不同的，因此被视为不同的键。

2.Map与其他数据类型的相互转换

（1）Map转为数组

const map = new Map([
	['1','2'],
	['3','4']
])
[...map]

在这里插入图片描述
（2）数组转为Map

const arr = [
	['1', '2'],
	['3', '4']
]
const map = new Map(arr)

在这里插入图片描述
（3）Map转为对象

键名为字符串时可转

const map = new Map([
	['name', '张三'],
	['title', '作者']
])
function f1(map) {
	let m = {}
	map.forEach((k, v) => {
		m[v] = k
	})
	return m
}
const m2 = f1(map)

在这里插入图片描述
这里请注意，Map结构的forEach遍历时，是先遍历键值后遍历键名的

（4）对象转为Map

（5）Map转为JSON

（6）JSON转为Map

来源：CSDN

作者：奥特蛋_mm

链接：https://blog.csdn.net/weixin_43254676/article/details/103889512

标签

遍历

数组