ECMAScript 2021 中如何使用 Set 和 Map 数据结构-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 越来越流行，ECMAScript 标准也不断更新。在 ES6 中，Set 和 Map 数据结构被引入，这两个数据结构在 ES12 中得到了进一步的优化和完善，而在前端开发中使用 Set 和 Map 可以极大地减少开发时间和提高代码质量。

本文将详细讲解在 ECMAScript 2021（即 ES12）中如何使用 Set 和 Map 数据结构，包括具体的使用方法、示例代码及优化建议。

Set 数据结构

Set 数据结构是一种无序且不重复的集合。在 ES12 中，Set 数据结构新增了一些方法，使得它更加方便实用。

创建 Set

我们可以使用 Set 构造函数来创建一个空的 Set 数据结构：

const set = new Set();

也可以在构造函数中传入一个可迭代对象来创建一个包含该对象所有元素的 Set：

const set = new Set([1, 2, 3]);

添加元素

我们可以使用 add() 方法向 Set 中添加元素：

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

删除元素

我们可以使用 delete() 方法删除 Set 中的元素：

const set = new Set([1, 2, 3]);
set.delete(2);

判断元素是否存在

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

const set = new Set([1, 2, 3]);
set.has(2); // true
set.has(4); // false

获取 Set 长度

我们可以使用 size 属性获取 Set 中元素的数量：

const set = new Set([1, 2, 3]);
set.size; // 3

清空 Set

我们可以使用 clear() 方法清空 Set 中的所有元素：

const set = new Set([1, 2, 3]);
set.clear();

遍历 Set

我们可以使用 forEach()、for...of 或者 ... 运算符遍历 Set 中的所有元素：

const set = new Set([1, 2, 3]);
set.forEach(value => console.log(value));
for (let value of set) {
  console.log(value);
}
[...set].forEach(value => console.log(value));

Set 优化建议

在使用 Set 时，我们可以结合使用展开语法（...）和 Set 构造函数来去重一个数组：

const arr = [1, 2, 2, 3, 3, 4, 5];
const set = new Set(arr);
const uniqueArr = [...set]; // [1, 2, 3, 4, 5]

Map 数据结构

Map 数据结构是一种键值对集合，与 Set 不同的是，Map 中的键可以是任意类型的。

创建 Map

我们可以使用 Map 构造函数来创建一个空的 Map 数据结构：

const map = new Map();

也可以在构造函数中传入一个可迭代对象来创建一个包含该对象所有键值对的 Map：

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

添加键值对

我们可以使用 set() 方法向 Map 中添加键值对：

const map = new Map();
map.set('name', '张三');
map.set('age', 18);

删除键值对

我们可以使用 delete() 方法删除 Map 中的键值对：

const map = new Map([
  ['name', '张三'],
  ['age', 18]
]);
map.delete('age');

判断键是否存在

我们可以使用 has() 方法判断 Map 中是否存在指定键：

const map = new Map([
  ['name', '张三'],
  ['age', 18]
]);
map.has('age'); // true
map.has('gender'); // false

获取 Map 长度

我们可以使用 size 属性获取 Map 中键值对的数量：

const map = new Map([
  ['name', '张三'],
  ['age', 18]
]);
map.size; // 2

清空 Map

我们可以使用 clear() 方法清空 Map 中的所有键值对：

const map = new Map([
  ['name', '张三'],
  ['age', 18]
]);
map.clear();

遍历 Map

我们可以使用 forEach()、for...of 或者 ... 运算符遍历 Map 中的所有键值对：

-- -------------------- ---- -------
----- --- - --- -----
  -------- ------
  ------- ---
---
------------------- ---- -- ---------------- --------
--- ---- ----- ------ -- ---- -
  ---------------- -------
-
----------------------- ------- -- ---------------- --------展开代码

Map 优化建议

在使用 Map 时，我们可以结合使用对象解构和 Map 构造函数来将一个数组转换为 Map，例如将包含对象的数组转为 Map：

const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 }
];
const map = new Map(arr.map(obj => [obj.name, obj.age]));

小结

本文介绍了在 ECMAScript 2021 中如何使用 Set 和 Map 数据结构，包括创建 Set 和 Map、添加、删除、判断元素是否存在、获取长度、清空、遍历以及优化建议等内容。在实际编码中，这两个数据结构可以大大提高代码的质量和效率，希望读者可以掌握它们的用法并在实践中灵活应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c097ff314edc2684732ace

ECMAScript 2021 中如何使用 Set 和 Map 数据结构