ES6中set、map、DOM classList的基础用法

一、set基础用法

1.set定义与初始化数据

2.add添加

3.delete删除指定元素

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

一、set基础用法

类似于数组，但是成员的值都是唯一的，没有重复的值。类似于数组，但是成员的值都是唯一的，没有重复的值。

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数据结构

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的基础用法

1.完整代码


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>

2.效果展示

相关阅读:
十多年前的入职第一天
Transformer对接公司需求的调研报告
1000套web前端期末大作业 HTML+CSS+JavaScript网页设计实例企业网站制作【建议收藏】
Chrome插件精选 — 广告拦截插件
MATLAB中Simulink.findBlocksOfType用法
ICDE‘22推荐系统论文之Research篇
（附源码）spring boot校园二手销售网站毕业设计 161417
【数据结构】排序合集(万字详解)
Linux——Shell脚本编程(1)
数据库基础

原文地址：https://blog.csdn.net/qq_65715980/article/details/125858808