0


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

一、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.效果展示

标签: javascript 前端 es6

本文转载自: https://blog.csdn.net/qq_65715980/article/details/125858808
版权归原作者 秃头小骡子 所有, 如有侵权,请联系我们删除。

“ES6中set、map、DOM classList的基础用法”的评论:

还没有评论