8 nuevas funciones de JavaScript para comenzar a usar hoy

ECMAScript 2022 (ES13) se lanzó el 22 de junio y codifica el último lote de nuevas funciones para JavaScript. Cada especificación de tecnología es una etapa en un baile continuo con uso en el mundo real. A medida que los desarrolladores usan JavaScript, constantemente descubrimos oportunidades y llevamos el lenguaje a nuevos territorios. La especificación ECMAScript responde formalizando nuevas características. Estos, a su vez, crean una nueva base para la evolución continua de JavaScript.

ES13 trae la especificación Ocho nuevas funciones para JavaScript. Comencemos con estas nuevas funciones que puede usar hoy.

áreas de clase

áreas de clase Es una propuesta general que incluye varias mejoras para trabajar con miembros en clases de JavaScript: Clasificar áreas de muestra públicas y privadas, entradas y métodos de instancias privadasy propiedades de clase estática.

Áreas de muestra públicas y privadas

Anteriormente, al declarar un campo miembro dentro del enfoque estándar class la palabra clave era proporcionarlo en el constructor. La especificación ECMAScript más reciente nos permite definir un campo miembro como parte del cuerpo de la clase. Como se muestra en el Listado 1, podemos usar un hashtag para indicar un área privada.

Listado 1. Campos internos de clase pública y privada

class Song {
    title = "";
    #artist = "";
    constructor(title, artist){
      this.title = title;
      this.#artist = artist;
    }
}
let song1 = new Song("Only a Song", "Van Morrison");
console.log(song1.title);
// outputs “Only a Song”
console.log(song1.artist);
// outputs undefined

En el Listado 1, definimos una clase, Songusando class palabra clave. Esta clase tiene dos miembros. title y artist. Él artist El miembro tiene el prefijo del carácter hash (#), por lo que es privado. Le permitimos establecer estos campos en el constructor. Tenga en cuenta que el constructor debe ser incluido this.#artist de nuevo con el prefijo hash; de lo contrario, el miembro público sobrescribirá el campo.

A continuación, definimos un ejemplo. Song class para establecer ambos campos a través del constructor. Luego enviamos los campos a la consola. El caso es que song1.artist no es visible para el mundo exterior y las salidas no están definidas.

Tenga en cuenta que incluso song1.hasOwnProperty("artist") devolverá falso. Además, no podemos crear campos privados en una clase utilizando una asignación posterior.

En general, esta es una buena adición para un código más limpio. La mayoría de los navegadores han admitido campos de instancias públicas y privadas durante algún tiempo, y es bueno verlos combinados oficialmente.

Métodos de instancias privadas y adiciones

El símbolo hash también funciona como prefijo en métodos y descriptores de acceso. El efecto sobre la apariencia es el mismo que para los campos de instancia privada. Entonces puede agregar un setter privado y un getter público Song.artist campo como se muestra en el Listado 2.

Listado 2. Accesos y métodos de instancias privadas

class Song {
  title = "";
  #artist = "";
  constructor(title, artist){
    this.title = title;
    this.#artist = artist;
  }
  get getArtist() {
    return this.#artist;
  }
  set #setArtist(artist) {
    this.#artist = artist;
  }
}

Miembros estáticos

La propuesta de campos de clase también proporciona miembros estáticos. Estos se ven y funcionan como lo hacen en Java: en el miembro if static modificador de palabra clave, existe en la clase en lugar de instancias de objetos. Puede agregar un miembro estático Song clase como se muestra en el Listado 3.

Listado 3. Agregue un miembro estático a la clase

class Song {
  static label = "Exile";
}

Solo se puede acceder al campo a través del nombre de la clase, Song.label. A diferencia de Java, las instancias de JavaScript no se refieren a una variable estática compartida. Tenga en cuenta que es posible tener un campo privado estático con estática #label; es decir, es un campo estático privado.

Índices de coincidencia RegExp

expresión regular match hay mejorado ingrese más información sobre los grupos elegibles. Por razones de rendimiento, esta información se incluye solo si /d flag se agrega a la expresión regular. (ver Índices de conformidad RegExp para ECMAScript ofreciendo una inmersión profunda en su significado /d expresión regular.)

Básicamente, usando /d flag hace que el motor de expresiones regulares incluya el inicio y el final de todas las subcadenas coincidentes. Cuando la bandera está presente, indices propiedad en exec los resultados serán una matriz bidimensional, donde la primera dimensión representa la coincidencia y la segunda dimensión representa el inicio y el final de la coincidencia.

En el caso de grupos con nombre, los índices tendrán un miembro con nombre groups, la primera dimensión contiene el nombre del grupo. Eche un vistazo al Listado 4 resultante de la propuesta.

Listado 4. Índices de grupos Regex

const re1 = /a+(?z)?/d;

// block 1
const s1 = "xaaaz";
const m1 = re1.exec(s1);
m1.indices[0][0] === 1;
m1.indices[0][1] === 5;
s1.slice(...m1.indices[0]) === "aaaz";

// block 2
m1.indices[1][0] === 4;
m1.indices[1][1] === 5;
s1.slice(...m1.indices[1]) === "z";

// block 3
m1.indices.groups["Z"][0] === 4;
m1.indices.groups["Z"][1] === 5;
s1.slice(...m1.indices.groups["Z"]) === "z";

// block 4
const m2 = re1.exec("xaaay");
m2.indices[1] === undefined;
m2.indices.groups["Z"] === undefined;

En el Listado 4, creamos una expresión regular que coincide a char una o más veces, seguido de un grupo coincidente denominado (nombre Z) partidos z caracteres cero o más veces.

El bloque de código 1 demuestra esto m1.indices[0][0] y m1.indices[0][1] que contiene 1 y 5 respectivamente. Porque la primera coincidencia para la expresión regular es la cadena de la primera a a la línea que termina en z. El bloque 2 muestra lo mismo. z personaje.

El bloque 3 muestra el acceso a la primera dimensión con el grupo nombrado m1.indices.groups. Hay un grupo emparejado, la final z carácter y comienza con 4 y termina con 5.

Finalmente, el bloque 4 demuestra que los índices y grupos únicos regresarán indefinidamente.

La conclusión es que si necesita acceder a los detalles de cómo se emparejan los grupos dentro de una cadena, ahora puede usar la función de índices de coincidencia de expresiones regulares para obtenerlo.

El nivel más alto espera

La especificación ECMAScript ahora incluye la capacidad de vincular módulos asíncronos. Cuando importas un módulo plegado awaitel módulo incluido no se ejecutará hasta que todos estén completos awaitse realiza s. Esto evita posibles condiciones de carrera cuando se trata de llamadas de módulos asíncronos interdependientes. Mira Una oferta de alto nivel espera para detalles.

La lista incluye un ejemplo tomado de 5 oferta.

Lista 5. Esperando al más alto nivel

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);
// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }

console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

Prestar atención awaiting.mjs la await Palabra clave antes de usar módulos dependientes dynamic y data. Esto significa que cuando usage.mjs importar awaiting.mjs, usage.mjs no será ejecutado awaiting.mjs termine de cargar las dependencias.

La marca ergonómica comprueba las zonas privadas.

Como desarrolladores, queremos un código cómodo, es decir, áreas privadas ergonómicas. Esta nueva función le permite verificar la presencia de un campo privado en una clase sin recurrir al manejo de excepciones.

El Listado 6 muestra esta nueva forma ergonómica de revisar el área privada dentro del salón de clases. in palabra clave.

Listado 6. Comprueba la existencia de un campo privado

class Song { 
  #artist; 
  checkField(){ 
    return #artist in this;
  } 
}
let foo = new Song();
foo.checkField(); // true

La lista 6 es ficticia, pero la idea es clara. Cuando necesite verificar una clase para un campo privado, puede usar el formato: #fieldName in object.

Indexación negativa con .at()

Pasaron los dias arr[arr.length -2]. Él método .at Como se muestra en el Listado 7, los indexables internos ahora admiten índices negativos.

Listado 7. Índice negativo con .at()

let foo = [1,2,3,4,5];
foo.at(3); // == 3
hasOwn

es el dueño

Objeto.hasOwn es una versión mejorada Object.hasOwnProperty. Funciona para algunos casos extremos, como cuando se crea con un objeto. Object.create(null). Tenga en cuenta que hasOwn es un método estático, no disponible en instancias.

Listado 8. hasOwn() en acción

let foo = Object.create(null);
foo.hasOwnProperty = function(){};
Object.hasOwnProperty(foo, 'hasOwnProperty'); // Error: Cannot convert object to primitive value
Object.hasOwn(foo, 'hasOwnProperty'); // true

El listado 8 muestra que puedes usar Object.hasOwn encima foo patrón creado con Object.create(null).

clase de bloque estático

Hay una oportunidad para los desarrolladores de Java: Oh, tenemos desde los años 90. ES 2022 presenta bloques de inicialización estáticos a JavaScript. Básicamente, puedes usar static El bloque de código que se ejecuta cuando se carga la clase contendrá la palabra clave y su acceso a los miembros estáticos.

El Listado 9 contiene un ejemplo simple del uso de un bloque estático para inicializar un valor estático.

Listado 9. Bloque estático

class Foo {
  static bar;
  static {
    this.bar = “test”;
  }
}

motivo del error

Por último, pero no menos importante, Error clase ahora incorpora apoyo causal. Esto permite trazas de pila similares a Java en cadenas de error. El constructor de errores ahora permite un objeto de opciones que incluye un cause como se muestra en el Listado 10.

Listado 10. Motivo del error

throw new Error('Error message', { cause: errorCause });