目录
5、 toggle(*class,* true\|false)
一、set map数据结构
1、set数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
// 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);
//数据遍历：forEach方法，用于对每个成员执行某种操作，没有返回值。
//set遍历
set.forEach(item=>console.log(item));2、map数据结构
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制，map的键不限于字符串，对象也可以称为键。
// 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"));
//获取map的所有的key
// const keys = map.keys();
map.clear();
//遍历
for(let v of person){
console.log(v);
}二、DOM classlist 属性
1、add(class1,class2)
添加一个类，如果类不存在则不添加。
document.getElementById("mydiv").classList.add("demodiv","demodiv1");2、 contains(class)
判断元素中是否存在某个类。存在返回true，反之返回false。
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);3、 item(index)
返回元素中索引值对应的类名。索引值从 0 开始。 如果索引值在区间范围外则返回 *null*
document.getElementById("mydiv").classList.item(0);4、 remove(class1,class2)
移除元素中一个或多个类名，移除不存在的类名，不会报错。
let mydom = document.getElementById("mydiv");
mydom.classList.add("demodiv");
console.log(mydom.classList.contains("demodiv")); // true
mydom.classList.remove("demodiv");
console.log(mydom.classList.contains("demodiv"));//false5、 toggle(*class,* true\|false)
在元素中切换类名。 第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
let mydom = document.getElementById("mydiv");
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"))例子：
<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>三、创建对象
1、ES6 创建对象
ES6允许把声明的变量直接赋值给对象。
let name='张三';
let age=19;
let person = {name,age};
console.log(person);2、 Key值构建
当键值非前台定义好，需要从后台拉取，可以用Key构建。
let key="name";
let obj = {
[key]:'web'
}
console.log(obj);3、自定义对象方法
对象方法就是把对象中的属性，用匿名函数的形式编程方法(之前就有)。
var person={
say:function(a,b){
return a+b;
}
}
console.log(person.say(4,5));4、 Object.assign( )合并对象
let a = {name:"张三"},b = {age:19};
let c = Object.assign(a,b);
console.log(c);
//展开运算符方式
let d = {...a,...b};
console.log(d);四、Symbol应用
ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
1、Symbol 创建
特性1：Symbol 数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。
let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");
console.log(a===b);//false第二种创建方式(可以创建唯一的值)
let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
console.log(s3===s4) //true`特性2：Symbol 数据类型不能与其他数据类型运算。
Let c = a+100;//Cannot convert a Symbol value to a number
特性3：Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。
2、Symbol内置值
ES6除了定义自己使用的Symbol值以外，还提供了11个内置的Symbol值，指向语言内部使用的方法。
1：Symbol.hasInstance
当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。
class Person{
static [Symbol.hasInstance](param){
console.log('param----', param)
console.log('检测类型')
}
}
let o = {}
console.log(o instanceof Person)2：Symbol.isConcatSpreadable
对象的Symbol.isConcatSpreadable属性等于一个bool值，表示该对象用于Array.prototype()时，是否可以展开。
const arr1 = [1,2,3]
const arr2 = [4,5,6]
arr2[Symbol.isConcatSpreadable] = false // arr2不可展开
const arr = arr1.concat(arr2)
console.log(arr) // [1,2,3,[4,5,6]]3：Symbol.unscopables
该对象指定了使用with关键字时，哪些属性会被with环境排除。
const object1 = {
property1: 42
};
object1[Symbol.unscopables] = {
property1: true
};
with (object1) {
console.log(property1);
// expected output: Error: property1 is not defined
}4：Symbol.match
当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值
5：Symbol.replace
当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值
6：Symbol.search
当该对象被str.search(myObject)方法调用时，会返回该方法的返回值
7：Symbol.split
当该对象被str.split(myObject)方法调用时，会返回该方法的返回值
8：Symbol.iterator
对象进行for ... of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
9：Symbol.toPrimitive
该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
10：Symbol.toStringTag
在该对象上调用toString方法时，返回该方法的返回值
11：Symbol.species
创建衍生对象时，会使用该属性
3、Symbol使用场景
给对象添加方法，不予对象属性冲突。
let person = {
name: '张三',
age: 18
}
let methods = {
say: Symbol(),
paly: Symbol()
}
person[methods.say] = function () {
console.log("say hi");
}
person[methods.paly] = function () {
console.log("paly game");
}
console.log(Object.getOwnPropertySymbols(person)); // 获得所有的[Symbol()]
console.log(Reflect.ownKeys(person));//返回所有属性key
// 调用
person[methods.say]();
let demo = Object.getOwnPropertySymbols(person);
person[demo[0]]();