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

2022-10-09 143

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 学习ES6中set的基础、map数据结构和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>