前言
在 JavaScript 中，集合是一种非常常见的数据类型，它们可以存储一组不重复的值。在 ES6 中，我们引入了两个新的集合数据类型：Map 和 Set。本文将详细介绍这两种数据类型的特性、用法、优势以及使用时需要注意的事项。
Map
Map 的定义
Map 是一种键值对的集合，其中的键和值可以是任意类型的数据。与对象不同的是，Map 中的键不仅可以是字符串，还可以是任意类型的数据，比如数字、布尔值、对象等。
Map 的创建
Map 可以通过构造函数来创建，也可以通过字面量的方式来创建。
// javascriptcn.com 代码示例
// 通过构造函数创建 Map
const map1 = new Map();
const map2 = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
// 通过字面量创建 Map
const map3 = new Map({
key1: 'value1',
key2: 'value2'
});Map 的常用方法
Map 的常用方法包括：
- set(key, value)：向 Map 中添加一个键值对；
- get(key)：获取 Map 中指定键对应的值；
- has(key)：判断 Map 中是否存在指定键；
- delete(key)：删除 Map 中指定键的键值对；
- clear()：清空 Map 中的所有键值对；
- size：返回 Map 中键值对的数量。
// javascriptcn.com 代码示例
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
map.set('key3', 'value3'); // 添加键值对
map.get('key1'); // 获取值
map.has('key2'); // 判断是否存在
map.delete('key3'); // 删除键值对
map.clear(); // 清空 Map
map.size; // 获取键值对数量Map 的遍历
Map 的遍历方式包括：
- for...of 循环：遍历 Map 中的键值对；
- forEach() 方法：遍历 Map 中的键值对；
- keys() 方法：返回 Map 中所有的键；
- values() 方法：返回 Map 中所有的值；
- entries() 方法：返回 Map 中所有的键值对。
// javascriptcn.com 代码示例
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);
// for...of 循环遍历
for (const [key, value] of map) {
console.log(key, value);
}
// forEach() 方法遍历
map.forEach((value, key) => {
console.log(key, value);
});
// keys() 方法获取所有键
for (const key of map.keys()) {
console.log(key);
}
// values() 方法获取所有值
for (const value of map.values()) {
console.log(value);
}
// entries() 方法获取所有键值对
for (const [key, value] of map.entries()) {
console.log(key, value);
}Set
Set 的定义
Set 是一种值的集合，其中的值是唯一的，不会重复。与数组不同的是，Set 中的值不按照索引来存储，而是按照插入的顺序来存储。
Set 的创建
Set 可以通过构造函数来创建，也可以通过字面量的方式来创建。
// 通过构造函数创建 Set const set1 = new Set(); const set2 = new Set(['value1', 'value2']); // 通过字面量创建 Set const set3 = new Set(['value1', 'value2']);
Set 的常用方法
Set 的常用方法包括：
- add(value)：向 Set 中添加一个值；
- has(value)：判断 Set 中是否存在指定值；
- delete(value)：删除 Set 中指定的值；
- clear()：清空 Set 中的所有值；
- size：返回 Set 中值的数量。
const set = new Set(['value1', 'value2']);
set.add('value3'); // 添加值
set.has('value2'); // 判断是否存在
set.delete('value3'); // 删除值
set.clear(); // 清空 Set
set.size; // 获取值的数量Set 的遍历
Set 的遍历方式包括：
- for...of 循环：遍历 Set 中的值；
- forEach() 方法：遍历 Set 中的值；
- keys() 方法：返回 Set 中所有的值；
- values() 方法：返回 Set 中所有的值；
- entries() 方法：返回 Set 中所有的值，每个值都是一个数组，包含两个元素，都是该值本身。
// javascriptcn.com 代码示例
const set = new Set(['value1', 'value2']);
// for...of 循环遍历
for (const value of set) {
console.log(value);
}
// forEach() 方法遍历
set.forEach((value) => {
console.log(value);
});
// keys() 方法获取所有值
for (const value of set.keys()) {
console.log(value);
}
// values() 方法获取所有值
for (const value of set.values()) {
console.log(value);
}
// entries() 方法获取所有值
for (const [value] of set.entries()) {
console.log(value);
}总结
在 ES6 中，Map 和 Set 是两种非常实用的集合数据类型，它们可以帮助我们更加方便地处理一些复杂的数据结构。在使用 Map 和 Set 时，需要注意它们的特性和使用方法，避免出现一些不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fe5c195b1f8cacd8936e4