js中的Set和Map简单使用

最新推荐文章于 2024-06-06 15:41:54 发布

xvzhengyang

最新推荐文章于 2024-06-06 15:41:54 发布

阅读量7.5k

点赞数 5

分类专栏：前端 javascript 文章标签： js Map Set集合

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86500766

版权

前端同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

javascript

22 篇文章 0 订阅

订阅专栏

<!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中的Set和Map简单使用

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Map和Set&lt;/title&gt; &lt;!-- ES6引入新的数据类型Map和Set --&gt; &lt;!-- Map是一组键值对的结构,具有极快的查找速度
复制链接

扫一扫