Prefacio
Intención original : Recientemente estaba leyendo el libro "Comprensión profunda de Es6" . Antes no había aprendido completamente la gramática de Es6. También aproveché la etapa ocupada para volver a estudiar y ordenar las notas para compartir con todos. Si no le gusta, no lo rocíe.
Adecuado para la multitud : desarrollo primario de front-end, desvío de grandes.
Estructura del contenido : Concepto -> Gramática básica -> Escenario de aplicación
Antes de Es6, los arreglos siempre han sido el JavaScriptúnico tipo de colección, pero algunos desarrolladores piensan que los objetos que no son arreglos también son colecciones, pero solo pares clave-valor. Pero antes de Es6, los desarrolladores solo pueden usar colecciones de arreglos, pero los arreglos están indexados por subíndices index, por lo que a menudo se usan para crear colas y pilas. Si los desarrolladores quieren usar colecciones indexadas sin arreglos, usarán literales de objeto. La estructura requerida para medir la escena.
Qué es Set
Set es una colección sin elementos duplicados, pero no utiliza valores de índice para acceder a valores de matriz como matrices. La práctica habitual es detectar si existe un valor en esta colección.
¿Por qué está configurado?
Echemos un vistazo a dos casos para explicar por quéSet
Caso numero uno
let o = {
}
let key1 = {
}
let key2 = {
}
o[key1] = "val"
console.log(o[key1]) // val
console.log(o[key2]) // val
En el ejemplo anterior, la clave se convertirá en un objeto de cadena [object Object], invoca un interno toString, por lo que independientemente key1o key2devolverá el mismo valvalor.
Caso dos
let o = {
}
o.count = 1;
if (o.count) {
console.log(o.count)
}
En el ejemplo anterior, hay dos problemas, ya sea para juzgar si existe este atributo o si el valor de detección es distinto de cero. Si el valor del objeto es realmente igual a 0, entonces este juicio no se ejecutará. Si este problema ocurre en un gran proyecto No es fácil de encontrar. (Algunos amigos pueden pensar que si el objeto de prueba tiene este atributo, quien lo escribe así, puede usar el inoperador o getOwnProperty) ¡Espero que no me use aquí! , Aunque se puede usar, pero comprenda que este artículo está hablando deSet
Entonces, digamos Setque un Setconjunto es una lista ordenada, no habrá valores duplicados, la única excepción es Setque la +0suma -0es igual. SetIn tampoco convertirá el valor almacenado, como la {}conversión directa anterior a [object Object]in Setno existirá en esta situación, por supuesto, incluidos los tipos numéricos y los tipos de cadena 24y "24"no habrá conflicto entre los dos.
let o = new Set()
let key1 = {
}
let key2 = {
}
o.add(key1)
o.add(key2)
console.log(o.size) // 2
En el ejemplo anterior, se puede ver que agregamos dos objetos {}, sizehay dos datos que no están cubiertos. Conozcamos su sintaxis a continuación.
Gramática básica
SetEs un constructor, sus parámetros reciben todos los objetos iteradores (Iterator), las matrices, cadenas, colecciones de conjuntos, etc.son todos iterables.
Agregar elemento
Llame para new Set()crear una Setcolección y use el addmétodo para agregar objetos a la colección.
let o = new Set()
o.add(24)
o.add("24")
console.log(o.size) // 查看集合的元素数量 2
En el ejemplo anterior, puede ver claramente Setque el valor de la clave no se convierte en una cadena de la colección y que los diferentes tipos y punteros son independientes entre sí.
Arriba también dijimos que el Setvalor no se repetirá en la colección
let o = new Set()
o.add(24)
o.add(24) // 这一行代码则会忽略，
let arr = new Set([1,1,2,3,4,5,1])
En el ejemplo anterior, la segunda vez es igual que el primer valor y el tipo es el mismo, por lo que Setel código se ignorará y no se agregará a la colección. Mire la arrdeclaración de variable a continuación que inicializa directamente algunos valores de matriz, y los valores repetidos en estos se filtrarán directamente, y solo habrá uno cuando se genere.
Elemento de detección
Llame al hasmétodo para detectar si hay un determinado valor en la colección, y el valor de retorno es el Booleanvalor. La colección no puede obtener el valor de índice como una matriz, y Setno hay ningún indexvalor de índice en la colección .
let o = new Set()
o.add("蛙人")
console.log(o.has("蛙人")) // true
Quitar elemento
Llamar al deletemétodo puede eliminar Setun elemento de la colección y se devuelve el valor de retorno Boolean, o puede llamar al clearmétodo para eliminar todos los elementos de la colección y el clearmétodo no tiene valor de retorno.
Eliminación única
let o = new Set()
o.add("蛙人")
o.delete("蛙人") // true
console.log(o.size) 0
Eliminar todo
let o = new Set()
o.add("蛙人")
o.clear()
console.log(o.size) 0
Establecer usos de colección para que cada uno atraviese
SetEl recorrido forEach aquí es exactamente el mismo que el recorrido forEach de la matriz, excepto que los valores de retorno del parámetro son algo diferentes. El Setmétodo forEach también recibe tres parámetros.
- Posición de índice en la colección de conjuntos
- El mismo valor que el primer parámetro
- Establecer la colección en sí
let o = new Set(["蛙人", 24, "male"])
o.forEach((value, key, self) => {
console.log(value, key, self)
// 蛙人 蛙人 set对象
// 24 24 set对象
// male male set对象
})
En el ejemplo anterior, solo el primer parámetro de forEach es el mismo que el segundo parámetro. La razón es que Setno hay un valor de índice en el objeto, por lo que su parámetro de valor de índice también es un valor. El funcionario de Es6 puede eliminar este parámetro, pero Considere Miedo a que los desarrolladores malinterpreten que es diferente del tradicional forEach, por lo que los parámetros están unificados.
Escenarios de aplicación
Desduplicación
let list = [1,3,1,2,3,5]
let o = new Set(list);
console.log(o) // 1 3 2 5
let newList = [...o] // 将遍历对象集合转换为真数组
En el ejemplo anterior, usamos este método en la mayoría de los escenarios para deduplicar y luego convertirlo en una matriz verdadera después de la deduplicación.
agradecer
Gracias por abrir este artículo durante su apretada agenda. Espero que le sea útil. Si tiene alguna pregunta, puede corregirme.
Si crees que está bien, simplemente hazlo.
Los socios interesados pueden unirse al pequeño grupo de intercambio de entretenimiento de front-end y dar la bienvenida a todos juntos para discutir el intercambio.