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

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

相关推荐
程序员爱技术9 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js