在前端开发中，经常需要对一些数据进行分类和区分，例如根据不同的标签显示不同的内容、根据用户权限显示不同的操作等等。在 ES12 中，新增了一些对象来帮助我们更方便地进行数据的区分和映射。本文将介绍这些对象的用法和示例代码，并探讨它们的学习和指导意义。
Set 对象
Set 对象是一种无序且唯一的集合，可以用来存储一组不重复的值。我们可以使用 Set 对象来对一些数据进行去重操作。
创建 Set 对象
可以使用 Set 构造函数来创建一个空的 Set 对象：
const mySet = new Set();
也可以在创建时传入一个数组来初始化 Set 对象：
const mySet = new Set([1, 2, 3]);
向 Set 对象中添加元素
可以使用 add 方法向 Set 对象中添加元素：
mySet.add(4);
从 Set 对象中删除元素
可以使用 delete 方法从 Set 对象中删除元素：
mySet.delete(4);
判断 Set 对象中是否包含某个元素
可以使用 has 方法判断 Set 对象中是否包含某个元素：
mySet.has(4); // false
遍历 Set 对象中的元素
可以使用 for...of 循环遍历 Set 对象中的元素：
for (const item of mySet) { console.log(item); }
示例代码
下面是一个使用 Set 对象对数组进行去重的示例代码：
const arr = [1, 2, 3, 1, 2, 4]; const mySet = new Set(arr); const uniqueArr = Array.from(mySet); console.log(uniqueArr); // [1, 2, 3, 4]
Map 对象
Map 对象是一种键值对的集合，可以用来存储一组不重复的键值对。我们可以使用 Map 对象来对一些数据进行分类和映射操作。
创建 Map 对象
可以使用 Map 构造函数来创建一个空的 Map 对象：
const myMap = new Map();
也可以在创建时传入一个数组来初始化 Map 对象：
const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], ]);
向 Map 对象中添加键值对
可以使用 set 方法向 Map 对象中添加键值对：
myMap.set('key3', 'value3');
从 Map 对象中删除键值对
可以使用 delete 方法从 Map 对象中删除键值对：
myMap.delete('key3');
判断 Map 对象中是否包含某个键
可以使用 has 方法判断 Map 对象中是否包含某个键：
myMap.has('key3'); // false
获取 Map 对象中的键值对数量
可以使用 size 属性获取 Map 对象中的键值对数量：
myMap.size; // 2
遍历 Map 对象中的键值对
可以使用 for...of 循环遍历 Map 对象中的键值对：
for (const [key, value] of myMap) { console.log(key, value); }
示例代码
下面是一个使用 Map 对象对数组进行分类的示例代码：
-- -------------------- ---- ------- ----- --- - --- -- -- -- -- --- ----- ----- - --- ------ ------------------ -- - ----- --- - ---- - - --- - - ------ - ------ -- ---------------- - -------------------------- - ---- - -------------- -------- - --- ------------------------------- -- --- -- -- ------------------------------ -- --- -- --展开代码
WeakSet 对象和 WeakMap 对象
WeakSet 对象和 WeakMap 对象与 Set 对象和 Map 对象类似，但是它们的元素和键必须是弱引用的。这意味着如果一个元素或键没有被其他对象引用，它们将会被自动垃圾回收。
这些对象的用法和示例代码与 Set 对象和 Map 对象类似，这里不再赘述。
学习和指导意义
使用 ES12 自带的对象区分映射可以让我们更方便地对数据进行分类和操作，提高了代码的可读性和可维护性。同时，这些对象也为我们提供了更多的选择，使得我们可以更灵活地处理数据。
掌握这些对象的用法，不仅可以提高我们的编程能力，还可以让我们更好地应对各种数据处理场景。因此，建议开发者在日常开发中多尝试使用这些对象，深入理解它们的用法和原理，以提高自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d11777a941bf713425207f
