如何在 ECMAScript 2017 中使用 Set 数据结构？

在 ECMAScript 2017 中，我们可以使用 Set 数据结构来存储一组唯一的值。Set 是一种类似于数组的数据结构，但是它的成员是唯一的，没有重复的值。在本文中，我们将讨论 Set 数据结构的使用方法以及其在前端开发中的应用场景。

Set 数据结构的基本用法

创建 Set

我们可以使用 new Set() 创建一个空的 Set。也可以在创建时传入一个数组或类数组对象，将其转换为 Set。

const set = new Set([1, 2, 3]);
console.log(set); // Set {1, 2, 3}

添加元素

我们可以使用 add() 方法向 Set 中添加元素。如果添加的元素已经存在于 Set 中，那么不会重复添加。

const set = new Set();
set.add(1);
set.add(2);
set.add(2);
console.log(set); // Set {1, 2}

删除元素

我们可以使用 delete() 方法从 Set 中删除指定元素。

const set = new Set([1, 2]);
set.delete(2);
console.log(set); // Set {1}

判断元素是否存在

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

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

遍历 Set

Set 可以使用 for...of 循环遍历。

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

获取 Set 的大小

我们可以使用 size 属性获取 Set 的大小。

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

清空 Set

我们可以使用 clear() 方法清空 Set。

const set = new Set([1, 2, 3]);
set.clear();
console.log(set); // Set {}

Set 数据结构在前端开发中的应用场景

数组去重

Set 可以轻松实现数组去重。

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

字符串去重

Set 可以轻松实现字符串去重。

const str = 'hello world';
const set = new Set(str);
const uniqueStr = Array.from(set).join('');
console.log(uniqueStr); // helo wrd

缓存数据

Set 可以用于缓存数据，避免重复请求。

const cache = new Set();
function getData() {
  if (cache.has('data')) {
    console.log('from cache');
  } else {
    console.log('from server');
    cache.add('data');
  }
}
getData(); // from server
getData(); // from cache

总结

Set 是一种类似于数组的数据结构，但是它的成员是唯一的，没有重复的值。在前端开发中，Set 可以用于数组去重、字符串去重、缓存数据等场景。掌握 Set 的基本用法，有助于我们更好地应用它，提高开发效率。

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