javascript中的set的常用方法和操作

 更新时间:2024年11月05日 11:55:44   作者:AndrewPerfect  
这篇文章主要介绍了javascript中的set的常用方法和操作,在JavaScript中Set是一种特殊的数据结构,用于存储唯一的值,创建Set对象可以通过new Set()实现,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在 JavaScript 中,Set 是一种内置的数据结构,用于存储唯一值的集合。Set 对象允许你存储任意类型的值,无论是基本类型还是对象类型。以下是 Set 的常用方法和操作:

1. 创建一个 Set:

你可以通过 new Set() 来创建一个新的 Set 对象。

const mySet = new Set();

2. 向 Set 中添加元素:

使用 .add() 方法可以向 Set 中添加元素。

mySet.add(1);       // Set { 1 }
mySet.add(5);       // Set { 1, 5 }
mySet.add(1);       // Set { 1, 5 } (1 已经存在,不会重复添加)
mySet.add('hello'); // Set { 1, 5, 'hello' }

3. 检查 Set 中是否存在某个值:

使用 .has() 方法来检查一个值是否在 Set 中。

console.log(mySet.has(1));    // true
console.log(mySet.has(10));   // false

4. 删除 Set 中的元素:

使用 .delete() 方法可以删除某个元素。

mySet.delete(5);    // true
console.log(mySet); // Set { 1, 'hello' }

5. 获取 Set 的大小:

使用 .size 属性可以获得 Set 的元素数量。

console.log(mySet.size); // 2

6. 清空 Set:

使用 .clear() 方法可以清空 Set 中的所有元素。

mySet.clear();
console.log(mySet.size); // 0

7. 遍历 Set:

你可以使用 forEach() 或 for...of 循环来遍历 Set

PS:[1, 2, 3, 'a', 'b']为一个数组。

const anotherSet = new Set([1, 2, 3, 'a', 'b']);

// 使用 forEach 遍历
anotherSet.forEach(value => {
  console.log(value);
});

// 使用 for...of 遍历
for (let value of anotherSet) {
  console.log(value);
}

8. Set 和数组的转换:

你可以很容易地将 Set 转换为数组,或者将数组转换为 Set

// Set 转换为数组
const setArray = [...anotherSet]; // [1, 2, 3, 'a', 'b']

// 数组转换为 Set
const array = [1, 2, 2, 3, 4];
const arraySet = new Set(array); // Set { 1, 2, 3, 4 }

9. 去重数组中的重复值:

利用 Set 的唯一性,你可以快速去除数组中的重复项。

const numbers = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5] 首先将数据转换为set,再将set转换为数组。

set和map的区别:

1. 存储类型:

  • Set:只存储唯一值,不存储键值对。每个元素都是一个值,且不能重复。

    const mySet = new Set(); 
    mySet.add(1); 
    mySet.add(2); 
    mySet.add(2); // 无法添加重复的值 
    console.log(mySet); // Set { 1, 2 }
  • Map:存储的是键值对。每个元素都有一个键和一个对应的值,键可以是任何类型(包括对象)。

    const myMap = new Map(); 
    myMap.set('key1', 'value1'); 
    myMap.set('key2', 'value2'); 
    console.log(myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }

2. 元素的唯一性:

  • Set:不能存储重复的值。Set 会确保集合中的每个元素都是唯一的。

    const set = new Set([1, 1, 2, 3]); 
    console.log(set); // Set { 1, 2, 3 } (1 不会重复)
  • Map:键必须是唯一的,但不同的键可以对应相同的值。Map 中允许重复的值,只要键不同。

    const map = new Map(); 
    map.set('a', 1); 
    map.set('b', 1); // 相同的值,键不同 
    console.log(map); // Map { 'a' => 1, 'b' => 1 }

3. 键和值的使用:

  • Set:只有值,没有键。每个值在 Set 中都是唯一的元素。

    const set = new Set([1, 2, 3]); 
    set.forEach(value => console.log(value)); // 遍历的是值
  • Map:每个元素都有键和值,使用 .set(key, value) 来添加键值对,用 .get(key) 来获取对应的值。

    const map = new Map(); 
    map.set('name', 'Alice'); 
    map.set('age', 30); 
    console.log(map.get('name')); // 'Alice'

4. 迭代:

  • Set:遍历 Set 时,你只能遍历值。

    const set = new Set([1, 2, 3]); 
    for (let value of set) { 
      console.log(value); // 1, 2, 3 
    }
  • Map:遍历 Map 时可以遍历键、值或者键值对。

    const map = new Map([['key1', 'value1'], ['key2', 'value2']]); // 遍历键 
    for (let key of map.keys()) { 
      console.log(key); // key1, key2 
    } // 遍历值 
    for (let value of map.values()) { 
      console.log(value); // value1, value2 
    } // 遍历键值对 
    for (let [key, value] of map.entries()) { 
      console.log(key, value); // key1 value1, key2 value2 
    }

5. 方法:

  • Set

    • .add(value):向 Set 中添加值。
    • .delete(value):删除 Set 中的值。
    • .has(value):检查 Set 中是否有某个值。
    • .clear():清空 Set
    • .size:获取 Set 的大小。
  • Map

    • .set(key, value):向 Map 中添加键值对。
    • .get(key):通过键获取对应的值。
    • .delete(key):删除某个键值对。
    • .has(key):检查 Map 中是否有某个键。
    • .clear():清空 Map
    • .size:获取 Map 的大小。

6. 使用场景:

  • Set:适用于处理唯一值集合的场景,如数组去重、存储一组无重复的值。

    const uniqueValues = new Set([1, 2, 2, 3, 4]); // Set { 1, 2, 3, 4 }
  • Map:适用于需要键值对存储的场景,如缓存、字典、关联数组等。

    const dictionary = new Map(); 
    dictionary.set('apple', 'A fruit'); 
    dictionary.set('car', 'A vehicle');

总结:

  • Set 用于存储唯一的值集合,没有键。
  • Map 用于存储键值对,键和值都可以是任意类型。

到此这篇关于javascript中的set的常用方法和操作的文章就介绍到这了,更多相关js中set用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript 生成无限下拉列表实现代码

    Javascript 生成无限下拉列表实现代码

    js生成无线下拉列表的实现代码。
    2009-03-03
  • 在js文件中引入(调用)另一个js文件的三种方法

    在js文件中引入(调用)另一个js文件的三种方法

    这篇文章主要介绍了在js文件中引入(调用)另一个js文件的三种方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • TypeScript使用axios库进行高效的网页数据抓取

    TypeScript使用axios库进行高效的网页数据抓取

    在当今的互联网时代,数据已成为企业最宝贵的资产之一,无论是社交媒体分析、市场趋势预测还是用户行为研究,高效地获取和处理网页数据都是至关重要的,本文将通过访问抖音平台的案例,介绍如何在TypeScript中使用axios库进行高效的网页数据抓取
    2024-08-08
  • Bootstrap popover用法详解

    Bootstrap popover用法详解

    这篇文章主要为大家详细介绍了Boostrap popover用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS动态修改表格cellPadding和cellSpacing的方法

    JS动态修改表格cellPadding和cellSpacing的方法

    这篇文章主要介绍了JS动态修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • TypeScript内置工具类型快速入门运用

    TypeScript内置工具类型快速入门运用

    TypeScript 中内置了很多工具类型,我们无需导入,可以直接使用。 其中的很多都是比较常用的,接下来我们根据使用范围来一一介绍,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-03-03
  • 微信小程序中的轮播图实现示例

    微信小程序中的轮播图实现示例

    打开一个小程序,我们会发现,一般构图排版都是图片banner - 快捷按钮 - 产品/文章列表等详细信息,底部导航一般是2~5个。这样的排版是比较美观的,那么为什么要这样设计,这些轮播图、快捷按钮等小程序组件都有什么用呢?接下来就带你详细了解下
    2022-12-12
  • Bootstrap实现的表格合并单元格示例

    Bootstrap实现的表格合并单元格示例

    这篇文章主要介绍了Bootstrap实现的表格合并单元格,涉及bootstrap界面布局相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • ajax接收后台数据在html页面显示

    ajax接收后台数据在html页面显示

    本篇文章主要介绍了ajax接收后台数据在html页面显示的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 前端导出PDF的组件及方法实际例子

    前端导出PDF的组件及方法实际例子

    这篇文章主要介绍了三种流行的前端导出PDF的组件和方法,分别是jsPDF、pdfMake和Print.js,每个库都有其特点和适用场景,可以根据具体需求选择合适的库,需要的朋友可以参考下
    2025-02-02

最新评论