【Web 前端】ES6中,Set和Map的区别 ?

简介: 【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?

image.png

ES6 中 Set 和 Map 的区别详解

在 ES6 中,SetMap 是两种新的数据结构,它们分别用于存储唯一值的集合和键值对的集合。尽管它们在某些方面具有相似的功能,但它们的设计目的和使用场景有所不同。本文将详细分析 SetMap 的区别,并通过示例代码片段帮助读者理解它们的特性和用法。

1. Set 和 Map 的基本概念

1.1 Set

Set 是一种集合,它存储一组唯一的值,不允许重复。Set 中的值是无序的,没有索引,它提供了一组操作方法用于添加、删除和检查值的存在。

1.2 Map

Map 是一种键值对的集合,它将键映射到值,每个键对应一个值,键是唯一的。Map 中的键可以是任意类型的值,包括对象、函数和基本数据类型。

2. Set 和 Map 的区别

2.1 数据存储方式

  • Set 存储的是一组唯一的值,值之间没有重复;
  • Map 存储的是键值对的集合,每个键对应一个值,键是唯一的。

2.2 使用场景

  • Set 适用于存储一组唯一的值,并且不关心值的顺序;
  • Map 适用于存储键值对的集合,可以根据键快速查找对应的值。

2.3 遍历方式

  • Set 可以使用 forEach 方法进行遍历,也可以通过 for...of 循环遍历;
  • Map 可以使用 forEach 方法或 for...of 循环遍历键值对,也可以通过 keys()values()entries() 方法遍历键、值和键值对。

2.4 其他差异

  • Set 没有提供直接修改值的方法,只能通过删除和重新添加来实现值的更新;
  • Map 提供了直接修改值的方法,可以通过键来修改对应的值。

3. 示例代码片段

3.1 Set 示例

// 创建一个 Set
const set = new Set();

// 添加值
set.add(1);
set.add(2);
set.add(3);
set.add(1); // 重复值不会被添加

// 删除值
set.delete(2);

// 检查值是否存在
console.log(set.has(1)); // 输出:true
console.log(set.has(2)); // 输出:false

// 遍历值
set.forEach(value => console.log(value)); // 输出:1 3

3.2 Map 示例

// 创建一个 Map
const map = new Map();

// 添加键值对
map.set('name', 'Alice');
map.set('age', 30);

// 获取值
console.log(map.get('name')); // 输出:Alice
console.log(map.get('age')); // 输出:30

// 修改值
map.set('age', 31);

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

// 遍历键值对
map.forEach((value, key) => console.log(`${
     
     key}: ${
     
     value}`)); // 输出:name: Alice

4. 总结

SetMap 是 ES6 中新增的两种数据结构,它们分别用于存储唯一值的集合和键值对的集合。它们的设计目的和使用场景有所不同,Set 适用于存储一组唯一的值,而 Map 适用于存储键值对的集合。此外,它们在遍历方式和数据修改方式上也有所区别。通过本文的详细分析和示例代码片段,读者可以更好地理解和应用 SetMap,提高代码的效率和质量。

相关文章
|
1月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
312 108
|
2月前
|
存储 缓存 JavaScript
Set和Map有什么区别?
Set和Map有什么区别?
254 1
|
1月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
293 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
3月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
45 2
|
3月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
98 1
|
3月前
|
存储 编译器 容器
set、map、multiset、multimap的介绍及使用以及区别,注意事项
set是按照一定次序存储元素的容器,使用set的迭代器遍历set中的元素,可以得到有序序列。set当中存储元素的value都是唯一的,不可以重复,因此可以使用set进行去重。set默认是升序的,但是其内部默认不是按照大于比较,而是按照小于比较。set中的元素不能被修改,因为set在底层是用二叉搜索树来实现的,若是对二叉搜索树当中某个结点的值进行了修改,那么这棵树将不再是二叉搜索树。
199 0
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
197 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
JavaScript 前端开发 开发者
flat、flatmap与map的用法区别
本文介绍了 JavaScript 数组方法 `flat()`、`flatMap()` 和 `map()` 的用法及区别。`flat()` 可按指定深度递归展平数组,参数为深度,默认一层;`flatMap()` 结合了 `map()` 和 `flat()` 功能,返回一维数组,长度可能不同于原数组;而 `map()` 返回与原数组长度一致的新数组。通过多个代码示例展示了三者的功能和差异,帮助开发者更好地理解和使用这些方法。
606 0
|
10月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
209 6