ES6中set的基础、map数据结构和DOM classList的基础用法

最新推荐文章于 2023-02-22 23:07:04 发布

m0_67393593

最新推荐文章于 2023-02-22 23:07:04 发布

阅读量108

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67393593/article/details/126082939

版权

面试同时被 3 个专栏收录

68 篇文章 3 订阅

订阅专栏

阿里巴巴

67 篇文章 0 订阅

订阅专栏

学习路线

65 篇文章 0 订阅

订阅专栏

一、set基础用法（add,delete,has,clear）

二、map数据结构（set,get,delete,size,clear,has（指定key的元素）, keys）

1.set get 基础用法

2.delete 删除指定元素

3.size获取map的长度 has获取指定元素

一、set基础用法（add,delete,has,clear）

1.set定义与初始化数据

const set = new Set([1,2,3,4,4]);
console.log(set);//会把重复的自动删除 1,2,3,4

2.add添加

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
console.log(set);//1,2,3,4,5,6

3.delete删除指定元素

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
set.delete(6);
console.log(set);//1,2,3,4,5,

4.has查询指定元素

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
set.delete(6);
console.log(set.has(6));//false

5.clear删除全部

const set = new Set([1,2,3,4,4]);    
set .clear();
console.log(set);//set(0)

二、map数据结构（set,get,delete,size,clear,has（指定key的元素）, keys）

1.set get 基础用法

const Info = {height:190,major:"计算机"};
const map = new Map();
//设置map的值 key->value
map.set("realname","张三");
map.set("age",18);
map.set(Info,"个人详细信息");
//get得到map的值 参数：key
console.log(map.get("realname"));

2.delete 删除指定元素

//删除map的值 参数：key
map.delete("age");

3.size获取map的长度 has获取指定元素

//获取map的长度
console.log(map.size);
console.log("age是否存在:" + map.has("age"));//falase 上文以删除

4.获取map的所有的key

const keys = map.keys();
console.log(keys);

5.clear删除

map.clear();

三、DOM classList的基础用法

基本效果（可以优化）

代码段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.class1{
				background: red;
			}
			.class2{
				color:#fff;
			}
			.class3{
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		
		<div id="demo">我是一个容器</div>
		<button id="btn1">控制颜色</button>
		<button id="btn2">控制字体大小</button>
		<button id="btn3">判断是否有颜色样式</button>
		<button id="btn4">判断索引1的类名</button><br/>
		<button id="btn5">删除颜色样式</button>
		<button id="btn6">控制字体toggle方式</button>
		
		<script>
			
		let Demo = document.getElementById("demo");
		let btn1 =  document.getElementById("btn1");
		let btn2 =  document.getElementById("btn2");
		let btn3 =  document.getElementById("btn3");
			
		btn1.addEventListener('click',()=>{
				//classlist 添加多个样式
                Demo.classList.add("class1","class2");
			});
		btn2.addEventListener('click',()=>{
				Demo.classList.add("class3")
			});
			// classList.contains 判断是否存在某个样式
		btn3.addEventListener('click',()=>{
				console.log(Demo.classList.contains("class1")?"存在class1的样式":"不存在class1的样式");
			});
			// classList.item 判断指定下标的类名
		btn4.addEventListener('click',()=>{
				console.log(Demo.classList.item(1));
			});
			// classList.remove 删除样式
		btn5.addEventListener('click',()=>{
				Demo.classList.remove("class1","class2");
			});
		btn6.addEventListener('click',()=>{
				Demo.classList.toggle("class3");
				//第二个参数 不管样式存在与否 true就强制加上  false就强制移除
			Demo.classList.toggle("class3",false);	
			});
			
			
			
			
			
		</script>
		
	</body>
</html>

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

m0_67393593

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6中set的基础、map数据结构和DOM classList的基础用法

目录一、set基础用法（add,delete,has,clear）1.set定义与初始化数据2.add添加3.delete删除指定元素4.has查询指定元素5.clear删除全部二、map数据结构（set,get,delete,size,clear,has（指定key的元素）, keys）1.set get 基础用法2.delete 删除指定元素3.size获取map的长度 has获取指定元素4.获取map的所有的key5.clear删除三、DOM classList的基础用法基本效果（可以优化）代码段2
复制链接

扫一扫