Como niño al que le gusta escribir código a mano, creo que debería escribirlo yo mismo para memorizarlo mejor, por eso hoy presentaré las características de ES6 ~ ES12. Si tiene puntos ciegos en el uso de ES o no sabe mucho sobre las nuevas funciones , creo que este artículo debería poder ayudarlo muy bien ~

Para comprenderlo mejor, lo explicaremos en el modo de caso , por lo que Para tener una mejor comprensión y, al mismo tiempo, el caso también admite la depuración en modo desarrollador, espero que puedan admitirlo ~

ECMAScript

ECMAScript es un lenguaje de programación de scripts estandarizado por Ecma International (anteriormente la Asociación Europea de Fabricantes de Computadoras) a través de ECMA -262. También se puede decir que solo existen dos versiones de JavaScript como estándar

en el mundo de los programadores: ES5 y ES6 . Se dice que ES6 se lanzó en 2015, que también es el momento en que se oficializó la gran era del front-end. Es decir, 2015 se utiliza como límite, antes de 2015 se llamaba ES5 y después de 2016 se llama colectivamente ES6

Para obtener información sobre las características ES6 , puede leer "Introducción a los estándares de ES6". Profesor Ruan Yifeng.

Declaración de

ES6

let & const

La diferencia entre let, const y var:

• las variables declaradas por var existen promoción de variables, mientras que let y const no tienen el problema de promoción de variables. Promoción de variables: si se puede llamar a una variable antes de
• declarar var. No hay un alcance a nivel de bloque, let y const tienen un alcance a nivel de bloque.
• Var puede declarar variables repetidamente, y let y const no pueden declararse repetidamente en un alcance. y const declara variables de solo lectura y se les debe asignar un valor.

Además, cuando se declara un objeto con const , las propiedades del objeto se pueden cambiar, porque: obj declarado por const solo guarda la dirección de referencia de su. Objeto Mientras la dirección permanezca sin cambios, no habrá errores

en la desestructuración.

La desestructuración de la

• puede
• extraer valores de la matriz en orden y asignar valores a las variables de acuerdo con las posiciones correspondientes. El método pertenece a la coincidencia de patrones y
• se puede deconstruir usando ... para representar todos los restantes
.
• Si la matriz original no lo tiene, entonces el valor correspondiente se puede establecer como valor predeterminado; si no se establece, no estará undefined

. a, b, c] = [1, 2, 3]
 consola.log(a, b, c) // 1 2 3
 
 sea ​​[a, , c] = [1, 2, 3]
 consola.log(a, , c) // 1 3
 
 sea ​​[a, b, ...c] = [1, 2, 3, 4, 5]
 consola.log(a, b, c) // 1 2 [3, 4, 5]
 
 sea ​​[a, b, ...c] = [1]
 console.log(a, b, c) // 1 indefinido []
 
 sea ​​[a = 1, b = a] = []
 const.log(a, b) // 1 1
 
 sea ​​[a = 1, b = a] = [2]
 const.log(a, b) // 2 2

La estructura del objeto

• no está en orden. Solo necesita que la variable y el nombre del atributo tengan el mismo nombre
• si los nombres de los atributos de la variable y el objeto no están repetidos
.
• , el valor de la variable no estará undefined
• Nota : , otros Equivalente al alias

let { a, b } = { a: 1, b: 2 };
 consola.log(a, b); // 1 2
 
 sea ​​{a} = {b:2};
 consola.log(a); // indefinido
 
 sea ​​{ a, b = 2 } = { a: 1 };
 consola.log(a, b); // 1 2
 
 sea ​​{ a: b = 2 } = { a: 1 };
 console.log(a); // La variable a no existe console.log(b); // 1

Desestructuración de cadenas

• Las cadenas también se pueden deconstruir, lo que equivale a convertirlas en objetos tipo matriz
• con un atributo length . , que representa el número

let [a, b, c, d, e] = "hola"
 console.log(a, b, c, d, e) // hola
 
 let {longitud} = "hola"
 console.log(length) // 5

Desestructuración de números y valores booleanos

• Siempre que el objeto o matriz no esté muerto, primero se convertirá en un objeto, por lo que los tipos numéricos y booleanos también se convierten en objetos

let { toString: s } = 123;
 console.log(s === Number.prototype.toString) // verdadero
 
 let { toString: s } = verdadero;
 console.log(s === Boolean.prototype.toString) // verdadera

deconstrucción de los parámetros de la función

• Los parámetros de la función se pueden deconstruir o pueden tener el valor predeterminado
• indefinido.
• Preste atención a
.
• Hay dos métodos para especificar el valor predeterminado. Uno es especificar variables, el otro es especificar parámetros y obtendrá diferentes respuestas:

let arr = [[1,2], [3, 4]]
 sea ​​res = arr.map([a, b] => a + b)
 consola.log(res) // [3, 7]
 
 let arr = [1, indefinido, 2]
 let res = arr.map((a = 'prueba') => a);
 console.log(res) // [1, 'prueba', 2]
 
 let func = ({x, y} = {x: 0, y: 0}) => {
    retorno[x,y]
 }
 console.log(func(1, 2)) // [indefinido, indefinido]
 consola.log(func()) // [0, 0]
 console.log(func({})) // [indefinido, indefinido]
 console.log(func({x: 1})) // [1, indefinido]
 
 
 let func = ({x=0, y=0}) => {
    retorno[x,y]
 }
 
 console.log(func({x:1,y:2})) // [1, 2]
 console.log(func()) // error
 console.log(func({})) // [0, 0]
  console.log(func({x: 1})) // [1, 0]

de la expansión regular

es en realidad un punto de conocimiento muy difícil de entender. Si alguien puede dominarlo por completo, es realmente muy poderoso. aquí En primer lugar,

se divide en dos estilos: JS分格y perl 分格

JS: RegExp()

let re = new RegExp('a');
 let re = new RegExp('a', 'i'); //El primero es el objeto de búsqueda, el segundo es la opción

estilo perl: / regla/opción, y puede ir seguido de múltiples, independientemente del orden

let re = /a/; //Buscar si hay un en una cadena
 let re = /a/i;// El primero es el objeto a buscar, el segundo es la opción

Aquí presentamos una prueba en línea de expresión regular (con expresiones regulares comunes):

Extensión de cadena

• Unicode :大括号包含los caracteres Unicode
• codePointAt() : devuelve el punto de código correspondiente al carácter, correspondiente a fromCharCode()
• String.fromCharCode() : devuelve el punto de código correspondiente como un carácter, corresponde a codePointAt()
• String.raw() : devuelve el carácter El resultado de reemplazar todas las variables en la cadena y escapar de las barras diagonales
• comienza con () : devuelve un valor booleano que indica si la cadena del parámetro está al principio de la cadena original.
• terminaCon() : Devuelve un valor booleano que indica si la cadena del parámetro está al final de la cadena original.
• repetir() : el método devuelve una nueva cadena, lo que significa repetir la cadena original n veces
• : for-of
• incluye() : devuelve un valor booleano, que indica si se encuentra la cadena del parámetro.
• trimStart() : el método elimina espacios desde el principio de una cadena. trimLeft() es un alias para este método.
• trimEnd() : el método elimina los espacios en blanco del final de una cadena. trimRight() es un alias para este método.

//Unicode
 console.log("a", "u0061"); // aa
 console.log("d", "u{4E25}"); // d estrictamente let str = 'Domesy'
 
 //codePointAt()
 console.log(str.codePointAt(0)) // 68
 
 //String.fromCharCode()
 console.log(String.fromCharCode(68)) // D
 
 //String.raw()
 console.log(String.raw`Holan${1 + 2}` // Holan3);
 console.log(`Holan${1 + 2}` // Hola 3);
 
 let str = 'doméstico'
 
 //comienza con()
 console.log(str.startsWith("D")) // verdadero
 console.log(str.startsWith("s")) // falso

 //termina con()
 console.log(str.endsWith("y")) // verdadero
 console.log(str.endsWith("s")) // falso
 
 //repeat(): el parámetro pasado se redondeará automáticamente hacia arriba. Si es una cadena, se convertirá en un número console.log(str.repeat(2)) // DomesyDomesy.
 console.log(str.repeat(2.9)) // DomesyDomesy
 
 // recorrido: para-de
  para (dejemos el código de str) {
    console.log(code) // Devuelve D omesy una vez
  }
  
  //incluye()
  console.log(str.includes("s")) // verdadero
  console.log(str.includes("a")) // falso
  
  // recortarInicio()
  const cadena = " ¡Hola mundo! ";
  console.log(string.trimStart()); // "¡Hola mundo!"
  console.log(string.trimLeft()); // "¡Hola mundo! "
  
  // recortarEnd()
  const cadena = " ¡Hola mundo! ";
  console.log(string.trimEnd()); // "¡Hola mundo!"
  console.log(string.trimRight()); // "¡Hola mundo!"

Se pueden insertar

otras

let str = `Dome
    si`
 console.log(str) //Ajustará las líneas automáticamente//Dome
 //

plantilla de etiqueta sy:

const str = {
     nombre: 'Pequeño Dudu',
     información: 'Hola a todos'
 }

console.log(`${str.info}, soy `${str.name}`) // Hola a todos, soy Xiao Dudu

Extensión de matriz

• Array.of() : convierte un conjunto de valores en una matriz y devuelve una nueva matriz, independientemente del número o tipo de argumentos.
• copyWithin() : copia los miembros en la posición especificada a otras posiciones y devuelve la matriz original
• find() : devuelve el primer valor calificado
• findIndex() : devuelve el primer índice calificado
• claves() : recorre los nombres de las claves, devuelve un objeto transversal , que se puede usar en un bucle for-of .
• valores() : El mismo uso que las claves(), pero atraviesa
• las entradas de claves() : El mismo uso que las claves(), pero atraviesa la clave-valor
.
• pares.Array.from
• () : crea una nueva instancia de matriz a partir de un objeto iterable o similar a una matriz.

un

• valor booleano
• . También es válido para NaN, pero no se puede colocar.

1, 2, 3, 4, 5]

 //matriz.de()
 let arr1 = Array.of(1, 2, 3);
 consola.log(arr1) // [1, 2, 3]
 
 //copyWithin(): tres parámetros (destino, inicio = 0, fin = this.length)
 // objetivo: la posición del objetivo // inicio: la posición inicial, que se puede omitir y puede ser un número negativo.
 // final: posición final, se puede omitir, puede ser un número negativo, la posición real es final-1.
 console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
 
 //encontrar()
 console.log(arr.find((elemento) => elemento > 3 )) // 4
 
 //buscaríndice()
 console.log(arr.findIndex((elemento) => elemento > 3 )) // 3
 
 //llaves()
 for (let index of arr.keys()) {
     console.log(index); // Devuelve 0 1 2 3 4 a la vez
 }
 
 // valores()
 for (let index of arr.values()) {
     console.log(index); // Devuelve 1 2 3 4 5 a la vez
 }
 
 // entradas()
 for (let index of arr.entries()) {
     console.log(index); // Devuelve [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] una vez
 }
 
  sea ​​arr = [1, 2, 3, 4, 5]
 
 // Array.from(): el recorrido puede ser una pseudomatriz, como cadena, estructura de conjunto, nodo nodo let arr1 = Array.from([1, 3, 5], (item) => {
     artículo devuelto * 2;
 })
 consola.log(arr1) // [2, 6, 10] 
 
 // fill(): tres parámetros (objetivo, inicio = 0, final = this.length)
 // objetivo: la posición del objetivo // inicio: la posición inicial, que se puede omitir y puede ser un número negativo.
 // final: posición final, se puede omitir, puede ser un número negativo, la posición real es final-1.
 console.log(arr.fill(7)) // [7, 7, 7, 7, 7]
 console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5]
 
 sea ​​arr = [1, 2, 3, 4]
 
 //incluye()
 console.log(arr.includes(3)) // verdadero
 console.log([1, 2, NaN].includes(NaN)); // verdadero

otros

operadores de expansión:...

// Su función es expandir la matriz let arr = [3, 4, 5]
 consola.log(...arr) // 3 4 5
 
 sea ​​arr1 = [1, 2, ...arr]
 console.log(...arr1) // 1 2 3 4 5

Extensión de objeto

• Object.getPrototypeOf() : Devuelve el objeto prototipo del objeto
• Object.setPrototypeOf() : Establece el objeto prototipo del objeto
• proto : Devuelve o establece el objeto prototipo del objeto
• Object .getOwnPropertyNames()
• : devuelve una matriz de claves de propiedades que no son símbolos del propio objeto . Object.getOwnPropertySymbols() : devuelve una matriz de claves de propiedades que no son de símbolos del propio objeto
• . : Devuelve una matriz de todas las claves de propiedad del objeto en sí.
• Object.is( ) : Determina si dos objetos son iguales Las direcciones a las que apuntan las matrices son diferentes, por lo que siempre que se trate de una comparación de matrices, debe ser falsa. Traversal
• : for-in
• Object.keys() : Devuelve el nombre del atributo
• Object.assign() : Se utiliza para asignar todos los enumerables Copie el valor del atributo de uno o más objetos de origen al objeto de destino y devuelva el objeto de destino. esta vez, el objeto de destino también cambiará

//Object.is()
console.log(Object.is('abc', 'abc')) // verdadero
console.log(Object.is([], [])) // falso 

//Recorrido: for-in
let obj = { nombre: 'Domesy', valor: 'Reaccionar' }

para (dejar ingresar obj) {
    console.log(key); // Devuelve el valor del nombre del atributo a su vez
    console.log(obj[key]); // Devuelve los valores de los atributos en secuencia Domesy React
}

//Objeto.claves()
console.log(Object.keys(obj)) // ['nombre', 'valor']

 //Objeto.asignar()
 objetivo constante = {a: 1, b: 2};
 fuente constante = {b: 4, c: 5};
 
 resultado constante = Object.assign(destino, fuente)
 
 console.log(resultado) // {a: 1, b: 4, c: 5}
 console.log(target) // {a: 1, b: 4, c: 5}

otras

expresiones concisas

let a = 1;
  sea ​​b = 2;
  sea ​​obj = {a, b}
  console.log(obj) // { a: 1, b: 2 }
  
  método let = {
      Hola() {
          console.log('hola')
      }
  }
  console.log(method.hello()) //

expresión de atributo hola: use directamente variables o expresiones para definir la clave del Objeto

let a = "b"
 dejar objeto = {
     [a]: "c"
 }
 

operador de expansión

{b: "c"}

• agrega muchas funciones adicionales en ES9 , como fusionar, escapar de cadenas, etc.

// Su función es expandir la matriz let { a , b , ...c } = { a: 1, b: 2, c: 3, d: 4};
 consola.log(c) // {c: 3, d: 4}
 
 sea ​​obj1 = {c: 3}
 sea ​​obj = { a: 1, b: 2, ...obj1}
 console.log(obj) // { a: 1, b: 2, c: 3}

extendido numérico

• : comienza con 0b o 0B , indica binario
• octal : comienza con 00 o 0O , indica binario
• Number.isFinite() : usado para verificar si un valor es limitado, devuelve un valor booleano
• Number.isNaN() : se usa para verificar si un valor es NaN, devuelve un valor booleano
• Number.isInteger() : se usa para verificar si un valor es un número entero, devuelve un valor booleano value
• Number.isSafeInteger() : Se utiliza para comprobar si un valor es un "entero seguro", devolviendo un valor booleano
• Math.cbrt() : Devuelve el cubo y
• Math.abrt()() : Devuelve el cubo y
• Math.cbrt( ) : Devuelve el cubo y
• Math .clz32() : Devuelve la forma entera sin signo de 32 bits del valor
• Math.imul() : Devuelve la multiplicación de dos valores
• Math.fround() : Devuelve el formato simple de 32 bits
.
• forma de punto flotante de precisión del valor
• Math.hypot() : Devuelve todo La raíz cuadrada de la suma de cuadrados de los valores
• Math.expm1() : Devuelve e^n - 1
• Math.log1p() : Devuelve el natural. logaritmo de 1 + n (Math.log(1 + n))
• Math.log10() : Devuelve el logaritmo natural de 1 + n El logaritmo de n con base 2
• Math.log2() : Devuelve el logaritmo de n con base 2
• Math.trunc() : Elimina la parte decimal del número, dejando solo la parte entera
• Math.sign() : Devuelve el正数为1 ,负数为-1 ,正零0 ,负零-0 , NaN
• Math.abrt() : Devuelve la raíz cúbica
• Math.sinh() : Devuelve el seno hiperbólico
• Math.cosh() : Devuelve el coseno hiperbólico
• Math.tanh () : Devuelve la tangente hiperbólica
• Math.asinh() : Devuelve la Seno hiperbólico inverso
• Math.acosh() : Devuelve el coseno hiperbólico inverso
• Math.atanh() : Devuelve la tangente hiperbólica inversa
• Number.parseInt() : Devuelve el número entero del valor Parte, este método es equivalente a parseInt
• Number.parseFloat() : Devuelve la parte de punto flotante del valor, este método es equivalente a parseFloat

//Binary console.log(0b101) // 5
 consola.log(0o151) //105
 
 //Número.esFinito()
 console.log(Number.isFinite(7)); // verdadero
 console.log(Number.isFinite(true)); // falso
 
 //Número.isNaN()
 console.log(Number.isNaN(NaN)); // verdadero
 console.log(Number.isNaN("verdadero" / 0)); // verdadero
 console.log(Number.isNaN(verdadero)); // falso
 
 //Número.esInteger()
 console.log(Number.isInteger(17)); // verdadero
 console.log(Number.isInteger(17.58)); // falso
 
 //Número.isSafeInteger()
 console.log(Number.isSafeInteger(3)); // verdadero
 console.log(Number.isSafeInteger(3.0)); // verdadero
 console.log(Number.isSafeInteger("3")); // falso
 console.log(Number.isSafeInteger(3.1)); // falso
 
  //Matemáticas.trunc()
 console.log(Math.trunc(13.71)); // 13
 console.log(Math.trunc(0)); // 0
 console.log(Math.trunc(verdadero)); // 1
 console.log(Math.trunc(falso)); // 0 
 
 //Matemáticas.signo()
 console.log(Math.sign(3)); // 1
 console.log(Math.sign(-3)); // -1
 console.log(Math.sign(0)); // 0
 console.log(Math.sign(-0)); // -0
 console.log(Math.sign(NaN)); // NaN
 console.log(Math.sign(verdadero)); // 1
 console.log(Math.sign(falso)); // 0
 
 //Matemáticas.abrt()
 consola.log(Math.cbrt(8)); // 2
 
  //Número.parseInt()
 console.log(Number.parseInt("6.71")); // 6
 console.log(parseInt("6.71")); // 6
 
 //Número.parseFloat()
 console.log(Number.parseFloat("6.71@")); // 6.71
 console.log(parseFloat("6.71@")); // 6.71

• Coma final del parámetro de función: permite que el último parámetro de la función tenga
• una coma final. Al parámetro se le asigna un valor específico
de forma predeterminada

// Al parámetro se le asigna un valor específico de forma predeterminada.
 función divertida(x, y = x){
    consola.log(x, y)
 }
 función fun1(c, y = x){
    consola.log(c,x,y)
 }
 diversión(2); //2 2
 fun1(1); //1 1 1

otros

parámetros Rest (operador de expansión...)

function fun(...arg){
   consola.log(arg) // [1, 2, 3, 4]
 }
 
 

La función de flecha

fun(1, 2, 3, 4)

• se define como =>

let flecha = (v) => v + 2
 console.log(arrow(1)) // 3

La diferencia entre las funciones de flecha y las funciones ordinarias

• Los estilos de las funciones de flecha y las funciones ordinarias son diferentes. La sintaxis de las funciones de flecha es más concisa y clara. y las funciones ordinarias son funciones definidas por funciones.
• El conjunto no tiene claves, solo valores. Se puede considerar que las claves y los valores son los mismos
• . Las funciones de flecha en realidad no tienen esto en la función de flecha solo depende del this de la primera función ordinaria que envuelve la flecha. función.
• Las funciones de flecha no tienen sus propios argumentos. Al acceder a los argumentos en una función de flecha, en realidad se obtiene el valor en el entorno de ejecución local externo (función).
• llamar, aplicar y vincular no afectará la dirección de esto.
• El this de la función de flecha apunta al contexto , pero el this de la función ordinaria no apunta al contexto. Add bind(this) cuando es necesario.

Set

Set es una nueva estructura de datos en ES6, que es similar a una matriz. pero el valor del miembro es único y no hay

declaraciones de valores repetidos: const set = new Set()

Atributos:

• tamaño : Devuelve el número de valores en el objeto Set

Método:

• add() : Agrega un elemento al. final del objeto Set. Devuelve el objeto Set
• eliminar() : elimina los elementos del Conjunto que son iguales a este valor, devuelve verdadero si hay alguno, de lo contrario devuelve falso
• claro() : borra todos los elementos del Conjunto
• tiene() : si este valor existe, si es así verdadero, de lo contrario falso
• llaves() : objeto del iterador con valores de atributo
• valores() : objeto del iterador con valores de atributo
• entradas() : objeto del iterador con valores de atributo y
• valores
de atributo
• forEach() : itera sobre cada elemento

específicamente Nota:

• el transversal es un objeto iterator en el orden de inserción,
• el valor agregado al Conjunto en forma de [Clave, Valor] no se someterá a conversión de tipo, por lo que 1 y "1. "son dos valores diferentes
• . Dentro del Set, se pasan === Para juzgar, es decir, dos objetos nunca pueden ser iguales porque las direcciones son diferentes.
• La única diferencia es NaN

let list = new Set()
 
 //agregar()
 lista.add("1")
 lista.añadir(1)
 consola(lista) // Establecer(2) {1, "1"}
 
 //tamaño
 consola(lista.tamaño) // 2
 
 //borrar()
 lista.eliminar("1")
 consola(lista) // Establecer(1) {1}
 
 //tiene()
 lista.has(1) // verdadero
 lista.has(3) // falso
 
 //claro()
 lista.clear()
 consola(lista) // Establecer(0) {}
 
 let arr = [{id: 1}, {id: 2}, {id: 3}]
 lista de let = nuevo conjunto (arr)
 
 //llaves()
 for (let clave de list.keys()) {
    console.log(clave); // Imprime esto: {id: 1} {id: 2} {id: 3}
 }
 
 //valores()
 for (let clave de list.values()) {
    console.log(clave); // Imprime esto: {id: 1} {id: 2} {id: 3}
 }
 
 //entradas()
 for (dejar datos de list.entries()) {
    console.log(data); // Imprime esto: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ]
 }
 
 //para cada uno
 lista.forEach((elemento) => {
    console.log(item)//Imprime esto: {id: 1} {id: 2} {id: 3}
 });

Aplicación:

de

matrices.

• Una cosa a tener en cuenta es que new Set no puede eliminar objetos.

indefinido, nulo, nulo, NaN, NaN, 'NaN', 0, 0, 'a', 'a'];
 
 console.log([...nuevo conjunto(arr)]) 
 //o console.log(Array.from(nuevo conjunto(arr)))
 // [1, 'verdadero', verdadero, 15, falso, undefinido, nulo, NaN, 'NaN', 0, 'a']

puede encontrar la unión, intersección y diferencia

let a = new Set([1, 2, 3])
 sea ​​b = nuevo conjunto ([2, 3, 4])
 
 //Union console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
 
 //Intersección console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 // Conjunto de diferencias new Set([...a].filter(v => !b.has(v))) // Set(1) {1}

conjunto de mapeo

let set = new Set([1,2, 3])
 console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}

de WeakSet

: la misma estructura que Set, pero el miembro los valores solo se pueden

declarar para el objeto: const set = new WeakSet()

Método WeakSet():

• add() : Agrega un elemento al final del objeto WeakSet. Devuelve la instancia
• eliminar() : elimina el elemento en el WeakSet que es igual a este valor,
• has() : si este valor existe, si existe, es verdadero; de lo contrario, es falso.

Nota:

• Los objetos de los miembros del WeakSet. son todas referencias débiles, es decir, recolección de basura El mecanismo no tiene en cuenta la aplicación del objeto. En pocas palabras ,
• la ventaja de los objetos WebSet que no se pueden atravesar es que cuando se elimina la instancia, no habrá pérdidas de memoria.

Índice de recomendación

del mapa

Map es una nueva estructura de datos en ES6, que es un objeto similar. La clave es una declaración de valor de cualquier tipo

: const map = new Map()

atributos:

• constructor : constructor, devuelve
• Tamaño del mapa: devuelve el número de valores en la instancia del Mapa

Método:

• set() : agrega un par clave-valor después Mapa, devuelve la instancia
• get() : devuelve el valor clave Para
• eliminar() : Elimina los elementos en el Mapa que son iguales a este valor, devuelve verdadero si hay alguno; de lo contrario, devuelve falso
• clear() : Borra todos los elementos del Map
• has() : si este valor existe, si existe, es verdadero; de lo contrario, es falso.
• claves() : un objeto del atravesador con
• valores de claves de atributo() : un objeto del atravesador con valores de atributo
• entradas() : un objeto del recorridor con claves de atributos y valores de atributos
• forEach() : atraviesa cada elemento

Nota especial:

• for Las referencias al mismo objeto se consideran
• claves con la misma clave y se sobrescribirán

let map = new Map()
 
 //colocar()
 mapa.set('a', 1)
 mapa.set('b', 2)
 console.log(mapa) // Mapa(2) {'a' => 1, 'b' => 2}
 
 //conseguir
 mapa.get("a") // 1
 
 //tamaño
 console.log(mapa.tamaño) // 2
 
 //borrar()
 map.delete("a") // verdadero
 console.log(mapa) // Mapa(1) {'b' => 2}
 
 //tiene()
 map.has('b') // verdadero
 mapa.has(1) // falso
 
 //claro()
 mapa.clear()
 console.log(mapa) // Mapa(0) {}
 
 let arr = [["a", 1], ["b", 2], ["c", 3]]
 let map = nuevo mapa (arr)
 
 //llaves()
 for (let clave de map.keys()) {
    console.log(clave); // Imprime esto: abc
 }
 
 //valores()
 for (dejemos el valor de map.values()) {
    console.log(valor); // Imprime esto: 1 2 3
 }
 
 //entradas()
 for (dejar datos de map.entries()) {
    console.log(datos); // Imprime esto: ["a", 1] ["b", 2] ["c", 3]
 }
 
 //para cada uno
 mapa.forEach((elemento) => {
    console.log(item)//Imprime esto: 1 2 3
 });

de WeakMap

: y estructura del mapa, pero los valores de los miembros solo se pueden

declarar para objetos: const set = new WeakMap()

Método WeakMap():

• set() : agrega pares clave-valor, devuelve instancias
• get() : devuelve clave- pares de valores
• eliminar () : elimina el par clave-valor, si existe, es verdadero. De lo
• contrario , es falso.

Símbolo (tipo original)

El símbolo es un tipo de datos primitivo introducido en ES6, que representa独一无二Declaración

: const sy = Stmbol()

Parámetros: cadena (opcional)

Método:

• Symbol.for() : crea Symbol值descrito por parámetros. este parámetro existe, devuelve el Symbol值original (buscar primero y luego crear, registrado en el entorno global)
• Symbol.keyFor() : Devuelve una descripción del Symbol值registrado (solo se puede devolver key de Symbol.for() )
• Object.getOwnPropertySymbols() : Devuelve una matriz de todos Symbol值utilizados como nombres de propiedades en el objeto

// Declara let a = Symbol();
 sea ​​b = Símbolo();
 consola.log(a === b); // falso
 
 //Símbolo.para()
 let c = Symbol.for("doméstico");
 let d = Symbol.for("doméstico");
 console.log(c === d); // verdadero
 
 //Símbolo.keyFor()
 const e = Símbolo.for("1");
 console.log(Symbol.keyFor(e)); // 1
 
 //Símbolo.descripción
 let símbolo = Símbolo("es");
 console.log(símbolo.descripción); //es
 console.log(Símbolo("es") === Símbolo("es") // falso
 console.log(símbolo === símbolo); // verdadero
 console.log(symbol.description === "es"); // true

Proxy

El proxy se utiliza para modificar el comportamiento predeterminado de ciertas operaciones, lo que equivale a realizar cambios a nivel de idioma, por lo que es una especie de "meta". programación"), es decir, la programación en un lenguaje de programación

se puede entender de esta manera. El proxy es una capa de拦截establecida antes del objeto de destino. El mundo exterior debe pasar por esta capa de interceptación si quiere acceder a ella. Por lo tanto, Se proporciona un mecanismo para filtrar y reescribir el acceso desde el mundo exterior.

Proxy puede entenderse aquí como代理器

declaración de proxy: const proxy = new Proxy(target, handler)

• objetivo : controlador de objetos interceptados
• : define

el método de interceptación:

• get() : intercepta la lectura de los atributos del objeto
• set() : intercepta las propiedades de configuración del objeto , devuelve un valor booleano
• has() : intercepta la operación de propKey en el proxy, devuelve un valor booleano
• ownKeys() : intercepta el recorrido de propiedad del objeto, devuelve una matriz
• deleteProperty() : intercepta la operación de eliminar proxy[propKey], devuelve un valor booleano value ()
• apply() : Intercepta llamadas a funciones, llama y aplica operaciones
• construct() : Intercepta un nuevo comando, devuelve un objeto: Intercepta un nuevo comando, devuelve un objeto

let obj = {
  nombre: 'doméstico',
  hora: '2022-01-27',
  valor: 1
 }
 
 dejar datos = nuevo Proxy(obj, {
     //conseguir()
     get(objetivo, clave){
         destino de retorno [clave]. reemplazar ("2022", '2015')
     },
     
     //colocar()
     set(objetivo, clave, valor) {
        si (clave === "nombre") {
           retorno (destino[clave] = valor);
        } demás {
           destino de retorno [clave];
         }
     },
     
     // tiene()
    tiene (objetivo, clave) {
        si (clave === "nombre") {
            destino de retorno [clave];
        } demás {
            devolver falso;
        }
    },
    //eliminarPropiedad()
    eliminarProperty(destino, clave) {
        si (key.indexOf("_") > -1) {
            eliminar objetivo[clave];
            devolver verdadero;
        } demás {
            destino de retorno [clave];
        }
    },
    // claves propias()
    propiasClaves(objetivo) {
        return Object.keys(destino).filter((item) => item!= "tiempo");
    },
 })
 
 console.log(datos.hora) // 2015-01-27
 
 datos.tiempo = '2020'
 datos.nombre = 'Reaccionar'
 console.log(data) //Proxy {nombre: 'React', hora: '2022-01-27', valor: 1}
 
 //Interceptar tiene()
 console.log("nombre" en datos) // verdadero
 console.log("tiempo" en datos) // falso
 
 // Eliminar eliminarPropiedad()
 eliminar datos.time; // verdadero
 
 // Atravesar ownKeys()
 console.log(Object.keys(datos)); //['nombre', 'valor']

 //aplicar()
 let suma = (... argumentos) => {
    sea ​​número = 0;
    args.forEach((elemento) => {
        número += elemento;
    });
    devolver número;
 };

 suma = nuevo Proxy(suma, {
    aplicar(objetivo, ctx, argumentos) {
        destino de retorno (... argumentos) * 2;
    },
 });
 
 consola.log(suma(1, 2)); // 6
 console.log(suma.call(nulo, 1, 2, 3) // 12
 console.log(sum.apply(null, [1, 2, 3])); // 12
 
 //constructor()
 dejar Usuario = clase {
    constructor(nombre) {
        this.nombre = nombre;
    }
 }
 Usuario = nuevo Proxy(Usuario, {
    construir(objetivo, argumentos, nuevoObjetivo) {
        devolver nuevo objetivo(...args);
    },
  });
 console.log(new User("domesy")); // Usuario {name: 'domesy'}

Reflect

Reflect es similar a Proxy, excepto que mantiene el comportamiento predeterminado de Object y

• reemplaza algunos de los métodos del objeto Object que obviamente son interno al lenguaje (como Object. defineProperty) y colóquelo en el objeto Reflect.
• En esta etapa, algunos métodos se implementan tanto en objetos Object como en Reflect. En el futuro, se implementarán nuevos métodos solo en objetos Reflect
• para modificar los resultados de retorno de algunos métodos Object para hacerlos más razonables. Por ejemplo, Object.defineProperty(obj, name, desc) generará un error cuando la propiedad no se pueda definir, mientras que Reflect.defineProperty(obj, name, desc) devolverá false
• para convertir la operación del objeto en un comportamiento funcional
de

los métodos de Reflect

y Los métodos de Proxy corresponden uno a uno, por lo que no los presentaremos aquí

Clase

: abstracción de una clase de cosas con características comunes (sintaxis del constructor azúcar)

definición básica del constructor () y

clase de instancia generada Padre {.
     constructor(nombre = 'es6'){
         este.nombre = nombre
     }
 }
 let data = new Parent('domesy')
 console.log(data) // Padre { nombre: 'domesy'}

extiende hereda

la clase Padre {
     constructor(nombre = 'es6'){
         este.nombre = nombre
     }
 }
 
 // Clase de herencia ordinaria Child extiende Parent {}
 console.log(new Child()) // Niño {nombre: 'es6'} 
 
 // Pasar parámetros clase Niño extiende Padre {
    constructor(nombre = "niño") {
        super(nombre);
        this.type = "niño";
    }
 }
 console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'}

getter y setter

• son más importantes y, a menudo, se utilizan para encapsular la API
• get y set
.
• atributos, no método

clase Padre {
     constructor(nombre = 'es6'){
         este.nombre = nombre
     }
     // captador
     obtener obtenerNombre() {
         devolver 'sy' + este.nombre
     } 
     // colocador
     establecer establecerNombre(valor){
         este.nombre = valor
     }
 }
 
 let data = nuevo padre()
 console.log(data.getName) // syes6
 
 data.setName = 'doméstico'
 

método estático estático

doméstico

• El método estático no se puede llamar en una instancia de la clase, pero se debe llamar a través de la clase misma

class Parent {
     getName estático = (nombre) => {
         devolver `¡Hola! ${nombre}`
     }
 }
 
 console.log(Parent.getName('domesy')) // ¡Hola!

propiedades estáticas

domésticas

clase Padre {}
 Padre.tipo = "prueba";
 
 console.log(Parent.type); //test

Promise

Promise es resolver el problema del "infierno de devolución de llamada" y puede hacer que el procesamiento de operaciones asincrónicas sea muy elegante.

Promise puede admitir múltiples solicitudes simultáneas y obtener datos en solicitudes simultáneas. Esta Promise puede resolver el problema asincrónico. No se puede decir que Promise en sí sea

una definición asincrónica: Estado del objeto que contiene resultados de operaciones asincrónicas

:

• pendiente: [pendiente] Estado inicial
• cumplido: [Implementación]. Operación exitosa
• rechazada: [Rechazada] Operación fallida

Nota:

• Promise determinará qué método ejecutar según el estado
• . Cuando se crea una instancia de Promise, el estado está pendiente de forma predeterminada. Si el estado asincrónico es anormal, se rechaza.
• La transición de estado es unidireccional e irreversible , el estado determinado (cumplido/rechazado) no se puede transferir nuevamente al estado inicial (pendiente) y solo puede pasar de pendiente a cumplido o rechazado .

Uso básico

// Definición normal let ajax = (. devolución de llamada) => {
     consola.log('≈')
     setTimeout(() => {
         devolución de llamada && devolución de llamada.call();
     }, 1000)
 } 
 ajax(() => {
     console.log('tiempo de espera')
 })
 // Primero se imprimirá para iniciar la ejecución, luego se imprimirá el tiempo de espera después de 1 segundo.
 
 //Promesa
 dejar ajax = () => {
    console.log("Iniciar ejecución");
    devolver nueva Promesa((resolver, rechazar) => {
        setTimeout(() => {
            resolver();
        }, 1000);
    });
 };
 ajax().entonces(() => {
    console.log("tiempo de espera"); 
 });
 // Primero se imprimirá para iniciar la ejecución, luego se imprimirá el tiempo de espera después de 1 segundo.
 
 //entonces()
 dejar ajax = () => {
    console.log("Iniciar ejecución");
    devolver nueva Promesa((resolver, rechazar) => {
        setTimeout(() => {
            resolver();
        }, 1000);
    });
 };
 ajax()
 .entonces(() => {
     devolver nueva Promesa((resolver, rechazar) => {
        setTimeout(() => {
            resolver();
        }, 2000);
    });
 })
 .entonces(() => {
     console.log("tiempo de espera")
 })
 // Primero se escribirá para iniciar la ejecución, luego se escribirá el tiempo de espera después de 3 segundos (1+2)
 
 // atrapar()
 let ajax = (núm) => {
    console.log("Iniciar ejecución");
    devolver nueva Promesa((resolver, rechazar) => {
        si (núm > 5) {
            resolver();
        } demás {
            throw new Error("Ocurrió un error");
        }
    });
 };
 
 ajax(6)
 .entonces(función() {
    console.log("timeout"); // Comenzará la ejecución primero, luego el tiempo de espera se imprimirá después de 1 segundo.
 })
 .catch(función (err) {
    console.log("catch", err);
 });
 
  ajax(3)
 .entonces(funcion() {
    console.log("tiempo de espera"); 
 })
 .catch(función (err) {
    console.log("catch"); // Comenzará la ejecución primero, luego la captura después de 1 s.
 });

Promise.all() La operación por lotes

• Promise.all(arr) se utiliza para empaquetar varias instancias de promesa en una nueva instancia de Promesa. La instancia devuelta es una promesa ordinaria,
que recibe una
• matriz
• como parámetro.
Un objeto
• de
• promesa, o puede ser otros valores
• .

de

• retorno es el primero.

     devolver nuevo promesa (resolve, rechazar) => {
        dejar img = document.createElement ("img");
        img.src = src;
        img.onload = function () {
                resolver (img);
        };
        img.onerror = function (err) {
                rechazar (err);
        };
    });
 }
 
 const showimgs = (imgs) => {
     imgs.forEach ((img) => {
         document.body.appendChild (IMG);
     })
 }
 
 Promise.all ([[
    loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
    loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
    loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
 

)

. Entonces (showImgs

)

• ;

{
    devolver nuevo promesa (resolve, rechazar) => {
       dejar img = document.createElement ("img");
       img.src = src;
       img.onload = function () {
               resolver (img);
       };
       img.onerror = function (err) {
               rechazar (err);
       };
   });
}

const showimgs = (imgs) => {
   Sea p = document.createElement ("p");
   P.AppendChild (IMG);
   document.body.appendChild (P);
}

Promesa.race ([
   loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
   loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
   loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"),,
]. Entonces (

• showImgs
• )

;

• , Las funciones y los errores presentados en el interior no reflejarán
• cómo se ejecuta la promesa externa internamente. A punto de completarse)

del generador

• ,

la función que se puede usar para controlar el iterador también es una solución de programación asíncrona que encapsula múltiples estados internos

.

dentro del programa
• done value
• un done value
• se ha completado)
• Siguiente
• se usa para恢复la ejecución del programa

.
     producir "A";
     rendimiento "B";
     regresar "C"
 }
 
 Let Generator = data ();
 console.log (generador.next ()) // {valor: 'a', hecho: falso} 
 console.log (generador.next ()) // {valor: 'b', hecho: falso} 
 console.log (generador.next ()) // {valor: 'c', hecho: true} 
 console.log (generador.next ()) // {valor: indefinido, hecho: verdadero}

iterador

es una interfaz que proporciona un mecanismo de acceso unificado para varias estructuras de datos. Mientras cualquier estructura de datos implementa la interfaz Iterator, puede completar la operación transversal (es decir, procesar a todos los miembros de la estructura de datos en secuencia).

Las funciones del iterador:

• Primero, proporciona una interfaz de acceso unificada y simple para varias estructuras de datos
• para
• que los miembros de la estructura de datos puedan organizarse en un determinado orden.
• Principalmente para ... de consumo
• de orden de transversal: diferentes motores han acordado cómo iterar las propiedades, estandarizando así el comportamiento ES11

Nota:

• En ES6, algunas estructuras de datos tienen la interfaz iteradora de forma nativa (como matrices), es decir, es Sin ningún procesamiento puede ser atravesado por A para ... de bucle, pero algunos no pueden (como
• Map结构数组Set某些类似数组的对象Map结构.
• Un ejemplo de agregar una interfaz iteradora a un objeto.

// Básicamente use Let arr = ["Hola", "Mundo"];
 dejar map = arr [symbol.iterator] ();
 console.log (map.next ());
 console.log (map.next ());
 console.log (map.next ());
 
 // para el bucle deja arr = ["hola", "mundo"];
 para (dejar valor de arr) {
    console.log (valor);
 }
 
 // Procesamiento de objetos deja obj = {
     Inicio: [1, 5, 2],
     Fin: [7, 9, 6],
     [Símbolo.iterador](){
         Let Index = 0;
         Deje arr = this.start.concat (this.end)
         devolver {
             próximo(){
                 if (index <arr.length) {
                     devolver {
                         Valor: arr [índice ++],
                         Hecho: Falso
                     }
                 }demás{
                     devolver {
                         Valor: arr [índice ++],
                         hecho: verdadero
                     }
                 }
             }
         }
     }
 }
 para (dejar clave de obj) {
    console.log (clave);
 }

Los decoradores decoradores

el

• símbolo @ para extender y modificar el comportamiento de la clase
• core-decorators

     Target.name = "Muerme"
 }
 
 @nombre
 Prueba de clase {}
 
 console.log (test.name) //

Modularización

En los primeros días, fue un método común para usar funciones de ejecución inmediata para lograr la modularización

. del uso de la modularización:

• resolver los conflictos de nombres
• proporcionan reutilización
• y mejora

las soluciones de mantenimiento del código:

• CommonJS : para servidores (dependencias dinámicas)
• AMD : para navegadores (dependencias dinámicas, raramente utilizadas)
• CMD : para navegadores (dependencias dinámicas, raramente usados)
• UMD : se usa para navegadores para navegadores y servidores (dependencias dinámicas)
• ESM : se usa para navegadores y servidores (dependencias estáticas)

Exportar el módulo de exportación Exportaciones

• de forma predeterminada: export default Index
• Exportaciones solo: `Export Const name = 'domesy'
• Exportar a la demanda (recomendado):` Exportar {nombre, valor, id} '
• renombrado export: export { name as newName }

importación de importación de importación

• predeterminada (recomendado): import Index from './Index'
• importación general: import * as Index from './Index'
• on-demand
import (
• recomendado
• ): import { name, value, id } from './Index'
• renombrado import: import { name as newName } from './Index'
• importación autodirigida: import './Index'
• ): import Index, { name, value, id } from './Index'

de modo compuesto

export命令import命令combina en una línea. .

• ​
• ​* Desde './index'
• en demanda importar y exportar: `exportar {nombre, valor, id} desde './index'
• predeterminado para importar y exportar:` export {predeterminado como nombre} desde './index'

ES7

La extensión de la matriz

• incluye () : Se agregó uno basado en el índice ES6, que representa dónde encontrar ES7,

permita arr = [1, 2, 3, 4]
 
 // incluye () es6
 console.log (arr.includes (3)) // Verdadero
 console.log ([1, 2, nan]. incluye (nan));
 
 // incluye () es7
 console.log (arr.includes (1, 0)) // Verdadero
 console.log (arr. includes (1, 1)) //

extendida numérica

• : use ** para representar Math.pow()

// Power Operator ES7
 console.log (math.pow (2, 3)) // 8
 console.log (2 ** 8) // 256

ES8

Transferencia de caracteres

• PadStart () : Se usa para completar la cabeza
• Padend () : Usado para completar la cola.

Deje str = 'domesy'
 
 // PadStart (): ¿Se llenará en forma de espacios? "0"); // 01
 console.log ("8-27" .padstart (10, "aaa yyy-0m-0d");
  
 

(

• padStart
• (

) console.log ("1" .padend (2, "0"));

• Devuelve una matriz de nombres de atributos y valores de atributo

deja obj = {nombre: 'domesy', valor: 'reaccionar'}

//Object.values ​​()
console.log (objeto.values ​​(obj)) // ['reaccionar', 'reaccionar']

//Object.entries ()
console.log (objeto.entries (obj)) // [['nombre', 'valor'], ['reaccionar', 'reaccionar']]

async espera

la función: cambiar la función asíncrona a la función sincrónica , (azúcar de sintaxis del generador)

const func = async () => {
    Let promise = new Promise ((resuelve, rechazar) => {
    setTimeout(() => {
          resolve ("ejecutar");
        }, 1000);
    });
     
      console.log (espera promesa);
      console.log (espera 0);
      console.log (espera promesa.resolve (1));
      consola.log(2);
      Return promise.resolve (3);
 }
 
 func (). entonces (val => {
      console.log (val); / ejecutar en secuencia: ejecutar 0 1 2 3
 

}

)

• forEach()
• Promise then
• ​

Async

• async/await for-of Promise.all()
• try catch reject

Hay dos situaciones: si se trata de un objeto de promesa

. Esta cosa no promocionada es la esperanza de la expresión.

Si está esperando un objeto de promesa, Await también detendrá el código detrás de Async, primero ejecutará el código de sincronización fuera de Async, espere a que se cumpla el objeto de promesa y luego use los parámetros de resolución como resultado de la operación de la expresión de espera.

desventajas de Async esperan y prometen

:

logra una
• verdadera
• escritura sincrónica, y el código es relativamente fácil de leer
• .

claridad

• del

• código se mejora.

• , haciendo que el código pierda concurrencia.

extensión de transferencia de caracteres

ES9

• relaja las restricciones en la cadena que escapan en las plantillas de etiqueta : undefined se devuelve cuando se encuentra un escape de cadena ilegal, y la cadena original se puede obtener de raw .

// RELAJAS RESTRICCIONES DE CADRA CONST TEST = (VALOR) => {
     console.log (valor)
 }
 Prueba `domesy` // ['domesy', raw: [" domesy "]]

promise

promety.finally ()

• una función de devolución de llamada que se ejecutará independientemente del estado final

deja func = time => {
     Devuelve New Promise ((Res, REJ) => {
         setTimeout(() => {
             if (tiempo <500) {
                 Res (tiempo)
             }demás{
                 REJ (tiempo)
             }
         }, tiempo)
     })
 }
 
 diversión (300)
 .Then ((val) => console.log ('res', val))
 .catch ((erro) => console.log ('rej', erro))
 .finally (() => console.log ('terminado'))
 // Resultado de la ejecución: res 300 FUNC completado (700)
 .Then ((val) => console.log ('res', val))
 .catch ((erro) => console.log ('rej', erro))
 .finally (() => console.log ('terminado'))
 // Resultado de la ejecución: REJ 700 completó elaborado

de anticipado

: iterador asíncrono, Loop espera a que cada Promise对象se resolved状态antes de ingresar el siguiente paso

deje gettime = (segundos) => {
     Devuelve una nueva promesa (res => {
         setTimeout(() => {
             Res (segundos)
         }, segundos)
     })
 }
 
ASYNC Function test () {
    Deje arr = [GetTime (2000), GetTime (500), GetTime (1000)]
    para esperar (dejar x de arr) {
        consola.log(x); 
    }
}

test () // Ejecutar 2000 500 1000

ES10

Extensión de transferencia de caracteres

• JSON.Stringify () : puede devolver cadenas que no cumplen con los estándares UTF-8 (U+2028 y U+2029 se pueden ingresar directamente)

//json.stringify ( ) Actualizar console.log (json.stringify (" UD83D  UDE0E")); 
 

• (

"

 u {d800}"));

• (Nota: es casi el mismo que el mapa seguido de plano con un valor de profundidad de 1, pero FlatMap generalmente es ligeramente más eficiente cuando se combina en un solo método).
• Flat : el método atraviesa recursivamente la matriz a una profundidad específica y combina todo Los elementos lo combinan con los elementos en la sub-array atravesada para formar una nueva matriz y devolverla. El valor predeterminado es 1. (Aplicación: Aplanador de matriz (resolver automáticamente en la parte inferior cuando se ingresa Infinity ))

Sea arr = [1, 2, 3, 4]
 
 // FlatMap ()
 console.log (arr.map ((x) => [x * 2]));
 console.log (arr.flatmap ((x) => [x * 2]));
 console.log (arr.flatmap ((x) => [[x * 2]]));
 
 const arr1 = [0, 1, 2, [3, 4]];
 const arr2 = [0, 1, 2, [[[3, 4]]]];

 console.log (arr1.flat ());
 console.log (arr2.flat (2));
 

(

arr2.flat (infinito)

)

• ; de Object.entries()
• Puede hacer una conversión de tipo de datos

de mapa a objeto

deja mapa = nuevo mapa ([[
    ["A", 1],
    ["B", 2],
 ]);
 
 Sea obj = object.FromEnries (map);
 console.log (obj

)

;
    ["A", 1],
    ["B", 2],
 ]
 dejar obj = object.FromEnries (arr);
 

console.log

(obj)

;
    A: 1,
    B: 2,
    C: 3
 }
 
 Dejar res = objeto.Fromentries (
     Object.entries (obj) .filter (([clave, val]) => valor! == 3)
 )
 
 console.log (res) // {a: 1, b: 2}

expansión numérica

• toString () transformación : devuelve el código original de la función (consistente con la codificación)

// toString ()
 función test () {
     Consople.log ('Muerme')
 }
 console.log (test.toString ());
 // function test () {
 //consople.log('domesy ')
 //}

parámetros de captura opcionales

en ES10, try Catch puede ignorar los parámetros de captura

de dejar func = (name) => {
      intentar {
         Return Json.Parse (nombre)
      } atrapar {
         devolver falso
      }
  }
  
  console.log (func (1)) // 1
  console.log (func ({a: '1'})) // falso

es11

bigint (tipo original)

• Nuevo tipo de datos primitivos: bigint, que representa un entero de precisión arbitraria y puede representar datos muy largos, que pueden exceder 2 de

• de

segura

• en
• el rango de-(2^53-1) a 2^53-1.

• Solo pueden ser 53 dígitos binarios (equivalente a 16 dígitos decimales, más o menos 9007199254740992).
• Bigint no tiene límite en la cantidad de dígitos, y cualquier número entero puede representarse con precisión. Sin embargo, solo se puede usar para representar enteros, y para distinguirlo del número, se deben agregar datos de tipo bigint con el sufijo n.

pero

• no
• puede usar signos positivos.

 console.log (2 ** 53) // 9007199254740992
 console.log (number.max_safe_integer) // 9007199254740991
 
 // bigint
 const bigint = 9007199254740993N
 console.log (bigint) // 9007199254740993N
 console.log (typeof bigint) // bigint
 console.log (1n == 1) // Verdadero
 console.log (1n === 1) // falso
 const bigintnum = bigint (9007199254740993n)
 console.log (bigIntnum) // 9007199254740993N

tipos de datos básicos

en ES6, a saber: srting , number boolean object null undefined symbol

nulo

Function Array Date object RegExp

8. Son: srting , number , boolean , object , null , undefined , symbol , promesa de BigInt

promesa

. Allsettled ():

• empaquete múltiples instancias en una nueva instancia y devuelva la matriz de estado después de los cambios de estado de todas las instancias (cambie todos los cambios de cambios y luego regresar)
• independientemente de si el resultado se cumple o rechazó, ninguna captura
• es equivalente a Promise.all() mejorada

.
    Promet.reject ({
      Código: 500,
      MSG: "Excepción de servicio",
    }),
    Promet.resolve ({
      Código: 200,
      Datos: ["1", "2", "3"],
    }),
    Promet.resolve ({
      Código: 200,
      Datos: ["4", "5", "6"],
    }),
  ]). entonces ((res) => {
      console.log (res) // [{razon: {código: 500, msg: 'excepción de servicio'}, estado: "rechazado"},
                      // {razon: {código: 200, datos: ["1", "2", "3"]}, estado: "rechazado"},
                      // {Razón: {código: 200, datos: ["4", "5", "6"]}, estado: "rechazado"}]
      const data = res.filter ((item) => item.status === "Fulfilled");
      console.log (datos);
                          // {Razón: {código: 200, datos: ["4", "5", "6"]}, estado: "rechazado"}]
  })

import ():

• Importar import() require() importación require
• obtenida a pedido.
• Carga

// entonces ()
 dejar modulepage = "index.js";
 import (modulepage) .then ((módulo) => {
    módulo.init ();
 });
 
 // Combinado con async espera
 (asincrónico () => {
  const modulepage = 'index.js'
  const módulo = ALEA IMPORT (MODULEPAGE);
  console.log (módulo)
 })

Global esto

• global esto, sin importar qué entorno (navegador, nodo, etc.), siempre apunte al objeto global

// navegador console.log (globalthis) // ventana

//nodo

• símbolo

de cadena opcional

global

si

• existe
• TypeScript.

 // antes de ES11 Sea a = user && user.name
 
 

que

B =

• usuario
• ?. .

"||" Valor predeterminado ";
  ""? "Valor predeterminado";
  
 const B = 0;
 const a = b || 5;
 console.log (a);
 
 const b = nulo // indefinido
 const a = b ?? 123;
 console.log

(

a

)

• ;​
• ​​La cadena original que coincide con un patrón con un reemplazo.
• El patrón puede ser una cadena o una expresión regular, y el reemplazo puede ser una cadena o una función que se aplica a cada coincidencia.
• ReplaceAll () es equivalente a mejorar las características de reemplazar (), reemplazar todo lo

de Let str = "¡Hola!, esta es una nueva característica de ES6 ~ ES12, actualmente ES12"
 
 console.log (str.replace ("es", "sy")); , esta es una nueva característica de SY6 ~ ES12, actualmente es12
 console.log (str.replace (/es/g, "sy")); , esta es una nueva característica de SY6 ~ SY12, actualmente es SY12
 
 console.log (str.replaceall ("es", "sy")); , esta es una nueva característica de SY6 ~ SY12, actualmente es SY12
 console.log (str.replaceall (/es/g, "sy")); , esta es una nueva característica de SY6 ~ SY12, actualmente Sy12

Promise

Promise.yy ()

• es diferente de la promesa.race (). Devuelve la promesa que se resuelve primero.

Promesa. Cualquiera ([
    Promet.reject ("tercero"),
    Promet.resolve ("segundo"),
    Promet.resolve ("primero"),
 ])
 .Then ((res) => console.log (res)) // segundo
 .catch ((err) => console.error (err)); 
 
 Promesa. Cualquiera ([
    Promet.reject ("Error 1"),
    Promet.reject ("Error 2"),
    Promet.reject ("Error 3"),
 ])
 .Then ((res) => console.log (res))
 .catch ((err) => console.error (err));
 // AggregateError: todas las promesas fueron rechazadas
 
 Promesa. Cualquiera ([
    Promise.resolve ("tercero"),
    Promet.resolve ("segundo"),
    Promet.resolve ("primero"),
 ])
 .Then ((res) => console.log (res)) // tercero
 

• err

(

err));

• Esto permite que los objetos existentes se rastreen sin evitar que sean recolectados de basura.
Muy
• útil
para el almacenamiento en
• caché
• y el mapeo de objetos
• .
• posible. También es importante evitar confiar en cualquier comportamiento específico que no esté garantizado por la especificación. Cuándo, cómo y si se produce la recolección de basura depende de la implementación de cualquier motor JavaScript dado.

Let WeakRef = New WeakRef ({Nombre: 'Domingo', año: 24})
 
 débilf.deref () // {nombre: 'domesy', año: 24}
 débilf.deref (). año // 24

operadores lógicos y expresiones de asignación

&& =

let num1 = 5;
Sea num2 = 10;
num1 && = num2;
console.log (num1);

// equivalente a num1 && (num1 = num2);
if (num1) {
    num1 = num2;
 }

|| =

let num1;
Sea num2 = 10;
num1 || = num2;
console.log (num1);

// equivalente a num1 || (num1 = num2);
if (! num1) {
   num1 = num2;
}

?

• ​

​
Sea num2 = 10;
Dejar num3 = nulo;

num1 ?? = num2;
console.log (num1);

num1 = falso;
num1 ?? = num2;
console.log (num1);

num3 ?? = 123;
console.log (num3);

// equivalente a // num1 ?? (num1 = num2

)

;

Dejar num2 = 100_000;

console.log (num1);
console.log (num2);

const num3 = 10.12_34_56
console.log (num3);