Map和weakMap区别

taidabao

已于 2024-04-08 10:37:45 修改

阅读量542

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-04-08 10:08:30 首次发布

本文链接：https://blog.youkuaiyun.com/taidabao/article/details/137497094

版权

本文比较了JavaScript中map和weakMap的数据结构，主要关注它们在键类型、引用强度以及遍历方式上的差异。weakMap的键为弱引用，可能导致在遍历时元素被垃圾回收。同时，介绍了MapIterator在遍历过程中的行为特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相同点

都是存储键值对形式

不同点

1、map的键可以是任何数据类型，weakMap的键只能是对象
2、map强引用，weakMap弱引用

3、map的键是有序存在，可以通过keys，values，entries，forEach遍历，而weakMap键为弱引用，遍历过程中某些键可能被垃圾机制清除，因此没有内置遍历方法

weakMap弱引用举例如下：

let obj1 = { name: 'obj1' }
let obj2 = { name: 'obj2' }
let weakMap = new WeakMap() 
weakMap.set(obj1, 1)
weakMap.set(obj2, 2)
// 将obj1对{ name: 'obj1' }的引用移除
obj1 = null
// 此时weakMap中只剩下: {obj2 => 2}
console.log('weakMap', weakMap)
//但如果是map类型则obj1仍然存在

map遍历方法使用举例：

<script>
        let myMap = new Map()
        let key = 1, a = 2
        myMap.set(key, 1)
        myMap.set(a, 'a')
        let keys = myMap.keys()
        let vals = myMap.values()
        let all = myMap.entries()
        console.log(keys, vals, all)
        //打印结果如下
        // {1, 2}
        // {1, 'a'}
        // {1=>1, 2=>'a'}键值对
        myMap.forEach((value, key) => {
            console.log(key, value)
        })
        // 1 1
        // 2 'a'
        for(key of keys){
            console.log(key)
        }
        // 1, 2
        // 另外两个vals， all类似
        keys = myMap.keys()
        //此处必须重新获取keys
        // 因为在上一次keys遍历中我们已经访问到kyes的最后一位，它并不会自动返回到第一位，如果继续访问结果都会是undefined
        for(let i = 0;i < myMap.size;i++){
            key = keys.next().value
            console.log(key)
        }
        // 1, 2
        // 另外两个vals，all类似
    </script>

Map Iterator对象每次遍历下个元素都会调用next()，一次遍历完成之后，位置并不会复原。
所以多次遍历必须用对应的map方法(keys, values(), entries())重新获取Map Iterator对象。
若不重新获取，则迭代器无返回值，范围undefined