九、ES6 SET与MAP


一、SET与MAP

Set 是不包含重复值的列表。你一般不会像对待数组那样来访问 Set 中的某个项;相反更常见的是只在 Set 中检查某个值是否存在Map 则是键与相对应的值的集合。因此, Map 中的每个项都存储了两块数据,通过指定所需读取的键即可检索对应的值。 Map 常被用作缓存,存储数据以便此后快速检索。由于 Set 与 Map 并不正式存在于 ES5 中,开发者就只能使用非数组的对象。
ES6 向 JS 添加了 Set 与 Map

二、ES6中的Set

ES6 新增了 Set 类型,这是一种无重复值的有序列表。 Set 允许对它包含的数据进行快速
访问,从而增加了一个追踪离散值的更有效方式。
创建 Set 并添加项目:

let set = new Set()
set.add(6)
set.add("6")
set.add(6) //重复了,该值会被忽略
console.log(set.size) //2

Set 不会使用强制类型转换来判断值是否重复。这意味着 Set 可以同时包含数值 6 与 字符串 “6” ,将它们都作为相对独立的项(在 Set 内部的比较使用Object.is() 方法,来判断两个值是否相等,唯一的例外是 +0 与 -0 在 Set 中被判断为是相等的)。你还可以向 Set 添加多个对象,它们不会被合并为同一项:

let set = new Set(),
    key1 = {},
    key2 = {}
set.add(key1)
set.add(key2)
console.log(set.size) // 2

你可以使用数组来初始化一个 Set ,并且 Set 构造器会确保不重复地使用这些值。

let set = new Set([1,1,3,4])
console.log(set.size) // 3

Set 构造器实际上可以接收任意可迭代对象作为参数。能使用数组是因为它们默认就是可迭代的, Set 与 Map 也是一样。 Set 构造器会使用迭代器来提取参数中的值。
你可以使用 has() 方法来测试某个值是否存在于 Set 中

let set = new Set([1,1,3,4])
console.log(set.has(3))  // true
console.log(set.has(10)) // false

也可以从 Set 中将值移除。你可以使用 delete() 方法来移除单个值,或调用 clear() 方法来将所有值从 Set 中移除。

let set = new Set([1,1,3,4])
console.log(set.has(3))  // true
set.delete(3)
console.log(set.has(3))  // false
console.log(set.has(4))  // true
set.clear()
console.log(set.has(4))  // fasle

三、回顾数组foreach

以前遍历数组

let arr = [10, 9, 20, -5]
for(let i=0;i<arr.length;i++){
    console.log(arr[i])
}

使用foreach

let arr = [10, 9, 20, -5]
// 将数组中的每个元素按顺序取出来,
// 箭头函数中val是独立的,函数体也是独立的
arr.forEach(val=>console.log(val))

四、Set中的foreach

forEach() 方法会被传递一个回调函数,该回调接受三个参数:

  1. Set 中下个位置的值;
  2. 与第一个参数相同的值;
  3. 目标 Set 自身。
    具有 forEach() 方法的其他对象(即数组与 Map )都会给回调函数传递三个参数,前两个参数都分别是下个位置的值与键(给数组使用的键是数值索引)。
    然而 Set 却没有键。 ES6 标准的制定者本可以将 Set 版本的 forEach() 方法的回调函数设定为只接受两个参数,但这会让它不同于另外两个版本的方法。不过他们找到了一种方式让这些回调函数保持参数相同:将 Set 中的每一项同时认定为键与值。于是为了让 Set 的forEach() 方法与数组及 Map 版本的保持一致,该回调函数的前两个参数就始终相同了。
let set = new Set([1, 2])
set.forEach((value,key,transSet)=>{
    console.log(value + ' ' + key)
    console.log(set === transSet)
})

// 输出结果是:
// 1 1
// true
// 2 2
// true

虽然 Set 能非常好地追踪值,并且 forEach() 可以让你按顺序处理每一项,但是却无法像数组那样用索引来直接访问某个值。如果你想这么做,最好的选择是将 Set 转换为数组。

五、将Set转换为数组

将数组转换为 Set 相当容易,因为可以将数组传递给 Set 构造器;而使用扩展运算符也能简单地将 Set 转换回数组。

let set = new Set([1, 2, 3, 4]),
    array = [...set]
console.log(array) // [1, 2, 3, 4]

六、Weak Set(弱Set)

由于 Set 类型存储对象引用的方式,它也可以被称为 Strong Set 。对象存储在 Set 的一个实例中时,实际上相当于把对象存储在变量中。只要对于 Set 实例的引用仍然存在,所存储的对象就无法被垃圾回收机制回收,从而无法释放内存.

let set = new Set(),
    key = {}
set.add(key)
console.log(set.size)   // 1
// 取消原始引用
key = null
console.log(set.size)   // 1
// 重新获取原始引用
key = [...set][0]

ES6 包含了 Weak Set ,该类型只允许存储对象弱引用,而不能存储基本类型的值。对象的弱引用在它自己成为该对象的唯一引用时,不会阻止垃圾回收.

let set = new WeakSet(),
    key = {}

// 将对象加入set
set.add(key)

console.log(set.has(key))   // true
key = null
console.log(set.has(key))   // false

Weak Set 与正规 Set 的一些共有特征,但是它们还有一些关键的差异:

  1. 对于 WeakSet 的实例,若调用 add() 方法时传入了非对象的参数,就会抛出错误(has() 或 delete() 则会在传入了非对象的参数时返回 false );
  2. Weak Set 不可迭代,因此不能被用在 for-of 循环中;
  3. Weak Set 无法暴露出任何迭代器(例如 keys() 与 values() 方法),因此没有任何编程手段可用于判断 Weak Set 的内容;
  4. Weak Set 没有 forEach() 方法;
  5. Weak Set 没有 size 属性

七、ES6的Map

Set 给了你处理值列表的新方式,不过若需要给这些值添加额外信息,它就没用了。这就是ES6 还添加了 Map 类型的原因。

ES6 的 Map 类型是键值对的有序列表,而键和值都可以是任意类型。键的比较使用的是Object.is() ,因此你能将 5 与 “5” 同时作为键,因为它们类型不同。这与使用对象属性作为键的方式(指的是用对象来模拟 Map )截然不同,因为对象的属性会被强制转换为字符串。

let map = new Map()
map.set('title', 'Hello, ES6')
map.set('year', 2023)
console.log(map.get('title')) // Hello, ES6
console.log(map.get('year'))  // 2023

如果键不存在于map中,则get()方法就返回undefined.

Map可以将对象作为键

let map = new Map(),
    key1 = {},
    key2 = {}
map.set(key1, 6)
map.set(key2, 60)
console.log(map.get(key1))
console.log(map.get(key2))

此代码使用了对象 key1 与 key2 作为 Map 的键,并存储了两个不同的值。由于这些键不会被强制转换成其他形式,每个对象就都被认为是唯一的。这允许你给对象关联额外数据,而无须修改对象自身。

八、Map的方法

以下三个方法在 Map 与 Set 上都存在:
has(key) :判断指定的键是否存在于 Map 中;
delete(key) :移除 Map 中的键以及对应的值;
clear() :移除 Map 中所有的键与值。
Map 同样拥有 size 属性,用于指明包含了多少个键值对。

let map = new Map()
map.set('name', '张三')
map.set('age', 20)

console.log(map.size)  // 2
console.log(map.has('name')) // true
console.log(map.get('name')) // 张三

map.delete('name')
console.log(map.size) // 1
console.log(map.has('name')) // false
console.log(map.get('name')) // undefined

map.clear()

九、Map的初始化

与Set类似,可以将数组传递给Map构造器,以便使用数据来实始化一个Map。该数组中的每一项也必须是数组,内部数组的首个项会作为键,第二项则为对应值。因此整个Map就被这些双项数组所填充。

let map = new Map([['name', '张三'], ['age', 30]])

console.log(map.has('name'))  // 张三
console.log(map.get('age')) // 30
console.log(map.size)  // 2

十、Map 上的 forEach 方法

Map 的 forEach() 方法类似于 Set 与数组的同名方法,它接受一个能接收三个参数的回调函数:

  1. Map 中下个位置的值;
  2. 该值所对应的键;
  3. 目标 Map 自身。
let map = new Map([['name', '张三'], ['age', 30]])

map.forEach((value, key, transMap)=>{
    console.log(key + ' ' + value)
    console.log(map === transMap)
})

// 输出结果是:
// name 张三
// true
// age 30
// true

十一、Weak Map

Weak Map 对 Map 而言,就像 Weak Set 对 Set 一样: Weak 版本都是存储对象弱引用的方式。在 Weak Map 中,所有的键都必须是对象(尝试使用非对象的键会抛出错误),而且这些对象都是弱用,不会干扰垃圾回收。当 Weak Map 中的键在 Weak Map 之外不存在引用时,该键值对会被移除。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永恒的宁静

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值