【Es6】Set 、map数据结构，对象，symbol的应用，DOM classList 属性

第一部分：Set数据结构

1.set定义与初始化数据（set是类似于数组,具有单一的值）

            // const set = new Set ([1,2,3,4])
            // // console.log(set);

 //返回的值是{1, 2, 3, 4}

2，连续加值(一个add只能加一个可以关联多个add)

   
            // set.add(5).add(6);
            // // console.log(set);
            // set.delete(6);
            // // console.log(set)

//最终结果为 {1, 2, 3, 4, 5}  已删除6 

3，set遍历

          // set.forEach(item=>console.log(item));
            // // console.log(set);        

  //遍历set的结果为1,2,3,4,5

4，  清除set值(这里是全部清除);

     // set.clear()
            // console.log(set);            

  //返回的结果为   {size: 0}

  第二部分： map数据结构

   1，初始化数值

第一种方式：通过对象的方法去设置初识化值

            // const  Info={height:180,weight:140};
            // // console.log(map);        

最终结果为 :{height: 180, weight: 140}

第二种方式：通过数组的形式去遍历数据值

     // const map = new Map([['major','计算机'],['sex',1]]);
     // console.log(Info);

 最终结果为 是以对象的形式打印出结果 {'major' => '计算机', 'sex' => 1}

2，设置map的值 key->value

             //这里的map是上面map = new Map([['major','计算机'],['sex',1]]);的值
            // map.set('realname','张三');
            // // console.log(map);
            // map.set('age',18);
            // // console.log(map);
            // map.set(Info,"个人信息");
            // // console.log(map);  

 最终实现结果为{'major' => '计算机', 'sex' => 1, 'realname' => '张三', 'age' => 18, {…} => '个人信息'}

3，删除

 // map.delete('age');

  // console.log(map);    

删除后的（age 年龄）{'major' => '计算机', 'sex' => 1, 'realname' => '张三', {…} => '个人信息'}

 4.获取map的长度

             // console.log(map.size);  
            //返回的值是 {size: 0}          

      // 返回的结果为  4

5查找所有的map ,你也可以指定

  // map.has('realname');
            // console.log(map);
            // map.clear()
            // console.log(map);

   //返回的值是 {size: 0}

6，获取map的所有keys的集合

   // const keys = map.keys();
    // console.log(keys);

   //打印出来的值是{'major', 'sex', 'realname', {…}}

7，类似的数组（对象）

            // const set = new Set ([1,2,3,4]);
            // console.log(set);         

 //最终返回值是一个类似的数组(对象)

第三部分：对象

    1，创建对象

         // let realname="张三";
            // let age = 18;
            // // let key = 'heigth';
            // let keys = {realname,age};
            // console.log(keys);

最终结果为：{realname: '张三', age: 18}

2:构建key值(这里的keys是上面的keys,所以下面的获取值也是keys)

          // let realname="张三";
            // let age = 18;
            // // let key = 'heigth';
            // let keys = {realname,age};
            // keys[key] = 180;
            // console.log(keys)

最终结果为：{realname: '张三', age: 18, heigth: 180}

3:合并对象

            // let  arr = {'realname':'张三'};
            // let  arr1= {'age':19};
            // let  arr2 = {...arr,arr1}

            // console.log(arr2);

最终实现结果为：{realname: '张三', arr1: {…}}

第四部分：symbol的应用

1:Symbol是唯一 即使同一个变量生成的也不相等

              // const a = Symbol("a");

             //仅含有Symbol属性的变量都是唯一的，即使同一变量名，那也不同
            // const b = Symbol("a");
            // console.log(a===b);

最终实现结果为：返回的是false

2，第一种方法：

      let a = Symbol();
           let Person = {
               a:()=>{
                   console.log("say");
               }
           }
           Person.a();

    let a = Symbol();

     let Person ={
               
           }
           Person[a] = ()=>{
            console.log('say');
           }
            Person[a]();

以上返回值为:say

第五部分：DOM classList 属性

以案例来阐述该部分的内容：

css内容部分：

    .class1{
                background: red;
            }
            .class2{
                color:red;
            }
            .class3{
                font-size: 20px;
            }

HTML内容部分:

    <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>        

js内容部分:

       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);
                
            });

补充知识点:Object.values( ) 解构后将解构获得的值放入该处返回的是一个数组（将对象转为数组），再用join（）将数组转为字符串