本文将介绍 ES7 中新增的 Set 和 Map 集合，包括其定义和基本使用方法，并且会分别介绍 Set 和 Map 的不同特性和应用场景。最后，本文还会提供一些示例代码和学习建议。
Set 集合
Set 是一种无序、唯一的数据结构，它的定义很简单：
const set = new Set();
上面的代码创建了一个空的 Set 集合，我们也可以通过传入一个可迭代的对象来初始化 Set 集合，例如：
const set = new Set([1, 2, 3]);
上面的代码会创建一个包含了 1、2、3 元素的 Set 集合。
Set 基本操作
Set 集合提供了如下的基本操作方法：
add(value)：向 Set 集合添加一个值，如果值已存在则不会添加（Set 集合中的值是唯一的）。delete(value)：从 Set 集合中删除一个值，如果该值不存在则不会做任何操作。has(value)：判断 Set 集合是否包含某个值，返回布尔值 true 或 false。clear()：清空 Set 集合。
下面是一些示例代码：
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.has(1)); // true
console.log(set.has(4)); // false
set.delete(2);
console.log(set); // Set {1, 3}
set.clear();
console.log(set); // Set {}Set 遍历方法
Set 集合提供了三种遍历方法：
forEach(callbackFn, thisArg?)：遍历 Set 集合中的每一个元素，回调函数接收三个参数：当前元素值、当前元素的索引、Set 集合本身。第二个参数是可选参数，用来指定回调函数执行时的上下文 this。entries()：返回一个新的迭代器对象，它的元素是[value, value]的数组，即每个元素都是一个包含两个值的数组，第一个值和第二个值都是当前 Set 集合中的元素。values()：返回一个新的迭代器对象，它的元素是当前 Set 集合中的所有值（value），不包含索引。
下面是一些示例代码：
const set = new Set([1, 2, 3]);
set.forEach((value, index, set) => {
console.log(value, index, set);
});
for (const [index, value] of set.entries()) {
console.log(index, value);
}
for (const value of set.values()) {
console.log(value);
}Set 应用
Set 在很多场景下都很有用，例如：
- 判断一个数组中是否有重复元素。
- 去除一个数组中的重复元素。
- 统计一个字符串中有多少个不同的字符。
下面是一些示例代码：
// 判断一个数组中是否有重复元素
function hasDuplicatedItems(arr) {
return arr.length !== new Set(arr).size;
}
// 去除一个数组中的重复元素
function removeDuplicatedItems(arr) {
return [...new Set(arr)];
}
// 统计一个字符串中有多少个不同的字符
function countDifferentChars(str) {
return new Set(str).size;
}Map 集合
Map 是一种可迭代的、键值对的数据结构，它很容易理解：
const map = new Map();
上面的代码创建了一个空的 Map 集合，我们也可以通过传入一个可迭代的对象来初始化 Map 集合，例如：
const map = new Map([ ['name', 'Alice'], ['age', 18], ['sex', 'female'] ]);
上面的代码会创建一个包含了 name、age 和 sex 三个键的 Map 集合。
Map 基本操作
Map 集合提供了如下的基本操作方法：
set(key, value)：向 Map 集合添加一个键值对。get(key)：获取 Map 集合中某个键对应的值。has(key)：判断 Map 集合中是否包含某个键，返回布尔值 true 或 false。delete(key)：从 Map 集合中删除某个键及其对应的值，如果该键不存在则不会做任何操作。clear()：清空 Map 集合。
下面是一些示例代码：
const map = new Map();
map.set('name', 'Alice');
map.set('age', 18);
map.set('sex', 'female');
console.log(map.get('name')); // Alice
console.log(map.get('height')); // undefined
console.log(map.has('name')); // true
map.delete('age');
console.log(map); // Map { 'name' => 'Alice', 'sex' => 'female' }
map.clear();
console.log(map); // Map {}Map 遍历方法
Map 集合提供了三种遍历方法：
forEach(callbackFn, thisArg?)：遍历 Map 集合中的每一对键值对，回调函数接收三个参数：当前元素的值、当前元素的键、Map 集合本身。第二个参数是可选参数，用来指定回调函数执行时的上下文 this。entries()：返回一个新的迭代器对象，它的元素是[key, value]的数组，即每个元素都是一个包含两个值的数组，第一个值是当前 Map 集合中的键，第二个值是当前 Map 集合中的值。keys()：返回一个新的迭代器对象，它的元素是当前 Map 集合中的所有键。values()：返回一个新的迭代器对象，它的元素是当前 Map 集合中的所有值。
下面是一些示例代码：
const map = new Map([
['name', 'Alice'],
['age', 18],
['sex', 'female']
]);
map.forEach((value, key, map) => {
console.log(value, key, map);
});
for (const [key, value] of map.entries()) {
console.log(key, value);
}
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}Map 应用
Map 在很多场景中都很有用，尤其是在需要维护某个键对应的值时。例如：
- 统计一个数组中每个元素出现的次数。
- 缓存函数的计算结果。
下面是一些示例代码：
// 统计一个数组中每个元素出现的次数
function countOccurrences(arr) {
const map = new Map();
for (const item of arr) {
map.set(item, (map.get(item) || 0) + 1);
}
return map;
}
// 缓存函数的计算结果
function memoize(func) {
const cache = new Map();
return function (...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = func.apply(this, args);
cache.set(key, result);
return result;
};
}总结
本文对 ES7 中新增的 Set 和 Map 集合做了详细的介绍，包括其定义、基本操作、遍历方法和应用。希望本文能够帮助读者更好地了解这两种数据结构，并且能够在实际开发中应用它们。最后，建议读者在学习过程中多动手实践，加深对 Set 和 Map 的理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e90f4add4f0e0ff776636