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

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

相关推荐
小镇程序员16 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐18 分钟前
前端图像处理(一)
前端
程序猿阿伟25 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒27 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪35 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背38 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5