Tabla de contenido
1. Establecer la estructura de datos del mapa
1. establecer la estructura de datos
2. estructura de datos del mapa
2. Atributo de lista de clases DOM
5、 alternar(*clase,* verdadero\|falso)
2. Construcción de valores clave
3. Método de objeto personalizado
4. Object.assign() fusionar objetos
2. Valor incorporado del símbolo
3. Escenarios de uso de símbolos
1. Establecer la estructura de datos del mapa
1. establecer la estructura de datos
ES6 proporciona un nuevo conjunto de estructuras de datos. Es similar a una matriz, pero los valores de los miembros son todos únicos y no hay valores duplicados.
// 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. estructura de datos del mapa
Los objetos JavaScript (Objeto) son esencialmente una colección de pares clave-valor (estructura Hash), pero tradicionalmente solo se pueden usar cadenas como claves. Esto trae grandes restricciones a su uso: las claves del mapa no se limitan a cadenas, y los objetos también pueden denominarse claves.
// 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);
}2. Atributo de lista de clases DOM
1、añadir(clase1,clase2)
Agrega una clase o no agrega la clase si no existe.
document.getElementById("mydiv").classList.add("demodiv","demodiv1");2、 contiene (clase)
Determina si una clase existe en un elemento. Devuelve verdadero si existe; en caso contrario, devuelve falso.
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);3、 elemento (índice)
Devuelve el nombre de la clase correspondiente al valor del índice en el elemento. Los valores del índice comienzan en 0. Devuelve *nulo* si el valor del índice está fuera del rango
document.getElementById("mydiv").classList.item(0);4、 eliminar (clase1, clase2)
Elimine uno o más nombres de clase en el elemento , elimine los nombres de clase que no existen y no se informará ningún error.
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、 alternar(*clase,* verdadero\|falso)
Alterna nombres de clases en elementos. El primer parámetro es el nombre de la clase que se eliminará del elemento y devuelve falso. Si el nombre de la clase no existe, el nombre de la clase se agregará al elemento y devolverá verdadero. El segundo es un parámetro opcional, que es un valor booleano que se utiliza para establecer si el elemento está obligado a agregar o eliminar la clase, independientemente de si el nombre de la clase existe.
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"))ejemplo:
<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>3. Crea objetos
1. ES6 crea objetos
ES6 permite la asignación directa de variables declaradas a objetos.
let name='张三';
let age=19;
let person = {name,age};
console.log(person);2. Construcción de valores clave
Cuando el valor clave no está definido en primer plano y debe extraerse del fondo, se puede crear con Key.
let key="name";
let obj = {
[key]:'web'
}
console.log(obj);3. Método de objeto personalizado
El método del objeto consiste en programar las propiedades del objeto en forma de funciones anónimas (anteriormente).
var person={
say:function(a,b){
return a+b;
}
}
console.log(person.say(4,5));4. Object.assign() fusionar objetos
let a = {name:"张三"},b = {age:19};
let c = Object.assign(a,b);
console.log(c);
//展开运算符方式
let d = {...a,...b};
console.log(d);4. Aplicación de símbolos
ES6 introduce un nuevo tipo de datos primitivo Símbolo, que representa un valor único. Es el séptimo tipo de datos del lenguaje JavaScript y es un tipo de datos similar a las cadenas.
1. Creación de símbolos
Característica 1 : La característica del tipo de datos Símbolo es la unicidad , incluso los valores generados por la misma variable no son iguales.
let a = Symbol("a");//a为symbol的描述
let b = Symbol("a");
console.log(a===b);//falseEl segundo método de creación (puede crear un valor único)
let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
console.log(s3===s4) //true`Característica 2 : el tipo de datos de símbolo no se puede operar con otros tipos de datos.
Sea c = a+100;//No se puede convertir un valor de símbolo en un número
Característica 3 : Las propiedades del objeto definidas por Symbol no se pueden recorrer usando el bucle for...in, pero puede usar Reflect.ownKeys para obtener todos los nombres clave del objeto.
2. Valor incorporado del símbolo
Además de definir los valores de símbolo utilizados por ES6, ES6 también proporciona 11 valores de símbolo integrados, que apuntan a los métodos utilizados internamente por el lenguaje.
1: Símbolo.haInstancia
Este método se llama cuando otros objetos usan el operador instancia de para determinar si son instancias del objeto.
class Person{
static [Symbol.hasInstance](param){
console.log('param----', param)
console.log('检测类型')
}
}
let o = {}
console.log(o instanceof Person)2: Símbolo. esConcatSpreadable
La propiedad Symbol.isConcatSpreadable del objeto es igual a un valor bool, lo que indica si el objeto se puede expandir cuando se usa en 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: Símbolo.unscopables
Este objeto especifica qué propiedades se excluyen del entorno with cuando se utiliza la palabra clave with.
const object1 = {
property1: 42
};
object1[Symbol.unscopables] = {
property1: true
};
with (object1) {
console.log(property1);
// expected output: Error: property1 is not defined
}4: Coincidencia de símbolo
Cuando se ejecuta str.match(myObject), si la propiedad existe, se llamará y se devolverá el valor de retorno del método.
5: Símbolo.reemplazar
Cuando el método str.replace (myObject) llama al objeto, se devolverá el valor de retorno del método
6: Búsqueda de símbolos
Cuando el método str.search (myObject) llama al objeto, se devolverá el valor de retorno del método
7: Símbolo.split
Cuando el método str.split (myObject) llama al objeto, se devolverá el valor de retorno del método
8: Símbolo.iterador
Cuando el objeto realiza un bucle for... of, se llama al método Symbol.iterator para devolver el iterador predeterminado del objeto.
9: Símbolo.aPrimitivo
Cuando el objeto se convierte a un valor del tipo original, se llamará a este método y se devolverá el valor del tipo original correspondiente al objeto.
10: Símbolo.toStringTag
Cuando se llama al método toString en este objeto, devuelve el valor de retorno de ese método
11: Símbolo.especie
Al crear objetos derivados, esta propiedad se utiliza
3. Escenarios de uso de símbolos
Agregue métodos a objetos sin entrar en conflicto con los atributos del objeto.
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]]();