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

const obj2 = {
		name: '张三',
		title: '作者'
	}

	function objToMap(obj) {
		const map = new Map()
		for(let k of Object.keys(obj)) {
			map.set(k, obj[k])
		}
		return map

	}
	const m = objToMap(obj2)
	console.log(m)

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值