JavaScript集合数据结构

MDN官网对集合的解释：developer.mozilla.org/zh-CN/docs/...

Set()集合

在数学中，集合作为一种数据结构，表示具有同一种属性的元素的集成；数学中集合不允许有重复的元素，集合内元素的属性必须唯一。自从ES6版本的诞生，集合也被引入到了JavaScript编程语言中。JavaScript中的集合Set()和数学中的集合概念基本一致：集合中只能存储同一种数据类型的元素，且相同的内容和值只能存储一次。

操作集合

创建一个集合

创建一个集合需要使用new关键字，通过Set()构造函数创建出一个集合对象。注意⚠️Set()集合接收一个数组作为其参数。并通过这个数组形成集合。

创建一个ordersSet的集合用来显示菜谱

javascript 复制代码

const ordersSet = new Set([
    'Pasta',
    'Pizza',
    'Pizza',
    'Risotto',
    'Pasta',
    'Pizza',
]);
// 设定集合，集合中不能出现相同的元素，如果有相同的元素会被删除
console.log(ordersSet);

甚至通过集合，你一样可以完成对集合内的字符串拆分字符的操作。这种操作类似于对数组内带有字符串的元素做展开语法。只不过由于操作在集合中，相同的字符元素会被删除。

javascript 复制代码

console.log(new Set('LeeGeo'));

集合可以为空(null)

和数学概念中的集合性质一样（空即是任何集合的子集）。Javascript中的集合也是可以为空的。

javascript 复制代码

console.log(new Set()); // 集合可以为空

获取集合大小

和数组一样，集合也可以获取它的大小。只不过与array.length属性不同。你需要用创建集合下的.size属性来获取集合大小。

arduino 复制代码

const ordersSet = new Set([
    'Pasta',
    'Pizza',
    'Pizza',
    'Risotto',
    'Pasta',
    'Pizza',
]);
console.log(ordersSet.size) //判断集合大小,重复的元素不会计入集合大小

判断...元素是否在集合中

同样，在JavaScript中你可以使用集合Set下的has方法来查找集合中对应的元素。例如查找字符串元素'Pasta'``'bread'元素是否在集合中。

sql 复制代码

const ordersSet = new Set([
    'Pasta',
    'Pizza',
    'Pizza',
    'Risotto',
    'Pasta',
    'Pizza',
]);
console.log(ordersSet.has('Pizza'));      // 判断'Pizza'元素在集合中，返回布尔值true
console.log(ordersSet.has('Bread'));      // 判断'Bread'元素不在集合中，，返回布尔值false

在集合中添加或删除元素

在集合中一般通过add()方法为集合添加元素。例如将字符串'Garlic Bread'添加到ordersSet集合中添加元素中。

arduino 复制代码

ordersSet.add('Garlic Bread');    //在ordersSet集合中添加元素
console.log(ordersSet);

注意⚠️：由于集合是没有索引值的，所以你无法通过索引像查询数组元素一样查询集合元素

既然集合可以增加元素，当然集合也可以删除指定的元素。通过delete()方法即可将需要删除的元素删除。

go 复制代码

ordersSet.delete('Risotto');    //删除ordersSet中的Risotto元素

同时，你也需要注意，对集合的删除操作对整个全局作用域都有影响。只要你执行了删除元素的操作，集合的元素大小即为删除元素后的大小，无论你是在删除元素前调用还是删除元素后。集合中的Set下的size永远是删除元素后的那个值。

arduino 复制代码

ordersSet.add('Garlic Bread');
console.log('Before delete: ', ordersSet);
ordersSet.delete('Risotto');    //删除ordersSet中的Risotto元素
// ordersSet.clear();  //删除ordersSet集合中的所有元素
console.log('After delete: ', ordersSet); //注意⚠️：集合是没有索引值的，你无法通过索引像查询数组元素一样查询集合元素

当然，如果有必要，你也可以使用clear()方法清除集合ordersSet中的所有元素。

scss 复制代码

ordersSet.clear();  //删除ordersSet集合中的所有元素

集合也可以使用for-of循环

集合作为一种可迭代数据结构，当然可以通过for-of循环遍历集合中的每一个元素。例如遍历集合orderSet中的每个元素。

javascript 复制代码

const ordersSet = new Set([
    'Pasta',
    'Pizza',
    'Pizza',
    'Risotto',
    'Pasta',
    'Pizza',
]);
for (const order of ordersSet) console.log('for-of loop: ', order);

数组与集合的相互转换

通过Set构造函数，我们可以轻松完成数组与集合，集合与数组的相互转换。

创建一个新数组staff，并由构造函数Set()将staff数组转换成为一个名为staffUnique的集合。

ini 复制代码

const staff = ['waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter'];
const staffUnique = new Set(staff);
console.log(staffUnique);

当然将集合转换为数组也非常简单。只需利用扩展语法将集合内的数据依次解构，并输入到数组中即可。

ini 复制代码

const staffArr = [...staffUnique];
console.log(staffArr);

还有一件事

毕竟JavaScript作为一门函数式编程语言，实际上你可以在Set()构造函数中就可以使用对应的size、has等方法在生成集合时对集合做操作。

arduino 复制代码

console.log(
    new Set(['waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter']).size
);

console.log(new Set('yunkunWang').size);