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 分钟前
Synopsys® Technology File(工艺文件)详解
前端
点点开心6 分钟前
攻防世界WEB(新手模式)2-5-web2
前端·学习·安全·web安全·网络安全
西门吹-禅6 分钟前
react native --Expo---Android 开发
javascript·react native·react.js
谢尔登6 分钟前
React19 渲染流程
前端·javascript·架构·ecmascript
我是伪码农7 分钟前
Vue 1.29
前端·javascript·vue.js
css趣多多9 分钟前
Vue动态组件以及keep-alive的使用
前端·javascript·vue.js
源代码•宸11 分钟前
Leetcode—144. 二叉树的前序遍历【简单】
经验分享·算法·leetcode·面试·职场和发展·golang·dfs
盐真卿11 分钟前
python第五部分:文件操作
前端·数据库·python
晚霞的不甘15 分钟前
Flutter for OpenHarmony《智慧字典》英语学习模块代码深度解析:从数据模型到交互体验
前端·学习·flutter·搜索引擎·前端框架·交互
摘星编程17 分钟前
React Native + OpenHarmony:自定义useLanguage语言切换
javascript·react native·react.js