本文详细介绍了ES6中set的基本用法，包括定义与初始化、添加元素、删除指定元素、查询元素及清除全部元素。接着讨论了map数据结构，讲解了set、get、删除元素、获取长度和has方法，以及获取所有key和clear操作。最后，探讨了DOM classList的应用，包括完整代码实现和效果展示。
目录
一、set基础用法
类似于数组，但是成员的值都是唯一的，没有重复的值。类似于数组，但是成员的值都是唯一的，没有重复的值。
1.set定义与初始化数据
const set = new Set([1,2,3,4,4]);
console.log(set);//会把重复的自动删除 1,2,3,42.add添加
const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
console.log(set);//1,2,3,4,5,63.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));//false5.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.效果展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
