set map数据结构/classlist/创建对象/symbol

一、setmap数据结构

1、set定义与初始化数据

            const set = new Set([1,2,3,4,4]);
			set.add(5).add(6);//set加一个值
			set.delete(6);//删除指定的值
			console.log(set.has(6));//has判断有没有指定的值，有返回true 反之为false
			set.clear();//清除所有的值
			console.log(set);
			//set遍历
			set.forEach(item=>console.log(item));

2、map数据结构

 const Info = {height:190,major:"计算机"};
 const map = new Map([["sex",1],["weight",180]]);

设置map的值  key -> value

  map.set("realname","张三");
	map.set("age",18);
	map.set(Info,"个人详细信息");

 get得到map的值  参数 ：key

console.log(map.get("realname"));

删除map的值 参数：key

map.delete("age");

获取map的长度

console.log(map.size);
console.log("age是否存在:" + map.has("age"));
console.log(map);

获取map的所有key

const keys = map.keys();
			map.clear();

二、创建对象

1、当属性与变量名称相等的时候 触发简写

    let realname =  "张三";
	let age  = 19;
	let key = "height";
	const Person = {realname,age};
	        

2、构建key值

Person[key] = 180;
console.log(Person);

3、合并对象

   const Obj1 = {realname:"张三"};
	const Obj2 = {age:19};
	// const Obj3 = Object.assign(Obj1,Obj2);
	const Obj3 = {...Obj1,...Obj2};
	console.log(Obj3);

三、symbol

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

   const a = Symbol("a");
	const b = Symbol("a");
	console.log(a===b);//false

2、不能与运算符计算

 a+1;//报错

3、symbol创建唯一的值

   const a = Symbol.for("a");
	const b = Symbol.for("a");
	console.log(a===b);//true

4、symbol的应用

       const Method = {
				say:Symbol(),
				play:Symbol(),
			}
			
			const Person = {
				realname:"张三",
				age:19,
			}
			
			Person[Method.say] = ()=>{
				console.log("会说话");
			}
			
			Person[Method.play] = ()=>{
				console.log("会玩游戏");
			}
			// 1:获得所有的key
			const keys = Reflect.ownKeys(Person);
			// 2:获得symbol的keys
			const sysbolKeys = Object.getOwnPropertySymbols(Person);
			console.log(sysbolKeys);
		    // 3:调用方法
		    Person[sysbolKeys[0]]();

四、classlist  应用

css样式

   .class1{
		background: red;
		}
	.class2{
		color:#fff;
		}
	.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);
	});