ES6 中的 set 和 map 应用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中使用数据结构可以使代码更加简洁、可读性更高，ES6 中引入了一些新的数据结构，包括 set 和 map。它们可以替代数组和对象来存储和操作数据，并提供了更强大的功能。

Set

Set 是一种类似数组的数据结构，不过它成员的值都是唯一的，没有重复的值。

创建 Set

我们可以使用 Set 构造器来创建一个空的 Set：

const mySet = new Set();

也可以在创建时传入一个数组或类数组对象（如 NodeList）来初始化 Set：

const setWithValues = new Set([1, 2, 3, 'hello']);

这里我们创建了一个包含四个元素的 Set。

向 Set 添加元素

使用 Set.prototype.add() 方法向 Set 中添加单个元素：

mySet.add(1);
mySet.add('hello');
mySet.add({ key: 'value' });

从 Set 中删除元素

使用 Set.prototype.delete() 方法可以从 Set 中删除单个元素：

mySet.delete('hello');

判断 Set 中是否存在某个元素

可以使用 Set.prototype.has() 方法判断 Set 中是否存在指定元素：

mySet.has(1); // true
mySet.has('world'); // false

Set 的遍历

我们可以使用 Set.prototype.forEach() 方法遍历 Set，并对每个元素执行一些操作：

mySet.forEach((value) => {
  console.log(value);
});

Set.prototype.entries() 方法返回 Set 中每个元素的键/值对，以数组形式：

for (const [key, value] of mySet.entries()) {
  console.log(key, value);
}

Set 的应用

Set 最常见的应用场景就是去重，例如：

const arr = [1, 2, 3, 3, 1, 4];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4]

Map

Map 是一种存储键值对的数据结构，键和值可以是任何 JavaScript 数据类型。

创建 Map

我们可以使用 Map 构造器来创建一个空的 Map：

const myMap = new Map();

把一个数组传入构造函数，该数组的成员是一个个表示键值对的数组：

const mapWithValues = new Map([
  ['name', '张三'],
  ['age', 18],
  ['gender', '男'],
]);

这里我们创建了一个包含三个键值对的 Map。

向 Map 中添加元素

使用 Map.prototype.set() 方法向 Map 中添加键值对：

myMap.set('name', '张三');
myMap.set('age', 18);
myMap.set('gender', '男');

从 Map 中删除元素

使用 Map.prototype.delete() 方法可以从 Map 中删除指定键值对：

myMap.delete('name');

获取 Map 中的值

使用 Map.prototype.get() 方法获取指定键的值：

const age = myMap.get('age');
console.log(age); // 18

判断 Map 中是否存在某个键

使用 Map.prototype.has() 方法判断 Map 中是否存在指定键：

myMap.has('name'); // false
myMap.has('age'); // true

Map 的遍历

Map 可以使用 for...of、forEach、Map.prototype.keys()、Map.prototype.values() 等方法遍历。

遍历 Map 的键值对，可以使用 Map.prototype.entries() 方法，返回 Map 中每个键值对的数组：

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

Map 的应用

Map 常见的应用场景有：缓存、JSON 序列化等。

例如，在前端开发中，缓存页面数据是很常见的操作。我们可以使用 Map 来缓存页面中某个元素的位置信息：

const positionsMap = new Map();
// 缓存位置信息
positionsMap.set(document.querySelector('.my-element'), { x: 10, y: 20, z: 30 });
// 获取位置信息
const position = positionsMap.get(document.querySelector('.my-element'));
console.log(position);

总结

本文介绍了 ES6 中的 Set 和 Map，包括它们的创建、添加/删除元素、遍历和常见应用场景。使用 Set 和 Map 可以使代码更简洁易读并提供强大的功能。建议在实际开发中多加使用，熟练掌握它们的使用方法。

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