Set与Map方法解析,告别重复与键值烦恼

引言

SetMap是两个在ES6引入的强大数据结构,本文将深入介绍SetMap方法,并通过实际案例解析它们的应用与优势。

set方法

Set的定义

Set是一种集合,它的特点是不允许重复元素,而且元素是无序排列的。想象一下,你有一堆宝石,而Set就像一个能自动去掉重复宝石的魔法袋。

Set基本操作

js 复制代码
// 创建一个Set
let mySet = new Set();

// 添加元素
mySet.add(1);
mySet.add(2);

// 删除元素
mySet.delete(2);

// 检查元素是否存在
console.log(mySet.has(1)); // 输出: true

在这段代码中,我们可以使用new Set()来得到一个新的Set对象。接下来,我们可以通过add方法向Set中添加元素,使用delete方法删除元素,而has方法则用于检查元素是否存在。

Set的应用场景

Set经常用于需要唯一性的场景,比如在一群人中找出不同的名字,或者在一篇文章中找出所有独特的单词。通过Set,我们可以轻松地实现一个数组去重。

js 复制代码
var arr = [1, 2, 1, 1, '1', '1']

function unique(arr) {
    let s = new Set(arr)
    let res = Array.from(s) // Array.from() 方法从一个类数组或可迭代对象创建一个新的数组。。
    return res
}
console.log(unique(arr));

结果会是 [1, 2, '1']。这是因为数字1和字符串'1'在 JavaScript 中被视为不同类型的数据,所以它们不会被认为是重复的元素。而 Set 会保留第一个出现的重复元素,所以在这里只保留了一个1

Map方法

Map的定义

Map是一种键值对的集合,其中的键可以是任意数据类型,而且相对于对象,Map提供了更灵活的处理方式。可以把Map看做是一个字典,其中的单词(键)与定义(值)完美匹配。

Map的基本操作

js 复制代码
// 创建一个Map
let myMap = new Map();

// 添加键值对
myMap.set('name', '小明');
myMap.set('age', 18);

// 获取值
console.log(myMap.get('name')); // 输出: 小明

// 删除键值对
myMap.delete('age');

// 检查键是否存在
console.log(myMap.has('age')); // 输出: false

在这段代码中,我们使用new Map()可以创建一个全新的Map对象。通过set方法添加键值对,get方法获取值,delete方法删除键值对,而has方法用于检查键是否存在。

Map的应用场景

数组元素加倍:

js 复制代码
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

在这段代码中,我们使用map方法遍历numbers数组的每个元素,对每个元素执行指定的函数。这里的函数接受一个参数num,代表数组中的每个元素,然后将每个元素乘以2,返回计算后的结果。这样,doubledNumbers数组就包含了原数组中每个元素乘以2的结果。

Set与Map的比较

数据结构:Set是一种集合,而Map是一种键值对的集合。

存储的内容:Set存储的是单一值,而Map存储的是键值对。

元素唯一性:Set保证元素的唯一性,不允许重复值;Map保证键的唯一性,每个键对应一个值。

有序性:Set中的元素是无序的,而Map中的键值对是有序的,按照插入的顺序排列。

使用场景:Set常用于需要存储唯一值的场景,比如数组去重;Map常用于存储具有键值关系的数据,比如对象属性。

总结

Set:

Set中的元素是唯一的,不会有重复的值。

Set中的元素是无序排列的,不会按照插入顺序或者其他规律进行排序。

Set可以存储任意数据类型,包括基本数据类型和对象引用。

Map:

Map是一种键值对的集合,其中的键可以是任意数据类型,而值也可以是任意数据类型。

Map中的键值对是有序的,保留了插入的顺序。

Map中的键是唯一的,每个键对应一个值。

感谢您的阅读,点赞关注作者精彩继续

相关推荐
尘中客4 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_4 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中4 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007474 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
前端大波5 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
Highcharts.js6 小时前
适合报表系统的可视化图表|Highcharts支持直接导出PNG和PDF
javascript·数据库·react.js·pdf
ZC跨境爬虫6 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构
慧一居士6 小时前
Vue项目中,何时使用布局、子组件嵌套、插槽 对应的使用场景,和完整的使用示例
前端·vue.js
叫我一声阿雷吧6 小时前
JS 入门通关手册(35):执行上下文、调用栈与作用域链深度解析
javascript·作用域链·js进阶·执行上下文·调用栈·变量提升·闭包原理
Можно6 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app