Resumen de todas las funciones nuevas de JavaScript ECMAScript 6

Han pasado ocho años desde que ECMAScript lanzó oficialmente ES6 en 2015. Desde 2015, se lanzará una nueva versión en junio de cada año, con el año en ese momento como número de versión.

Han aparecido muchas funciones nuevas en estas muchas versiones. Para facilitar la memoria, he organizado todas las funciones nuevas en este artículo.

PD: Alguna información dice que todas las versiones posteriores a ES2015 se denominan colectivamente ES6, y algunas dicen que ES6 significa ES2015, ES7 significa ES2016, etc., lo cual no se discutirá aquí.

ES2015 (ES6)

ES2015 es la versión con mayores cambios. Básicamente, se ha ampliado todo el contenido anterior a ES2015, como se muestra en la siguiente figura:

Let, palabras clave const y alcance a nivel de bloque.

Antes de ES6, solo había una forma de declarar variables, que era usar la palabra clave var . En ES2015, se agregaron let y const para declarar variables y constantes

. sigue:

// Variable de declaración let v = 100
v = 200
// Declarar constante constante V = 200
// Modificar constantes // V = ​​​​300 // Informar errores

declaradas

usando let y const tienen alcance a nivel de bloque

.

  var v = 100
}
{
  sea ​​valor = 200
}
consola.log(v)
console.log(val) // Error val no está definido

Vale la pena señalar que las variables declaradas usando let o const no tienen las características de promoción de variables y hay una zona muerta temporal.

La extensión de la función

permite que las funciones utilicen valores predeterminados en ES2015. El código de muestra es el siguiente:

// Antes de es2015 function foo(v) {.
  v = v ?
  volver v
}
//es2015
barra de funciones(v = 100) {
  volver v
}

Vale la pena señalar que si hay varios parámetros, los parámetros predeterminados deben usarse de atrás hacia adelante .

Las funciones de flecha se agregan en ES2015, que son una forma abreviada de funciones . El código de muestra es el siguiente:

function foo(v) {.
  regresar v``
}
// La función de flecha se escribe const foo = (v) => {
  volver v
}
// abreviatura 1
const foo = v => { // Solo un parámetro puede omitir los paréntesis return v
}
// abreviatura 2
const foo = v => v // Puede omitir retorno y llaves cuando solo hay retorno en la declaración.

Vale la pena señalar que this de la función de flecha se determina en función del contexto de ejecución, y this no está vinculado internamente. .

Cuando se utilizan funciones de flecha, no hay un objeto de argumentos internos, pero en su lugar se utilizan los parámetros restantes.

El código de ejemplo es el siguiente:

const foo = (...args) => {.
  // console.log(argumentos) // ReferenceError: los argumentos no están definidos
  console.log(args) // args es una matriz}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

El atributo de nombre agregado a la función en ES2015 apunta al nombre de la función.

El código de muestra es el siguiente:

function foo(v) {
  volver v
}
barra constante = v => v
console.log(foo.nombre) // foo
console.log(bar.name) //Extensión del

valor

. La expansión del valor en ES2015 agrega principalmente algunos métodos a Math y Number , así como métodos de representación binaria y octal.

En ES2015, 0b o 0B se usan para representar binario y 0o u 0O para representar octal.

El código de muestra es el siguiente:

console.log(0b111111111 === 511) // verdadero
console.log(0o777 === 511) //

Los atributos y métodos extendidos por true para Número son los siguientes:

El método para la extensión Math es el siguiente:

extensión de cadena

ES2015 introduce cadenas de plantilla, definidas mediante marcas de acento grave (`). La cadena de plantilla conservará el formato y se pueden usar variables.

El código de muestra es el siguiente:

// Use ` para definir la cadena de plantilla let str = `un plato de semanas`.
// La cadena de plantilla puede conservar el formato let str2 = `Un plato de semanas`
// La cadena de plantilla puede usar la variable const myName = 'Un plato de semanas'
let str3 = `author: ${myName}` // Use ${} para envolver

ES2015 también extiende algunos métodos para instancias String y String, de la siguiente manera:

La extensión de

la matriz proporciona un operador de expansión en ES2015, es decir..., utilizado en una matriz para expandir la matriz. y sepárelo con comas,

código de muestra como sigue:

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // Copia la matriz console.log(Math.max.call(null, ...arr)) // Usa cada elemento de la matriz como parámetro

Además, Array y matrices

proporcione una serie de métodos, que se introducirán uno por uno:

Array.from() : crea un objeto similar a una matriz o un objeto iterable como una nueva matriz . El código de muestra es el siguiente:

function foo() {.
  return Array.from(argumentos) // Convertir argumentos a matriz}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : crea una nueva matriz con un número variable de argumentos Ejemplo , el código de muestra es el siguiente:

Array.of(1) // [1]
Array.of(true, 1, 'Un plato de semanas') // [true, 1, 'Un plato de semanas']

Array.prototype.copyWithin(), copia superficialmente parte de la matriz en otra ubicación en la misma matriz y devolverlo no cambia la longitud de la matriz original.

El código de muestra es el siguiente:

const arr = [1, 2, 3, 4]

// Comience en el índice 2 y copie el contenido al índice 0 al final arr.copyWithin(0, 2) // [3, 4, 3, 4]

Array.prototype.find() , de acuerdo con la función de devolución de llamada dada, busque el primer elemento coincidente y devuelva indefinido si no lo encuentra . El código de muestra es el siguiente:

const arr = [1, 2, 3, 4].
arr.find(item => item === 2) // 2 (elemento indicador),

Array.prototype.findIndex() , de acuerdo con la función de devolución de llamada dada, busque el índice del primer elemento coincidente, regrese si no lo encuentra - 1 , el código de muestra es el siguiente:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (indica índice)

Array.prototype.fill() , llena la matriz con el valor dado . El código de muestra es el siguiente:

const arr = [1, 2. , 3, 4 ]
// Completa el índice 1-3 con el valor dado
arr.fill('un cuenco de semanas', 1, 3) // [ 1, 'un cuenco de semanas', 'un cuenco de semanas', 4 ]

Array.prototype.keys() , devuelve un objeto iterable cuyo contenido es la clave del array , el código de muestra es el siguiente:

const arr = [1, true, 'Un plato de semanas']
teclas constantes = arr.keys()
para (const i de claves) {
  console.log(i) // Resultados transversales 0 1 2
}

Array.prototype.values() , devuelve un objeto iterable cuyo contenido es el valor de la matriz .

El código de muestra es el siguiente:

const arr = [1, true, 'A bowl of Zhou']
valores constantes = arr.values()
para (const i de valores) {
  console.log(i) // Resultado transversal 1 verdadero Un tazón de semanas}

Array.prototype.entries() , devuelve un objeto iterable cuyo contenido es una matriz. El índice 0 es el elemento de la matriz original y 1 es el elemento. del valor de la matriz original,

el código de muestra es el siguiente:

const arr = [1, verdadero, 'Un plato de semanas']

iterador constante = arr.entradas()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'Un tazón de semanas' ] ]

La extensión del objeto

en ES2015 permite el nombre del atributo del objeto y El valor del atributo debe ser consistente. Puede simplemente escribir el nombre del atributo.

El código de muestra es el siguiente:

const myName = 'Un plato de semanas'.
edad constante = 18
persona constante = {miNombre, edad}
console.log(person) // { myName: 'A bowl of Zhou', age: 18 }

Además, al definir un objeto, puedes usar [] expresiones envueltas como nombres de atributos. El código de muestra es el siguiente:

const myName = 'Una semana de tazón'
edad constante = 18
persona constante = {
  mi nombre,
  ['a' + 'g' + 'e']: edad,
}
console.log(person) // { myName: 'One Bowl Zhou', edad: 18 }

Object.is() : se usa para comparar si dos valores son iguales, se usa para resolver NaN ≠ = NaN, +0 === - 0 problema,

el código de muestra es el siguiente:

console.log(NaN === NaN) // false
console.log(+0 === -0) // verdadero

console.log(Object.is(NaN, NaN)) // verdadero
console.log(Object.is(+0, -0)) // false

Object.assign() : copia los valores de todas las propiedades enumerables de uno o más objetos de origen al objeto de destino y devuelve el objeto de destino,

ejemplo El código es el siguiente:

const persona = Object.assign({}, { nombre: 'One Bowl Zhou' }, { edad: 18 })
console.log(persona) // {nombre: 'One Bowl Zhou', edad: 18}

• Object.getPrototypeOf() : obtiene el objeto prototipo .
• Object.setPrototypeOf() : establece el objeto prototipo .

Las clases

presentan el concepto de clases en ES2015 y las clases están disponibles a nivel de sintaxis. El código de muestra es el siguiente:

class Persona {.
  constructor(edad) {
    //Atributo this.myName = 'Un plato de semanas'
    esta.edad = edad
  }
  // Método estático static print() {
    consola.log()
  }
  //El acceso obtiene miNombre() {
    console.log('captador')
    devolver 'un cuenco de semanas'
  }
  establecer miNombre(v) {
    console.log('setter' + v)
  }
  establecerNombre(v) {
    este.miNombre = v
  }
}
persona constante = nueva persona (18)
person.setName('ywanzhou') // Activa el descriptor de acceso console.log(person.myName) // Activa el descriptor de acceso getter.

Modularity

propuso la especificación de modularización ESModel en ES2015, que es la primera especificación de modularización de nivel oficial. especificación, podemos usar exportar para exportar módulos e importar para introducir módulos.

El código de muestra es el siguiente:

importar a desde 'm' // Importar la exportación predeterminada en el módulo m y nombrarla a.
importar a, {b} desde 'm' // Importar la exportación predeterminada en el módulo m e importar por separado el miembro b
import * as A from 'm' // Importa todos los miembros en el módulo import 'm' // Ejecuta el módulo m export const b = 1 // Exporta por separado export default b // Exporta por defecto export { b } // Exporta bajo demanda export { b como bb } // Cambiar nombre y exportar export { b } desde 'm' // Importar el miembro b en el módulo m y exportar

la asignación de desestructuración

ES2015 ha agregado una nueva sintaxis para la asignación de desestructuración, que nos permite usar ciertos patrones en. matrices. O extraiga el valor especificado del objeto.

El código de muestra es el siguiente:

// Asignación de estructura de matriz let [nombre, edad, hobby = 'codificación' /* Valor predeterminado de asignación de estructura */] = ['A Bowl. de Zhou', 18]
// Intercambiar los valores de las dos variables sea a = 1
sea ​​b = 2
;[a, ​​​​b] = [b, a]
consola.log(a, b) // 2 1

// Asignación de estructura de objeto let { nombre: ObjName /* Asignación de desestructuración renombrar*/, sexo } = { nombre: 'Un plato de semanas', sexo: 1 }

// Desestructuración de la asignación de parámetros de función function bar({ nombre, edad }) {
  devolver nombre + edad
}
bar({ nombre: 'Un plato de semanas', edad: 18 }) // Un plato de semanas 18

Símbolo

El símbolo es un nuevo tipo de datos en ES2015. Se crea mediante Symbol() y puede pasar una cadena como. parámetro Se utiliza para describir el símbolo;

los valores de símbolo creados mediante el método Symbol () son todos únicos. El código de muestra es el siguiente:

/**.
 * Sintaxis * Símbolo([descripción])
 * * descripción -> es una información de descripción opcional */
//Crea un valor de tipo Símbolo const mySymbol = Símbolo()
console.log(mySymbol) // Símbolo()

const miNombre = Símbolo('Un cuenco de semanas')
console.log(typeof myName) // símbolo

El símbolo también tiene una serie de propiedades y métodos que no se presentarán aquí.

Promise

Promise es una solución asincrónica proporcionada en ES2015, que resuelve el problema del infierno de devolución de llamadas.

Se puede crear un objeto de promesa a través Promise() . Cada objeto de promesa tiene los siguientes estados:

• pendiente: estado inicial, ni estado de éxito ni de fracaso.
• resuelto: significa que la operación se completó con éxito.
• rechazado: significa que la operación falló.

Solo hay dos tipos de cambio de estado, a saber:

• pendiente → resuelto
• pendiente → resuelto

Una vez que el estado cambia, no volverá a cambiar.

Hay un método then en la instancia Promise , que nos permite encadenar llamadas en la instancia Promise . then el método también tiene Se devolverá una instancia Promise ,

como se muestra en la siguiente figura:

El código de muestra es el siguiente:

nueva promesa ((resolver, rechazar) => {
    console.log('Soy el registro de la primera Promesa')
    resolver()
})
    .entonces(() => {
        console.log('Soy el primero en iniciar sesión entonces')
    })
    .entonces(() => {
        console.log('Entonces soy el registro del segundo, pero tengo una excepción')
        lanzar nuevo error('Error')
    })
    .entonces(() => {
        console.log('Soy el registro de la primera devolución de llamada en la tercera entonces, pero no lo ejecutaré porque ocurrió una excepción encima de mí')
    }, () => {
        console.log('Soy el registro de la segunda devolución de llamada en la tercera y luego lo ejecuté')
    })
    .entonces(() => {
        console.log('Soy el registro del cuarto entonces, puedo ejecutarlo normalmente')
    })

/* El resultado de la ejecución es el siguiente: Soy el registro de la primera Promesa
Entonces soy el primero en iniciar sesión
Entonces soy el registro en el segundo, pero obtuve una excepción. Soy el registro de la segunda devolución de llamada en el tercero y luego lo ejecuté. Entonces soy el registro en el cuarto. Puedo ejecutarlo normalmente*/

Algunos relacionados

Los métodos de Promise son los siguientes:

• Promise.prototype.then() : Requiere como máximo dos parámetros: la función de devolución de llamada del éxito y fracaso de Promise.
• Promise.prototype.catch() : igual al segundo parámetro del método then
• Promise.all() : empaqueta múltiples instancias en una nueva instancia, devuelve la matriz de resultados después de todos los cambios de estado de la instancia (cambia todos los cambios y luego regresa)
• Promise.race() : empaqueta múltiples instancias en una nueva instancia, devuelve todos los estados de la instancia. Prioriza el resultado modificado (cambiar primero y regresar primero)
• Promise.resolve() : convierte el objeto en un objeto Promise (equivalente a new Promise(resolve => resolve()) )
• Promise.reject() : convierte el objeto en un estado de rejected Objeto de promesa (equivalente a new Promise((resolve, reject) => reject()) )

Iterador

Iterador es un iterador Es una interfaz que proporciona un mecanismo de acceso unificado para varias estructuras de datos. La estructura implementa la interfaz de iteración y se puede atravesar de forma unificada.

La estructura de datos que implementa la interfaz iterable generalmente se implementa a sí misma o hereda el atributo Symbol.iterator y es un objeto iterable. La propiedad Symbol.iterator en sí es una función, que es la función de generación de iterador predeterminada de la estructura de datos actual.

Un objeto que contiene el método next() puede denominarse objeto iterable. El objeto next() devolverá un objeto que contiene dos valores,

como se muestra a continuación:

• value : cualquier valor JavaScript devuelto por el iterador. Se puede omitir cuando done es true .
• done : un valor booleano. Cuando es false , significa que la iteración no se ha detenido. Cuando es true , detiene el iterador inmediatamente y el valor del value se puede omitir.

La interfaz del iterador proporcionada de forma nativa por JavaScript se muestra en la siguiente figura:

Ahora implementamos un iterador para obj, el código es el siguiente:

const obj = {
    [Símbolo.iterador] () {
        devolver {
            próximo () {
                console.log('Iterador ejecutado');
                devolver {
                    valor: '',
                    hecho: verdadero // Marca si terminó, verdadero significa que terminó}
            }
        }
    }
}

Agregamos una impresión en el método next() Para verificar que el iterador se ejecutó, el resultado final de la ejecución es que

el iterador se ejecutó.

Generador

El generador es una solución de programación asincrónica proporcionada en ES2015. la palabra clave function Utilice un asterisco * entre el nombre de la función y el nombre de la función, y utilice la palabra clave yield dentro de la función para definir diferentes estados.

El código de muestra es el siguiente:

function* testGenerator() {
  // el rendimiento define un rendimiento estatal 'un plato de semanas'
  producir 'características nuevas'
  return 'generator' // Terminar el generador, incluso si hay una palabra clave de rendimiento más adelante, no será válida}
const g = testGenerator() // Devuelve el objeto Generador y mueve el estado a través del método next() g.next()
/* { valor: 'Un plato de Zhou', listo: falso } */

g.siguiente()
/* { valor: 'es nuevas funciones', hecho: falso } */

g.siguiente()
/* { value: 'generator', done: true } */

Proxy y Reffect

Proxy se utilizan para crear un objeto proxy para implementar la interceptación y personalización de operaciones básicas. Hay 13 operaciones básicas, como se muestra en la siguiente tabla:

Vue3 está escrito en base a Proxy . El siguiente código muestra el uso de objetos Proxy :

<!DOCTYPE html>.
<html lang="es">
<cabeza>
  <meta juego de caracteres="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="nofollow externo" rel="hoja de estilo" />
  <title>Actualizar dom automáticamente a través del set</title>
</cabeza>

<cuerpo>
  <p class="card" style="ancho: 300px; margen: 100px auto">
    <p class="cuerpo-tarjeta">
      <h1 id="nombre"></h1>
      <button id="btn" class="btn btn-primary">Modificar</button>
    </p>
  </p>
  <guión>
    // Obtener el nombre constante del nodo DOM = document.getElementById('nombre')
    const btn = document.getElementById('btn')
    //Definir una función que modifica el valor const updateDOM = (el, valor) => {
      el.innerHTML = valor
    }
    persona constante = nuevo Proxy({
      nombre: 'Un plato de avena',
    }, {
      set(objetivo, propKey, valor) {
        //Si el valor interno cambia, llama a nuestro updateDOM
        actualizarDOM(nombre,valor)
        objetivo[propKey] = valor
        devolver verdadero
      },
    })
    nombre.innerHTML = persona.nombre
    // Haga clic en el botón para activar la operación de modificación btn.addEventListener('click', () => {
      persona.nombre === '¿Un plato de Zhou'?
        (persona.nombre = 'Un plato de avena') :
        (persona.nombre = 'Un tazón Zhou')
    })
  </script>
</cuerpo>
</html>

El código anterior utiliza el método set para el enlace de datos. Si el objeto cambia, nuestro DOM se actualizará automáticamente.

Reflect es un objeto proporcionado por ECMAScript2015. Proporciona algunos métodos estáticos para interceptar operaciones de JavaScript. Estos métodos son consistentes con los métodos de handlers en Proxy.

Reflect no es un constructor, lo que significa que no se puede crear una instancia de él.

Cada operación de interceptación en el objeto Proxy (por ejemplo: get , delete , etc.) llama internamente al método Reflect en consecuencia. Los métodos estáticos que proporciona son consistentes con los nombres de los métodos en handlers en Proxy,

de la siguiente manera:

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet y WeakMap son varios objetos nuevos en ES2015:

precisos

• Set WeakSet conjuntos. La diferencia entre los dos es que Set puede almacenar cualquier tipo de datos, mientras que WeakSet solo puede almacenar referencias a objetos, y son las referencias débiles;

Establecer objetos en el desarrollo real es implementar la deduplicación de datos. El código de muestra es el siguiente:

const arr = [1, 2, 2, 3, 4, 3, 5].
conjunto constante = nuevo conjunto (arr)
// El objeto establecido se puede usar... para expandir todos los elementos console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map y WeakMap son similares a objetos y se almacenan en la forma de pares clave-valor Sí, la diferencia entre los dos es que los pares clave-valor de Map pueden ser arbitrarios, mientras que las claves de WeakMap deben ser referencias a objetos y los valores pueden ser de cualquier tipo.

ES2016 (ES7)

ES2016 lanza relativamente pocas características nuevas, principalmente dos características nuevas, como se muestra en la siguiente figura:

El operador exponente

ES2016 tiene un nuevo exponente ** , también llamado operador de potencia, que tiene la misma función que Math.pow().

El código de muestra es el siguiente:

console.log(2 ** 10 === Math.pow. (2, 10)) // verdadero

El método Array.prototype.includes()

agrega el método includes() al prototipo de matriz en ES2016. Este método se utiliza para determinar si una matriz contiene un valor específico y devuelve un valor booleano

. El código de muestra es el siguiente:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

Vale la pena señalar que NaN y NaN , +0 y -0 son iguales cuando se usa includes() .

ES2017(ES8)

de azúcar de sintaxis async/await

resuelve el problema del infierno de devolución de llamada, si hay demasiadas llamadas en cadena, la legibilidad aún empeorará. El nuevo azúcar de sintaxis async/await en ES2017 resuelve este problema.

La promesa se escribe de la siguiente manera:

;(función () {
  promesa de función (v) {
    devolver nueva Promesa((resolver, rechazar) => {
      resolver(v)
    })
  }
  constante p = promesa(1)
  p.entonces(res => {
    promesa de devolución (res)
  }).entonces(res => {
    consola.log(res)
  })
})()

Si la próxima Promesa depende de la anterior, esta cadena de llamadas será muy larga. Ahora reescribámosla usando el azúcar sintáctico async/await:

;(async function () {.
  promesa de función (v) {
    devolver nueva Promesa((resolver, rechazar) => {
      resolver(v)
    })
  }
  const r1 = espera promesa (1)
  constante r2 = espera promesa (r1)
  const res = espera promesa (r2)
  consola.log(res)
})()

Como puede ver, podemos usar azúcar sintáctico async/await para reescribir Promise en un método de escritura plano.

El objeto Atomics

ES2017 agrega un nuevo objeto Atomics. Este objeto proporciona una serie de métodos estáticos para operar objetos SharedArrayBuffer y ArrayBuffer. No se puede crear una instancia de este objeto utilizando la new palabra clave. Solo proporciona algunas propiedades estáticas y

extensiones de objetos

. extendido para Objeto en ES2017, de la siguiente manera:

• Object.values() : Devuelve una matriz de todos los valores de propiedad enumerables de un objeto determinado;
• Object.entries() : Devuelve una matriz de todos los valores de propiedad enumerables de un objeto determinado; objeto en sí. Una matriz de pares clave-valor para propiedades enumeradas.
• Object.getOwnPropertyDescriptors() : Devuelve los descriptores de propiedad de todas las propiedades propias de un objeto determinado.

La expansión de funciones

en ES2017 nos permite agregar una coma al final de la lista de parámetros de la función. Esta pequeña característica es muy útil porque solo es necesario cambiar una línea de código al actualizar la coma final. Es necesario cambiar dos líneas de código.

El código de ejemplo es el siguiente:

función divertida(
  aaaaa,
  bbbbb,
  ccccc,
) {}

Si hay una coma al final, solo necesita agregar una línea al final; si no existe, debe agregar la coma al final y luego agregar una línea. Esto cambia dos líneas en la gestión de versiones, no una.

La expansión de cadenas

agrega dos nuevos métodos de instancia para cadenas en ES2017, que son:

• padStart() : rellena espacios al principio de la cadena;
• padEnd() : rellena espacios al final de la cadena.

El código de muestra es el siguiente:

const str; = 'Un plato de Zhou'
console.log(str.padStart(10)) /* Un plato de Zhou*/
console.log(str.padEnd(10)) /* Yiwan Zhou*/

ES2018(ES9)

La iteración asincrónica

tiene una nueva declaración for await...of en ES2018, que se puede usar para atravesar objetos iterables asincrónicos.

El código de muestra es el siguiente:

var asyncIterable = {.
  [Símbolo.asyncIterator]() {
    devolver {
      yo: 0,
      próximo() {
        si (esto.i < 3) {
          return Promise.resolve({ valor: this.i++, hecho: falso })
        }

        return Promise.resolve({hecho: verdadero})
      },
    }
  },
}
;(función asíncrona () {
  para esperar (número de asyncIterable) {
    consola.log(núm)
  }
})()

// 0
// 1
// 2

Extensiones de expresiones regulares

En ES2018, se realizan las siguientes extensiones a las expresiones regulares:

Nomenclatura de grupos de expresiones regulares:

antes de ES2018, no podíamos nombrar los grupos en expresiones regulares. Esta característica se introdujo en ES2018. Como referencia,

el código de muestra es el siguiente:

const RE_DATE = /(?<año>d{4})-(?<mes>d{2})-(?<día>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
año constante = matchObj.groups.year // 2022
mes constante = matchObj.groups.month // 02
const day = matchObj.groups.day //

Modificador de 22 s/modo dotALl: ​​el nuevo modificador s permite el . Coincide con cualquier carácter individual y el atributo **** indica si se debe usar la modificación " s " en conjunto en el símbolo de expresión regular. .

Aserciones inversas: solo existían aserciones directas antes de ES2018, mientras que en ES2018 se agregaron aserciones inversas y afirmaciones negativas inversas .

Operador de dispersión de objetos

Se agregó un nuevo operador de dispersión de matriz en ES2015. En ES2018, esta característica se agregó al objeto. El código de muestra es el siguiente:

const n = { name: 'One Bowl of Zhou' .
constante a = {edad: 18}
persona constante = {...n,...a}
// Fusionar objeto console.log(person) // { nombre: 'A Bowl of Zhou', edad: 18 }

Promise.prototype.finally()

finally() devolverá un objeto Promise Cuando el estado de la promesa. cambia, ya sea que se rejected o fulfilled , se ejecutará finally() .

El código de muestra es el siguiente:

buscar (url)
  .entonces(res => {
    consola.log(res)
  })
  .catch(error => {
    consola.log(error)
  })
  .finalmente(() => {
    console.log('fin')
  })

ES2019(ES10)

La optimización

ha optimizado los dos contenidos siguientes en ES2019:

• Function.prototype.toString() : el cuerpo de la función devuelta contiene comentarios y espacios;
• try...catch : catch en la declaración no permite parámetros. El código de muestra es el siguiente:

try. {
  console.log('Un plato de semanas')
} atrapar {
  console.error('Un plato de semanas')
}

trimStart()/trimLeft() y trimEnd()/trimRight()

• String.prototype.trimStart : utilizado para eliminar espacios en el lado izquierdo de la cadena;
• String.prototype.trimLeft : es un alias de trimStart
• String.prototype.trimEnd : usado Elimina los espacios en el lado derecho de la cadena;
• String.prototype.trimRight : trimEnd

una extensión de la matriz de alias

. Se extienden dos métodos de matriz en ES2019, a saber:

• Array.prototype.flat() : esto. El método seguirá un especificable Recorrerá profundamente la matriz de forma recursiva y fusionará todos los elementos con los elementos de la submatriz atravesada en una nueva matriz y la devolverá, en pocas palabras, es para lograr el aplanamiento de la matriz;

ajuste constante = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : este método asigna y aplana la matriz y devuelve una nueva matriz (solo se puede un nivel de matriz). ampliarse).

Object.fromEntries()

El nuevo método Object.fromEntries() en ES2019 convierte una lista de pares clave-valor en un objeto. Es la operación inversa del método Object.entries() .

El código de muestra es el siguiente:

const person. = {
  nombre: 'Un cuenco de Zhou',
  edad: '18',
}
const e = Objeto.entradas(persona)

const p = Objeto.deEntries(e)
console.log(p) // { nombre: 'Un plato de semanas', edad: '18' }

de Symbol.prototype.descrption

description una propiedad de solo lectura que devuelve la cadena de descripción opcional al crear el objeto Símbolo.

ES2020(ES11)

La modularización

agrega importación dinámica en ES2020, lo que significa que el módulo se cargará cuando lo necesitemos. Esto puede reducir la sobrecarga y el tiempo de carga de la página. El código de muestra es el siguiente:

import('/modules/my-module.js'). entonces(módulo => {
  // Haz algo con el módulo.
})

La importación dinámica utiliza import() , que devuelve una Promesa.

En ES2020, también se agrega un meta a import , que expone un objeto de atributos de metadatos específicos del contexto al módulo JavaScript.

tipo de datos BigInt

BigInt resuelve el problema de que el número máximo permitido en JavaScript es 2**53-1 . BigInt puede representar cualquier número entero grande.

const theBiggestInt = 9007199254740991n;
const tambiénEnorme = BigInt(9007199254740991);
// ↪ 9007199254740991n
const enormeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const enormeHex = BigInt("0x1ffffffffffff");
// ↪ 9007199254740991n
const enormeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis objeto

globalThis se introdujo en ES2020, que es la introducción de objetos globales en Node es Global y el entorno del navegador es Window . El siguiente código muestra la diferencia entre si existe GlobalThis :

// antes

var getGlobal = función () { 
  if (typeof self! == 'indefinido') { return self } 
  if (tipo de ventana! == 'indefinido') { ventana de retorno } 
  if (tipo de global! == 'indefinido') { return global } 
  throw new Error('no se puede localizar el objeto global'); 
}; 

var globales = getGlobal(); 

if (tipo de globals.setTimeout! == 'función') { 
  // ¡no hay setTimeout en este entorno! 
}

// después de if (tipo de globalThis.setTimeout! == 'función') {
  // ¡no hay setTimeout en este entorno!
}

Operador fusionante de valor nulo

El operador fusionante de valor nulo está representado por dos signos de interrogación. Este operador también es un operador lógico, que es similar al operador lógico OR. La regla de cálculo es que siempre que el operando izquierdo sea null o undefined , se devuelve el operando derecho; de lo contrario, se devuelve el operando izquierdo. El operador lógico OR sólo devuelve el operando derecho si el operando izquierdo se convierte al tipo boolean y es false .

El código de muestra es el siguiente:

console.log(null ?? 10) // 10
console.log(indefinido?? 10) // 10
console.log (falso ?? 10) // Falso

útil

para asignar valores a las variables sin valores.

El código es el siguiente:

valor var

// Si el valor del valor no es nulo o indefinido, asigne un valor de 10
valor = valor?
Console.log (valor) // 10 it

vale la pena señalar () el operador de coalización de valor nulo y lógico y lógico o no se puede usar al mismo tiempo, de lo contrario se lanzará una excepción.

Operador de cadena opcional

El operador de cadena opcional se usa para leer el valor de un atributo en la cadena de un objeto. atribuye Aab , primero debemos Aab de Aa A .

El uso del operador de cadena opcional no causará tal problema undefind

var a = {}

(

(

aa?

// Si el método obj.fun () existe, se llamará directamente a continuación.

obj.fun

?

Promise.allSettled()

ES2021 (ES12)

String.prototype.replaceAll ()

El

método ReplaceAll ( replaceAll() devuelve una nueva cadena.

const newstr = str.replaceall ('gachas', 'semana')

(

Newstr) // Un tazón de

separadores numéricos

_

(

WeakRef

símbolo 100000000

la

lectura.

La referencia a otro objeto.

Promise.Aly ()

Promise.any() nuevo Método de Promise.any() promise.all() (Es decir, todas las promesas fallan/rechazan), se devuelven una promesa fallida y una instancia de tipo AggregateError.

Operadores de asignación lógica

Algunos

de

asignación se han agregado en ES2021, como sigue:

• &&=
• ||=
• ??=

] = [verdadero, falso]
f1 && = 'un tazón de semanas' // equivalente a str = str && 'un tazón de semanas'
F2 || = 'Un tazón de semanas' // equivalente a str = str ||

??

= 'un tazón de semanas' // equivalente a str = str?

La extensión de la clase

sin

definirlos en constructor en ES2022.

  myname = 'un tazón de zhou'
}
/* Ambos son consistentes*/
Clase C {
  constructor() {
    myname = 'un tazón de zhou'
  }
}

Si un miembro se declara sin inicialización, su valor predeterminado no está definido.

nos

permite usar variables nombradas a partir de # como miembros privados de la clase

.
  #myname = 'Semana de un tazón'
}
const c = nuevo C ()
Console.log (#myname) // Campo privado '#myname' debe declararse en una clase de adjunto

se usa en el nivel superior

await El nivel superior sin usar la función de async

.
awaTasyncfun ()
console.log (123)

Object.hasown ()

método

object.hasown Object.hasOwn() se usa para determinar si un objeto tiene un cierto atributo.

  Nombre: 'Un tazón de zhou',
  edad: 18,
}
console.log (object.hasown (persona, 'nombre')) // Verdadero
console.log (object.hasown (persona, 'sexo')) // falso

array.prototype.at ()

El método nuevo at() en ES2022, su función es obtener un miembro de la matriz y sus parámetros es el índice

de

la matriz.

6]
console.log (arr.at (-1)) // 6
// equivalente a arr [arr.length - 1]

d Modificador

exec() expresión regular agrega A /d /d modificador. Atributo utilizado para indicar el valor de índice inicial del resultado coincidente en la cadena original.

El código de muestra es el siguiente:

const str = 'javascript'
const r = /a /d

const M = R.Exec (STR)
Console.log (M. Indices [0]) // [1, 2]

está escrito al final

.

El mapa mental es el siguiente: