在 ECMAScript 2020 中，Set 和 Map 是两个新的内置对象，用于管理数据集合。
Set 集合
Set 集合是一组唯一值的集合，允许添加、删除、查找和迭代元素。它的方法遵循以下语法：
new Set([iterable])
其中可选参数 iterable 是迭代器对象，可以是任意类型的。
添加元素
可以通过以下方法向 Set 集合中添加元素：
add(value)：将 value 添加到集合中，返回集合本身。
例如：
const set = new Set();
set.add(1).add(2).add(3); // Set { 1, 2, 3 }删除元素
可以通过以下方法从 Set 集合中删除元素：
delete(value)：删除集合中的 value，返回一个布尔值表示是否删除成功。
例如：
const set = new Set([1, 2, 3]); set.delete(2); // true
查找元素
可以通过以下方法查找 Set 集合中的元素：
has(value)：返回一个布尔值，表示集合是否包含 value。
例如：
const set = new Set([1, 2, 3]); set.has(2); // true
迭代元素
可以通过以下方法迭代 Set 集合中的元素：
keys()：返回一个包含集合所有元素的迭代器对象。values()：与 keys() 方法相同，返回一个包含集合所有元素的迭代器对象。entries()：返回一个包含集合所有元素的迭代器对象，其中每个元素都是一个数组[value, value]。forEach()：遍历所有元素并执行给定的回调函数。
例如：
// javascriptcn.com 代码示例
const set = new Set([1, 2, 3]);
// 遍历所有元素
set.forEach(value => {
console.log(value);
});
// 使用迭代器对象
const iterator = set.entries();
for (let element of iterator) {
console.log(element);
}Map 集合
Map 集合是一组键值对的集合，允许添加、删除、查找和迭代元素。它的方法遵循以下语法：
new Map([iterable])
其中可选参数 iterable 是迭代器对象，可以是任意类型的。
添加元素
可以通过以下方法向 Map 集合中添加元素：
set(key, value)：将 key 和 value 添加到集合中，返回集合本身。
例如：
const map = new Map();
map.set('name', 'Tom').set('age', 18); // Map { 'name' => 'Tom', 'age' => 18 }删除元素
可以通过以下方法从 Map 集合中删除元素：
delete(key)：删除集合中的 key，返回一个布尔值表示是否删除成功。
例如：
const map = new Map([
['name', 'Tom'],
['age', 18],
]);
map.delete('age'); // true查找元素
可以通过以下方法查找 Map 集合中的元素：
get(key)：返回 key 对应的 value，如果不存在则返回 undefined。has(key)：返回一个布尔值，表示集合是否包含 key。
例如：
const map = new Map([
['name', 'Tom'],
['age', 18],
]);
map.get('name'); // 'Tom'
map.has('age'); // true迭代元素
可以通过以下方法迭代 Map 集合中的元素：
keys()：返回一个包含集合所有键的迭代器对象。values()：返回一个包含集合所有值的迭代器对象。entries()：返回一个包含集合所有键值对的迭代器对象。forEach()：遍历所有键值对并执行给定的回调函数。
例如：
// javascriptcn.com 代码示例
const map = new Map([
['name', 'Tom'],
['age', 18],
]);
// 遍历所有键值对
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// 使用迭代器对象
const iterator = map.entries();
for (let element of iterator) {
console.log(element);
}总结
Set 和 Map 集合是管理数据集合的有用工具，可以大幅简化相关操作。熟练掌握它们的方法能为前端开发提高效率和质量。
示例代码：
// javascriptcn.com 代码示例
// Set 集合示例
const set = new Set();
set.add(1).add(2).add(3); // Set { 1, 2, 3 }
set.delete(2); // true
set.has(2); // false
set.forEach(value => {
console.log(value);
});
const iterator = set.entries();
for (let element of iterator) {
console.log(element);
}
// Map 集合示例
const map = new Map();
map.set('name', 'Tom').set('age', 18); // Map { 'name' => 'Tom', 'age' => 18 }
map.delete('age'); // true
map.get('name'); // 'Tom'
map.has('age'); // false
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
const iterator = map.entries();
for (let element of iterator) {
console.log(element);
}来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528346d7d4982a6ebab739a