ES6 中的 Map, WeakMap, Set, WeakSet 四种数据结构对比-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，引入了四种新的数据结构：Map、WeakMap、Set 和 WeakSet。这些数据结构在实际开发中都有不同的用途和优劣点。本文将对它们进行详细的比较和介绍。

Map

Map 是一种键值对的集合，它可以使用任意类型的值作为键和值。与对象不同的是，Map 中的键值对是有序的，可以使用 forEach 方法按照插入顺序遍历 Map 中的每一个键值对。Map 还提供了 size 属性，可以获取 Map 中键值对的数量。

Map 的优点在于它可以使用任意类型的值作为键和值，而对象只能使用字符串或 Symbol 作为键。此外，Map 还提供了一些有用的方法，如 set、get、has、delete 等，可以方便地操作键值对。

下面是一个使用 Map 存储学生信息的示例：

// javascriptcn.com 代码示例
const studentMap = new Map();

studentMap.set("张三", { age: 18, gender: "男" });
studentMap.set("李四", { age: 20, gender: "女" });

console.log(studentMap.size); // 2

studentMap.forEach((value, key) => {
  console.log(`${key} 的年龄是 ${value.age}，性别是 ${value.gender}`);
});

WeakMap

WeakMap 与 Map 类似，也是一种键值对的集合。不同的是，WeakMap 中的键只能是对象，而值可以是任意类型的值。WeakMap 中的键值对是弱引用的，当键对象没有引用时，它们会被自动回收。

WeakMap 的优点在于它可以避免内存泄漏的问题。在一些场景下，我们需要存储一些与对象相关的数据，但是又不想影响对象的生命周期，此时可以使用 WeakMap。

下面是一个使用 WeakMap 存储学生信息的示例：

// javascriptcn.com 代码示例
const studentWeakMap = new WeakMap();

const zhangsan = { name: "张三" };
const lisi = { name: "李四" };

studentWeakMap.set(zhangsan, { age: 18, gender: "男" });
studentWeakMap.set(lisi, { age: 20, gender: "女" });

console.log(studentWeakMap.has(zhangsan)); // true
console.log(studentWeakMap.get(zhangsan)); // { age: 18, gender: "男" }

zhangsan = null; // 键对象被回收

console.log(studentWeakMap.has(zhangsan)); // false

Set

Set 是一种无序的集合，它不允许重复的值存在。与数组不同的是，Set 中的值是唯一的，可以使用 forEach 方法遍历 Set 中的每一个值。Set 还提供了 size 属性，可以获取 Set 中的值的数量。

Set 的优点在于它可以快速地判断一个值是否存在于集合中，并且可以使用一些集合操作，如交集、并集、差集等。

下面是一个使用 Set 存储学生姓名的示例：

// javascriptcn.com 代码示例
const studentSet = new Set();

studentSet.add("张三");
studentSet.add("李四");
studentSet.add("张三"); // 重复的值不会被添加

console.log(studentSet.size); // 2

studentSet.forEach((name) => {
  console.log(`学生姓名：${name}`);
});

WeakSet

WeakSet 与 Set 类似，也是一种无序的集合。不同的是，WeakSet 中的值只能是对象，而且是弱引用的。当值对象没有引用时，它们会被自动回收。

WeakSet 的优点在于它可以避免内存泄漏的问题。在一些场景下，我们需要存储一些与对象相关的数据，但是又不想影响对象的生命周期，此时可以使用 WeakSet。

下面是一个使用 WeakSet 存储学生对象的示例：

// javascriptcn.com 代码示例
const studentWeakSet = new WeakSet();

const zhangsan = { name: "张三" };
const lisi = { name: "李四" };

studentWeakSet.add(zhangsan);
studentWeakSet.add(lisi);

console.log(studentWeakSet.has(zhangsan)); // true

zhangsan = null; // 值对象被回收

console.log(studentWeakSet.has(zhangsan)); // false

总结

Map、WeakMap、Set 和 WeakSet 都是 ES6 中引入的新的数据结构，它们在实际开发中有不同的用途和优劣点。Map 和 WeakMap 都是键值对的集合，它们的区别在于 WeakMap 中的键是弱引用的。Set 和 WeakSet 都是无序的集合，它们的区别在于 WeakSet 中的值是弱引用的。

在实际开发中，我们需要根据具体的需求选择合适的数据结构。如果需要存储任意类型的键值对，可以使用 Map；如果需要存储与对象相关的数据，又不想影响对象的生命周期，可以使用 WeakMap；如果需要存储唯一的值，并且进行集合操作，可以使用 Set；如果需要存储与对象相关的数据，又不想影响对象的生命周期，并且需要存储唯一的对象，可以使用 WeakSet。

希望本文对你理解和使用 ES6 中的四种数据结构有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657cfd37d2f5e1655d7c6d81