前端入门级详解set和map

109 阅读4分钟

本文来详细解说一下set map weakset weakmap

Set

Set为一种数据结构,一般我们用它来存储一些不重复的值的集合和进行一些去重操作,同时其中也包含了一些很常用的方法。 我们来定义一下set,看一下他身上有什么方法

    //set
    let set = new Set([1,2,3])
    //观察set上的方法
    console.log(set)

image.png 通过以上我们可以简单地看到set对象的一些方法,一些简单的方法调用我们就简单说说

Set 对象提供了以下常见的方法:

  • add(value):向 Set 中添加新元素。
  • delete(value):从 Set 中移除指定元素。
  • has(value):如果值存在则返回 true,否则返回 false。
  • clear():从 Set 中移除所有元素。
  • forEach(callback):为每个元素调用回调函数。

现在来说一些比较特别的会返回迭代器对象的方法

entries

entries会返回一个新的迭代器对象,这个对象包含了的元素为[value,value]形式的数组,value 是集合对象中的每个元素,而且迭代器对象元素的顺序即集合对象中元素插入的顺序。该方法可以用于遍历 Set 对象中的所有元素,获取它们的值。

//entries方法,返回了一个迭代器对象
    const setentries = set.entries()
    console.log(setentries)
    console.log(setentries.next())
    console.log(setentries.next())
    console.log(setentries.next())

image.png 如上可以看到,我们定义了一个setentires对象来存储set.entries返回的新对象,并对其进行了一个简单的遍历,和其他普通的迭代器一样,我们也可以通过value来访问到数据,也可以通过done来判断是否对该数据进行了迭代遍历。

values

vlaues也会返回一个新的迭代器对象,但这个对象包含的元素只有vlaue,其他与entries相似,我们也可以遍历Set对象从而获取到它的值

    //values方法 返回一个迭代器对象
    const setvalues = set.values()
    console.log(setentries)
    console.log(setvalues.next())
    console.log(setvalues.next())
    console.log(setvalues.next().value)

image.png 以上的运行结果可以看出 values方法和entries方法定义出来的迭代器对象只有对象数据类型有些差别,但总体上都是相同的。

keys

keys方法和values十分相似,他两的主要差别只在于返回的迭代器对象中包含的具体内容是键名还是值,但set的键名就是它的值,因此这个方法与values几乎没有区别

    //keys方法 
    const setkeys = set.keys()
    console.log(setkeys)
    console.log(setkeys.next())
    console.log(setkeys.next())
    console.log(setkeys.next())

image.png

接下来我们来聊聊set的兄弟----map

Map

Map相对于Set来说是一种存储键值对的数据结构,每一个键都是唯一且只有一个,可以用任何基本类型或对象作为键值,对象在比较中会使用引用相等。例如:

    const map = new Map()
    // console.log(map)
    const obj1 = { a:1, b:2 }
    const obj2 = { a:1, b:2 }
    map.set(obj1,1)
    map.set(obj2,2)
    console.log(map)

image.png 如上,可以看出map内引入obj1和obj2作为key值,map内是出现了两个值,因为obj1和obj2虽然值相同,但他们的引用地址不是同一个,因此在这里他们两是两个不同的对象,因此map分别存了两个键值。 下面我们可以来看看map有哪些方法

image.png 同样的一些简单的方法就简单地说说:

  • set(key, value): 向 Map 对象中添加一个新的键值对。
  • get(key): 获取指定键的值,如果没有找到则返回 undefined。
  • has(key): 检查 Map 对象中是否包含指定的键。
  • delete(key): 从 Map 对象中删除指定的键及其对应的值。
  • clear(): 清空 Map 对象中所有的键值对。
  • size: 返回 Map 对象中键值对的数量。 接下来说说在map中的keys values 以及 entries这三个方法

keys

map的keys和set的keys方法存在了一些不同,因为set的键值是同一个值,而map相对于set来说,它的键和值是分开的,我们可以通过set的keys对set的所有值进行一个迭代,但在map中,我们只能通过keys返回得到一个map对象所有键的迭代对象。

    const mapkeys = map.keys()
    console.log(mapkeys)

image.png

如图,图上遍历了map的key值,map的值并没有获取到,这就是map和set的区别

values

同样的,map的values也只是会返回map的值迭代对象

    const mapvalues = map.values()
    console.log(mapvalues)

截屏2023-05-11 17.19.57.png 如图,获取到了map的值迭代器。

entries

map的entries方法返回的迭代器对象包含了map对象的所有键值对。

    const mapentires = map.entries()
    console.log(mapentires)

image.png 以上可以很看到返回的迭代器对象,其中key代表的是键,value代表的是值

以上就是map set的一些基本知识啦,有哪些需要补充的点欢迎大家在评论区补充。