第一部分：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);
?? ??? ??? ??? ?
?? ??? ??? ?});
|