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中的键是唯一的,每个键对应一个值。

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

相关推荐
小马哥编程14 分钟前
Function.prototype和Object.prototype 的区别
javascript
小白学前端66614 分钟前
React Router 深入指南:从入门到进阶
前端·react.js·react
web1309332039835 分钟前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴37 分钟前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱41 分钟前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿1 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
小k_不小1 小时前
C++面试八股文:指针与引用的区别
c++·面试
好名字08211 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光931 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui