js中的Set和Map简单使用

最新推荐文章于 2024-05-28 16:39:12 发布
最新推荐文章于 2024-05-28 16:39:12 发布
阅读量7.5k 收藏 11
点赞数 5
分类专栏： 前端 javascript 文章标签： js  Map Set集合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xvzhengyang/article/details/86500766
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Map和Set</title>
		<!-- ES6引入新的数据类型Map和Set -->
		<!-- Map是一组键值对的结构,具有极快的查找速度 -->
	</head>
	<body>
		<script type="text/javascript">
			let oneMap = new Map();
			let oneSet = new Set();
			console.log("创建map和set成功");
			// 举例,如果我们想要知道小明的成绩是多少,我们就需要使用两个Array;一个用于存储姓名,一个用于存储对应的成绩;
			var nameArray = ['li', 'zhou', 'yang'];
			var scroeArray = [90, 98, 87];
			// 如果人越多,Array越长,那么就要耗费更多的时间;但是使用Map,只要一个名称-成绩的对照表,直接根据名字查找,
			// 无论这个表有多慢,查找都很快速.
			// 初始化一个Map,需要一个二维数组
			var exampleMap = new Map([
				['li', 90],
				['zhou', 98],
				['yang', 87]
			]);
			console.log(oneMap.get('yang')); // 结果是87
			//我们也可以直接创建一个空Map,然后调用set方法进行添加元素
			oneMap.set('li', 90);
			oneMap.set('zhou', 98);
			oneMap.set('yang', 87);
			console.log(oneMap.get('yang')); // 结果是87
			// has方法可以用来检测Map是否包含某个key对应的元素
			var isHasLi = oneMap.has('li');
			console.log(isHasLi); // 结果是true
			var hasDelete = oneMap.delete('li');
			console.log("删除" + hasDelete); // 结果是 删除true
			// 另外,因为一个key只能对应一个value,所以多次对一个key放入value,后面的值会覆盖前面的值
			oneMap.set('niu', 89);
			oneMap.set('niu', 99);
			console.log(oneMap.get('niu')); // 结果是99

			// 下面来看set集合
			// Set和Map类似,也是一组key的结合,但是不存储value,由于key不重复,所以Set中没有重复的plus.key
			// 初始化set需要传入一个一维数组
			var mySet = new Set([1, 2, 3]);
			// 或使用add方法进行添加
			var secondSet = new Set();
			secondSet.add('li');
			secondSet.add('niu');
			// 注意添加相同的元素会自动去重
			secondSet.add('li');
			console.log(secondSet.size) //长度还是2
			// delete(key)可以删除元素
			secondSet.delete('li');
			console.log(secondSet.size);




			// 迭代器 iterable,可以用于Map Set和Array
			// 具有iterabl类型的集合,可以通过新的for....of循环遍历,并且遍历得到的是value,而不是key
			for (var x of oneMap) {
				console.log(x.toString());
				// zhou,98
				// yang,87
				// niu,99
			}
			// 对于map集合,我们可以获取key以及对应的value
			for (var x of oneMap) {
				console.log(x[0] + " " + x[1]);
				// zhou 98
				// yang 87
				// niu 99
			}
			// 对于set集合
			for (var x of secondSet) {
				console.log(x); // 结果是niu
			}


			// 下面来看下for..in和for...of的区别
			// for..in实际上遍历的是对象的属性名称,对于数组Array来说,实际上也是对象,她的每个元素的索引都被视为属性
			//;当我们手动给数组对象添加额外的属性时候,使用for..in就会带来意外的效果
			var myArray = [1, 3, 5];
			myArray.name = 'heihei';
			for (var x in myArray) {
				console.log(x);
				// 结果是 0 1 2 name,这里把name也给遍历出来了;
			}
			// 但是使用for..of就不会出现这样的问题,他只循环集合本身的元素
			for (var x of myArray) {
				console.log(x);
				// 结果是 1 3 5
			}


			// forEach方法是iterable内置的方法,接收一个函数,每次迭代就自动回调该函数
			myArray.forEach(function(element, index, array) {
				// element: 指向当前元素的值
				// index: 指向当前索引
				// array: 指向Array对象本身
				console.log(element + ', index = ' + index);
			});
			// 对Map集合来说,第一个参数value,第二个参数是key;
			oneMap.forEach(function(value,key,map){
				console.log(value + ', key = ' + key);
			});
			// 对于set集合来说,因为没有索引,所以第一个第二个参数都是value
			secondSet.forEach(function(value,sameValue,set){
				console.log(value + ', sameValue = ' + sameValue);
			});
			// 另外,js函数调用不要求参数一致,所以如果我们只关心value,可以这么写
			myArray.forEach(function(element){
				console.log(element);
				//结果是 1 3 5 
			})
		</script>
	</body>
</html>

 

xvzhengyang
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js Map对象的用法和Set的用法
aiyang1214878408的博客
05-17 1509
用Map实现表格里重复数据标红，Set进行数组去重
js的Set和Map相关属性和方法
weixin_34306593的博客
01-03 307
Set 实例的属性和方法 Set 实例属性:Set.prototype.constructor：构造函数，默认就是Set函数。Set.prototype.size：返回Set实例的成员总数。 Set 实例方法: 分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。add(value)：添加某个值，返回 Set 结构本身。del...
JS【详解】Map （含Map 和 Object 的区别，Map 的常用 API，Map与Object 的性能对比，Map 的应用场景和不适合的使用场景）
最新发布
朝阳39的博客
05-28 1130
而Object在遍历时，可能因为属性的插入顺序和内部哈希结构而导致遍历顺序不一致。在Object中，删除一个键实际上仅仅是将其值设置为undefined，而不是真正地从内存中移除，这可能导致内存泄漏和性能下降。都非常快，但在某些情况下，当查找的键在数据结构中不存在时，Map可能会比 Object 更快。量小时差异不大，量大时，Map比object 快，因为 Map内部使用了哈希表，而object在内存分配和处理上开销较大。在键的量较大时，Map 对键的增加、删除、查找和遍历性能都比 object 更好。
js Set和Map集合的基本用法
weixin_51697449的博客
10-08 657
一、Set 基本用法 Set类似于数组，但是成员的值都是唯一的，没有重复的值（常用于数组去重）。 Set本身是一个构造函数，用来生成 Set 数据结构。 const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值 Set函数可以接受一个数组（
JavaScript中 Map Set详解
明天也要努力的博客
11-22 3719
1. Map 和 Set 1.1 Map Map: 一组键值对的结构，具有极快的查找速度。 举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array： var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85]; 给定一个名字，要查找对应的成绩，就先要在 names 中找到对应的位置，再从 scores 取出对应的成绩，Array越长，耗时越长。 如果用Map实现，只需要一个“名字”-“成绩”的对照表，
【JavaScript面试】Map和Set方法
qq_40992225的博客
09-08 580
会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map是数组的方法，有一个参数，参数是一个函数，函数中有3个参数。注意：函数的作用是对数组中的每一个元素进行处理，返回新的元素。参数2：index，可选。当前元素在数组中的索引值。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。
ES6中Symbol、Set和Map用法详解
01-19
本文实例讲述了ES6中Symbol、Set和Map用法。分享给大家供大家参考，具体如下： Symbol 1.Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种分别是：...
ES6新增数据类型set和map
01-20
Set和Map的引入极大地丰富了JavaScript的数据结构，使我们在处理数据时有了更多选择。Set适用于去重或收集唯一值的场景，而Map则适用于存储键值对，尤其是当键不是字符串时。理解并熟练运用这两种数据类型，能帮助...
详解ES6中的 Set Map 数据结构学习总结
10-17
在ES6中，新增了两种数据结构：Set和Map，它们为JavaScript的编程提供了更为强大的功能。本篇文章将深入解析Set和Map数据结构，并通过实例介绍它们的主要特点、使用方法以及如何利用它们来优化代码。 首先，让我们...
JavaScript之Map和Set_动力节点Java学院整理
10-19
JavaScript中的Map和Set是ES6规范引入的两种新的数据结构，它们提供了更加灵活和高效的方式来存储和操作数据。 Map是一种键值对的集合，它的主要特点是查找速度快。与JavaScript对象{}不同，Map的键可以是任何类型...
JavaScript中Set和Map的基本用法
Always-Learning
01-06 481
Set的基本用法 Set中的元素是唯一的 Map的基本用法 Map相当于是Python中的字典，也是以键值对的形式作为基本的数据结构。 使用Set方法给Map对象添加键值对 像上面图片的第二个例子，如果建是一个无名的数组，后续很难调用这个键的值，所以我们要把通过下面这种形式来进行调用，即提前给数组命名。 ...
JavaScript--Map & Set
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-11 2358
1. Map Map 对象保存键值对，并且能够记住键的原始插入顺序。 任何值(对象或者原始值) 都可以作为一个键或一个值。 Map 是 ES6 中引入的一种新的数据结构 1.1 创建Map TypeScript 使用 Map 类型和 new 关键字来创建 Map： let myMap = new Map(); 初始化 Map，可以以数组的格式来传入键值对： let myMap = new Map([ ["key1", "value1"], ["key2", "valu
JS数据结构——Map
Cuichenyang158的博客
09-08 1522
JavaScript 的对象（Object），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串。
JavaScript中Set的使用
m0_51636525的博客
06-11 9759
在ES6之前，我们主要使用数组、对象来存储数据；在ES6中新增了另外两种数据结构：Set、Map和WeakSet、WeakMap。Set有点类似于Array数组，但是和数组的区别是Set的元素不能重复。先不考虑Set的创建方法，通过案例来演示Set和Array数组的区别。我们需要通过Set的构造函数创建Set（没有字面量创建的方式）...............
JS的set和map
weixin_50975172的博客
05-17 1032
当从该 map 取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值。作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制。在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。因此，如果你想要这种类型对象的 key 值的列表，你应该使用 Map。，需要包含键/值对数组。的结构是特殊且有效的，其用于映射的 key _只有_在其没有被回收时才是有效的。
6. JavaScript 基本的数据结构 -- Set&Map
与梦同行的博客
05-06 645
JavaScript 入门到精通之路---set map weakset weakmap
Set和Map容器的使用
m0_54741495的博客
12-14 1152
es6中的Map和Set
js中的set和map-详解
qq_48109675的博客
09-16 2388
Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
js中ES6的Set的基本用法
热门推荐
DurianPudding的博客
03-04 5万+
参考：阮一峰 ES6入门之Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 const s = new Set(); [2,3,5,4,5,2,2].forEach(x =&gt; s.add(x)); // Set结构不会添加重复的值 for(let i of s) { console.log(i); } // ## 初始化 // 例一...
JS中set和map区别
05-31
在JavaScript中，Set和Map也是容器，它们分别对应ES6中的Set和Map对象。它们的区别如下： 1. Set是一组不重复的值的集合，其中每个值只能出现一次。Set对象中的元素按照插入顺序进行排序，并且可以迭代集合中的元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢，励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值