目录
一、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的所有的key
5.clear删除
三、DOM classList的基础用法
基本效果（可以优化）
代码段
一、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>
