Set,Map数据结构

最新推荐文章于 2024-10-16 17:24:41 发布

你是时光轻轻呵唱

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量147

点赞数

分类专栏： JavaScript 文章标签： javascript 数据结构

本文链接：https://blog.csdn.net/weixin_45374451/article/details/106569893

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文首发于个人博客:www.wyb.plus

1. Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。

示例1:
const s = new Set();
let arr = [1, 2, 3, 2, 3, 4, 3, 4, 5]
arr.forEach(x => { s.add(x) });//这也是一种数组去重的方法
for (let i of s) {
 console.log(i);// 1 2 3 4 5
}
可以使用add()方法向 Set 结构加入成员
for of循环可以直接获得Set结构的内容本身

Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构,比如NodeList）作为参数，用来初始化。

向 Set 加入值的时候，不会发生类型转换，所以5和“5”是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

示例2:
let s = new Set();
let a = NaN;
let b = NaN;
s.add(a, b)
s//Set(1) {NaN}
Set数据结构里面的NaN只会有一个

两个对象总是不相等的。所以直接用对象字面量添加到Set结构里的数据一定是不会重复的

示例3:
let s = new Set();
s.add({})
s.add({})
s.add({})
s.add({})
console.log(s.size);//4

let s = new Set();
s.add({ y: 1 })
s.add({ y: 1 })
s.add({ x: 1 })
s.add({ x: 1 })
console.log(s);//Set { { y: 1 }, { y: 1 }, { x: 1 }, { x: 1 } }

2. Set实例的属性和方法

Set 结构的实例有以下属性。

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

四个操作方法 >>>

add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

示例4:
let s = new Set();
s.add(1).add(2).add(3).add(2)
console.log(s.size);//3  

console.log(s.has(1));//true 
console.log(s.has(4));//false

s.delete(2)
console.log(s.has(2));//false
注意 : Array.from方法可以将Set结构转化为数组

示例5:
let s = new Set([1, 3, 5, 7, 9]);
console.log(s);//Set { 1, 3, 5, 7, 9 }
let arr = Array.from(s)
console.log(arr);//[ 1, 3, 5, 7, 9 ]   
四个遍历方法 >>>

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

示例6:
let s = new Set([1, 3, 5, 7, 9]);
for (let item of s.keys()) {
    console.log(item);//1, 3, 5, 7, 9
}
for (let item of s.values()) {
    console.log(item);//1, 3, 5, 7, 9
}
for (let item of s.entries()) {
    console.log(item);
    //[ 1, 1 ]
    //[ 3, 3 ]
    //[ 5, 5 ]
    //[ 7, 7 ]
    //[ 9, 9 ]
}
由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

注意: 如果使用set.values的接口进行遍历的时候,可以省去.values, 直接for……of s就行

示例7:
let s = new Set([1, 3, 5, 7, 9]);
for (let item of s) {
    console.log(item);//1 3 5 7 9
}
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。

示例8:
let s = new Set([1, 3, 5, 7, 9]);
s.forEach((value, key) => {
    console.log(`${key}:${value}`);
});
//1:1
//3:3
//5:5
//7:7
//9:9
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。

3. Set 遍历操作的常见应用

数组去重

let s = new Set([1, 2, 3, 2, 3, 4]);
let newArr = [...s]
console.log(newArr);//[ 1, 2, 3, 4 ]

间接调用数组方法

let s = new Set([1, 2, 3, 2, 3, 4].filter(x => (x % 2) == 0));
console.log(s);//Set { 2, 4 }

实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3])
let b = new Set([2, 3, 4])

//并集
let union = new Set([...a, ...b])
console.log(union);//Set { 1, 2, 3, 4 }

//交集
let intersect = new Set([...a].filter(item => b.has(item)))
console.log(intersect);//Set { 2, 3 }   

//差级
let difference = new Set([...a].filter(item => !b.has(item)))
console.log(difference);//Set { 1 }

如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。

一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；
一种是利用Array.from方法。

示例:

//方法1
let s = new Set([1, 2, 3]);
s = new Set([...s].map(value => value * 2))
console.log(s);//Set { 2, 4, 6 }

//方法2
let s = new Set([1, 2, 3])
s = new Set(Array.from(s, value => value * 2))
console.log(s);//Set { 2, 4, 6 }

4. WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
let ws = new WeakSet()
ws.add(1);//TypeError: Invalid value used in weak set
ws.add(Symbol());//TypeError: Invalid value used in weak set
其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
let a = [
 [1, 2],
 [3, 4]
]
let ws = new WeakSet(a)
console.log(ws);
let a = [1, 2]
let ws = new WeakSet(a)
console.log(ws);
注意，是a数组的成员成为 WeakSet 的成员，而不是a数组本身。这意味着，数组的成员只能是对象。

WeakSet 结构有以下三个方法(与Set数据类型的方法类似)

WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。
let ws = new WeakSet()
let obj = {}
ws.add(window);
ws.add(obj)
console.log(ws.has(window));//true
console.log(ws.has(obj));//true
ws.delete(window)
console.log(ws.has(window));//false
注意 :

WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。
WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

5. Map

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键(ES6加入了Symbol作为属性名称)。这给它的使用带来了很大的限制。

比如 :
let data ={};
let element = document.getElementById("myDiv");
data[element]='foo'
Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

也就是说 >>>

Object 结构提供了“字符串—值”的对应，

Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

示例:
const m = new Map();
const o = { name: 'wyb' };
m.set(o, 'content');
m.get(o);
//"content"
m.has(o);
//true
m.delete(o)
//true
m.has(o)
//false
上面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。

作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

示例 :
const m = new Map([
['name', 'wyb'],
['age', 18]
]);
任何具有 Iterator 接口、且每个成员都是一个双元素的数组``( [[a,b],[c,d] ] )的数据结构都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。

示例:
//定义一个符合Map参数格式的Set数据结构
const s = new Set([
['name', 'wyb'],
['age', 18]
]);
const m = new Map(s);//把set作为参数传入Map()构造函数里
//通过Map来得到Set里面的值
m.get('name')//"wyb"
const m2 = new Map([
['sex', '男']//新生成一个Map,并且传参
])
const m3 = new Map(m2)//把m2这个Map作为参数传入一个新的Map里面
m3.get('sex')//"男"
说明Set和Map都可以用来生成新Map

如果对同一个键多次赋值，后面的值将覆盖前面的值。

示例:
const m = new Map();
m.set('a', 111).set('a', 222)
m.get('a')//222

//如果读取一个未知的键，则返回undefined。
m.get('c')//undefined
注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

示例1 :
const m = new Map();
m.set(['a'], 111)
m.get('a')
//undefined
上面代码的set和get方法，表面是针对同一个键，但实际上这是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。

同理，同样的值的两个实例，在 Map 结构中被视为两个键。

示例2 :
const m = new Map();
const v1 = ['a']
const v2 = ['a']
m.set(v1, 111).set(v2, 222)
m.get(v1);//111
m.get(v2);//222
简而言之: Map数据结构的键名是内存中间的某一段数据, 至于这数据是啥无所谓, 只有同一位置(内存地址)的同一个数据才会能当做是同一个键名

上面两个栗子需要这样改造 :
//例子1:
const m = new Map();
let a = ['a']
m.set(a, 111)
m.get(a);//111

//示例2:
const m = new Map();
const v = ['a']
const v1 = v
const v2 = v
m.set(v1, 111).set(v2, 222)
m.get(v1);//222
m.get(v2);//222
如果 Map 的键是一个基础类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，

比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。
另外，undefined和null也是两个不同的键。
虽然NaN不严格相等于自身，但 Map 将其视为同一个键。
const m = new Map();
m.set(-0, 'wyb')
m.get(+0);//"wyb"

m.set(true,'wyb')
m.get('true')//undefined

m.set(undefined, 'wyb')
m.get(undefined);//"wyb"

m.set(null, 'wyb')
m.get(null);//"wyb"

m.set(NaN, 'wyb')
m.get(NaN);//"wyb"

6. Map结构的属性和方法

6.1 基本属性和方法

size属性

//size属性返回 Map 结构的成员(一个键值对算一个)总数。
const m = new Map();
m.set('foo', true)
m.set('bar', false)
m.size;//2

set(key,value)方法

//set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
//重点:set方法返回的是当前的Map对象，因此可以采用链式写法。

const m = new Map();
m.set('foo', true).set('bar', false)
m.size;//2

get(key)方法

//get方法读取key对应的键值，如果找不到key，返回undefined。
const m = new Map();
m.set('foo', true).set('bar', false)
m.get('foo');//true

has(key)方法

//has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
const m = new Map();
m.set('foo', true).set('bar', false)
m.has('bar');//true

delete(key)方法

//delete方法删除某个键，返回true。如果删除失败，返回false。
const m = new Map();
m.set('foo', true).set('bar', false)
m.delete('bar');//true

clear()方法

//clear方法清除所有成员，没有返回值。
const m = new Map();
m.set('foo', true).set('bar', false)
m.clear()
m;//Map(0) {}

6.2 遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。

6.3 Map转数组

Map 结构转为数组结构，比较快速的方法是使用扩展运算符（…）

示例:
const m = new Map([
 [1, '1'],
 [2, '2'],
 [3, '3']
]);
[...m.keys()];
[...m.values()];
[...m.entries()];
[...m]
Map 本身没有map和filter方法 , 可以结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤

示例:
const m = new Map([
 [1, '1'],
 [2, '2'],
 [3, '3']
]);
const m1 = new Map(
 [...m].filter(([k, v]) => k > 1)
)
const m = new Map([
 [1, '1'],
 [2, '2'],
 [3, '3']
]);
const m2 = new Map(
 [...m].map(([k, v]) => [k * 2, v + '1'])
)
注意写法 : map , filter 回调函数里面的参数是数组 , 函数体里面要同时操作key和value都是用的数组

6.4 Map与其他数据结构的转换

Map转数组

const map = new Map();
map.set('name', 'wyb').set('age', 18);
[...map]

在这里插入图片描述

转完之后是一个二维数组 , 并且二维数组里面的每一项有且仅有两个元素

数组转Map

//同理,也必须是二维数组,且二维数组里面的每一项都要两个元素,才能转成正常的Map
let arr = [
    ['name', 'wyb'],
    ['age', '18']
]
const map = new Map(arr);
map

在这里插入图片描述

Map转对象

//无损转化前提是Map里面的每个key都是字符串类型,如果不是字符串则强制转为字符串
const map = new Map();
map.set('name', 'wyb').set('age', 18)

function toStr(m) {
    let obj = Object.create(null)//创建一个空对象
    for (let [k, v] of m) {//遍历传入的map的keys,values
        obj[k] = v//让k成为新对象的属性,并且值等于v
    }
    return obj//返回新对象
}
toStr(map)//执行函数,传入map

在这里插入图片描述

对象转Map

let obj = {
    name: 'wyb',
    age: 18
}
let map = new Map()
for (let k of Object.keys(obj)) {
    map.set(k, obj[k])
}
map

在这里插入图片描述

7. WeakMap

7.1 基本概念

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

WeakMap与Map的区别有两点。

首先，WeakMap``只接受对象作为键名（null除外），不接受其他类型的值作为键名。
其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

示例:
const wm = new WeakMap();
wm.set(1, 2)
wm.set(Symbol(), 2)
wm.set(null, 1)
WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子
const e1 = document.getElementById('foo')
const e2 = document.getElementById('bar')
const arr = [
    [e1, 'foo元素'],
    [e2, 'bar元素']
]
上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。
arr[0] = null
arr[1] = null
一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

WeakMap 就是为了解决这个问题而诞生的 >>>

它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。
因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。
也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

7.2 API的区别

WeakMap 与 Map 在 API 上的区别主要是两个:

一是没有遍历操作（即没有keys()、values()和entries()方法），也没有size属性。因为没有办法列出所有键名，某个键名是否存在完全不可预测，跟垃圾回收机制是否运行相关。这一刻可以取到键名，下一刻垃圾回收机制突然运行了，这个键名就没了，为了防止出现不确定性，就统一规定不能取到键名。
二是无法清空，即不支持clear方法。

因此，WeakMap只有四个方法可用：get()、set()、has()、delete()。

7.3 WeakMap的应用

应用示例一:

如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

一个典型应用场景是，在网页的 DOM 元素上添加数据，就可以使用WeakMap结构。当该 DOM 元素被清除，其所对应的WeakMap记录就会自动被移除。
const wm = new WeakMap();
const element = document.getElementById('example');
wm.set(element, 'info')
wm.get(element)
WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。

WeakMap结构有助于防止内存泄漏。

应用示例二:

WeakMap 的另一个用处是部署私有属性。
const _counter = new WeakMap();
const _action = new WeakMap()
class Countdown {
    constructor(counter, action) {
        _counter.set(this, counter);
        _action.set(this, action)
    }
    dec() {
        let counter = _counter.get(this);
        if (counter < 1) return;
        counter--;
        _counter.set(this, counter);
        if (counter === 0) {
            _action.get(this)()
        }
    }
}

const c = new Countdown(2, () => console.log('DONE'))
c.dec();
c.dec();//DONE
Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。