ES6新特性（中）——ES6的集合（set集合、map集合等）

最新推荐文章于 2025-06-07 09:22:31 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2025-06-07 09:22:31 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46420078/article/details/121783191

本文详细介绍了ES6中的集合类型，包括Set集合的操作方法和遍历方式，WeakSet的概念和应用场景，Map集合的概念、属性、方法以及如何转化为数组，以及WeakMap的概念、用途和方法。通过对这些集合类型的深入理解，开发者能够更好地利用它们进行数据管理和操作。

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

ES6的集合

一、Set集合

Set集合：是一种数据结构，结构类似于数组，且没有重复的值。主要用于数组去重，字符串去重。

1、操作方法

（1）add():添加值，返回Set结构本身

let set = new Set()
set.add(1);
console.log(set);
set.add(1).add(2).add(1)
console.log(set)
//注：拓展运算符 （...）可以将Set值扩展出来
console.log(...set)
console.log([...set])

在这里插入图片描述
（2）delete():删除值，冰返回一个boolean表示是否删除成功（3）has():判断该值是否存在，并返回一个Boolean

let set = new Set()
set.add(1).add(2);
let a = set.delete(1);
console.log(set)
//注：拓展运算符 （...）可以将Set值扩展出来
console.log(...set)
console.log(a)
set.delete(3)
console.log(...set)

在这里插入图片描述
（3）has()：判断该值是否存在，并返回一个Boolean

let set = new Set()
set.add(1).add(2);
let a = set.has(1);//true
let b = set.has(3);//false
console.log(a,b)

（4）clear():清除所有值。没有返回值

let set = new Set();
set.add(1).add(2);
set.clear();
console.log(set,[...set]);//Set(0){} []

2、遍历方法：

（1）由于Set只有键值没有键名，也可以说键和值是同一个（键、值相同，可以省略），所以keys和values的返回值相同

let set = new  Set();
set.add(1).add(2).add(3)
for(let i of set.keys()){   //keys遍历
    console.log(i)
}
for(let i of set.values()){ //values遍历
    console.log(i)
}
set.add('hello').add('world');
for( let i of set.entries() ){ //打印键值对
    console.log(i) 
}

在这里插入图片描述
（2）forEach():

let set = new Set();
set.add('hello').add('world');
set.forEach((key,val)=>{
    console.log(key + '||' + val)
})

在这里插入图片描述
（3）Set可以接受一个数组作为参数：

let arr = ['小红','小明','小强','小明'];
let set = new Set(arr);
console.log(...set)

在这里插入图片描述
（4）Set实现并集与交集：

let arr = [4,5,6];
let list = [5,6,7];
let setA = new Set(arr);
let setB = new Set(list);
//并集 ：集合A与集合 B的并集A U B
let bj = new Set([...setA,...setB])
console.log(bj)// 返回Set结构 Set(4) {4,5,6,7}
//交集：集合A 与 集合B 的交集 A ∩ B
let jj = new Set([...setA].filter(val => setB.has(val)))//通过 filter拿到符合条件的值
console.log(jj)//Set(2) { 5, 6 }

在这里插入图片描述

二、WeakSet集合

1、概念理解

WeakSet 对象允许你将弱引用对象储存在一个集合中

WeakSet 与 Set 的区别：

（1）WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以。
（2）WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素

2、方法：

WeakSet 支持 add，has 和 delete 方法，但不支持 size 和 keys()，并且不可迭代。
（1）add(value)：在WeakSet 对象中添加一个元素value
（2）has(value)：判断 WeakSet 对象中是否包含value
（3）delete(value)：删除元素 value
（4）clear()：清空所有元素constructor：构造函数，任何一个具有 Iterable 接口的对象，都可以作参数

let jack = {name: "jack"};
            let weakSet = new WeakSet();
            weakSet.add(jack, 22);
            console.log( weakSet.has(jack) ); // true
            weakSet.delete(jack);
            console.log( weakSet );  // WeakSet {}

3、WeakSet 的应用场景/好处

用于存储DOM节点，而不用担心这些节点从文档移除时会引发内存泄露

三、Map集合

1、概念理解

JavaScript的对象(Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

ES6中的Map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有的数据类型。键名的等价性判断是通过调用Object.is()方法实现的，所以数字5与字符串"5"会被判定为两种类型，可以分别作为独立的两个键出现在程序中，这一点与对象不一样，因为对象的属性名总会被强制转换成字符串类型。

注意：
（1）有一个例外，Map集合中将+0和-0视为相等，与Object.is()结果不同
（2）如果需要“键值对”的数据结构，Map比Object更合适,具有极快的查找速度

2、属性

size:返回Map中的元素个数。

3、基本方法

（1）set（）：给Map添加数据，返回添加后的Map（给已存在的键赋值会覆盖掉之前的值）
（2）get（）：获取某个key的值，返回key对应的值，没有则返回unfined
（3）has（）：检测是否存在某个key，返回布尔值
（4）delete（）：删除某个key及其对应的value，返回布尔值，成功：true；失败：false
（5）clear（）：清除所有的值，返回undefined

let map = new Map();
map.set("name","houchai");
map.set("age",25);
console.log(map.size);   //2;llllllllllllllllllllll;llllll
console.log(map.has("name"));//true；;；；；；；；；；；；
console.log(map.get("name"));//"huochai"
console.log(map.has("age"));//true
console.log(map.get("age"));//25

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

map.clear();
console.log(map.has("name")); // false
console.log(map.get("name")); // undefined
console.log(map.has("age")); // false
console.log(map.get("age")); // undefined
console.log(map.size); // 0

4、遍历方法

注意
Map的遍历顺序就是插入顺序
（1）keys（）：获取Map的所有key
（2）values（）：获取 Map的所有值
（3）entries（）：获取Map的所有成员
（4）forEach（）：遍历Map 的所有成员

const map = new Map([
    ['F','no'],
    ['T','yes']
]);
for(let key of map.keys()){
    console.log(key);// "F" "T"
}
for(let val of map.values()){
    console.log(val);//"no" "yes"
}
for(let item of map.entries()){
    console.log(item[0],item[1]);//"F""no"   "T""yes"
}
//或者
for(let [key,value] of map.entries()){
    console.log(key,value);//"F""no"   "T""yes"
}
//等同于使用map.entries()
for (let [key, value] of map) {
    console.log(key,value);//"F""no"   "T""yes"
}

5、转为数组

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

const map = new Map(
    [
        [1,'one'],
        [2,'two'],
        [3,'three']
    ]
);
[...map.keys()]; // [1,2,3]
[...map.values()];//['one','two','three']
[...map.entries()];//[[1,'one'],[2,'two'],[3,'three']]
[...map]//[[1,'one'],[2,'two'],[3,'three']]

6、结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤

const map0 = new Map()
.set(1,'a')
.set(2,'b')
.set(3,'c');

const map1 = new Map(
    [...map0].filter(([k,v])=>k<3)
);//产生Map结构{1=>'a',2=>'b'}

const map2 = new Map(
    [...map0].map(([k,v]) => [k*2,'_'+v])
);//产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

7、forEach(）

const map = new Map([
    [1,'one'],
    [2,'two'],
    [3,'three']
]);
map.forEach((value,key,map)=>{
    console.log(value,key,map);
})

在这里插入图片描述

四、WeakMap集合

1、概念理解

WeakMap 对象是一组键值对的集合，其中的键是弱引用，其中，键必须是对象，而值可以是任意。

注意：WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。

WeakSet 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakSet 的 key 是不可枚举的。

2、使用WeakMap集合

ES6中的WeakMap类型是一种存储着许多键值对的无序列表，列表的键名必须是非null类型的对象，键名对应的值则可以是任意类型。

WeakMap的接口与Map非常相似，通过set()方法添加数据，通过get()方法获取数据

let map = new WeakMap(),
element = document.querySelector(".element");
map.set(element, "Original");
let value = map.get(element);
console.log(value); // "Original"
element.parentNode.removeChild(element); // 移除元素
element = null; // 该WeakMap在此处为空

WeakMap集合不支持size属性，从而无法验证集合是否为空；

3、WeakMap集合支持的方法

（1）has（）：检测给定的键在集合中是否存在
（2）delete（）：可移除指定的键值对

let map = new WeakMap(),
element = document.querySelector(".element");
map.set(element, "Original");
console.log(map.has(element)); // true
console.log(map.get(element)); // "Original"
map.delete(element);
console.log(map.has(element)); // false
console.log(map.get(element)); // undefined

4、WeakMap集合的用途

（1）储存DOM元素

let myElement = document.getElementById('btn');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {
let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
console.log(logoData.timesClicked)
}, false);

代码中，myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement。一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏风险
（2）注册监听事件的listener对象，就很和使用WeakMap实现

const listener = new WeakMap();
    
listener.set(element1, handler1);
listener.set(element2, handler2);
                
element1.addEventListener('click', listener.get(element1), false);
element2.addEventListener('click', listener.get(element2), false);

监听函数放在WeakMap里面。一旦 DOM 对象消失，跟它绑定的监听函数也会自动消失
（3）部署私有属性
我们创建对象的时候，通常写一个构造函数

function Person(name) {
    this._name = name;
 }
Person.prototype.getName = function() {
    return this._name;
};

但这时，创建一个Person 对象的时候，我们可以直接访问name 属性：

const person = new Person("sam")
console.log(persn.name)

我们不想让用户直接访问name属性，直接使用下面的方法将name包装成私有属性

let Person = (function() {
    let privateData = new WeakMap();
    function Person(name) {
    privateData.set(this, { name: name });
	}
	Person.prototype.getName = function() {
    	return privateData.get(this).name;
	};
	return Person;
}());

const person = new Person('json');
console.log(person.getName())