Prefacio
Un proceso de producción estándar de ECMAScript incluye cinco etapas desde la Etapa 0 hasta la Etapa 4. Cada etapa se envía a la siguiente etapa para su aprobación por TC39. Este artículo describe que estas nuevas funciones se encuentran en la etapa 3 o la etapa 4, lo que significa que estas funciones deberían ser compatibles con los navegadores y otros motores pronto.
1. Variables privadas
de la clase Una de las últimas propuestas es agregar variables privadas a la clase. Usaremos el símbolo # para denotar las variables privadas de la clase. De esta forma, no es necesario utilizar cierres para ocultar variables privadas que no quieren exponerse al mundo exterior.
class Counter { #x = 0; #increment() { this.#x++; } onClick() { this.#increment(); } } const c = new Counter(); c.onClick(); // 正常 c.#increment(); // 报错
Una variable miembro o función miembro modificada por # se convierte en una variable privada. Si intenta acceder a ella fuera de la Clase, se lanzará una excepción. Ahora, esta función está disponible en las últimas versiones de Chrome y Node.js.
2. Operador de cadena opcional
Es posible que se haya encontrado con una situación de este tipo: cuando necesite acceder a varias capas de propiedades anidadas dentro de un objeto, obtendrá el notorio error No se puede leer la propiedad 'superior' de indefinida, y luego debe modificarla Su El código maneja todos los posibles objetos indefinidos en la cadena de propiedades, como:
let nestedProp = obj?.first?.second;
如果obj或obj.first是null/undefined，表达式将会短路计算直接返回undefined
Soy un antiguo programador de front-end web que ha estado involucrado en el desarrollo durante muchos años. Hace algún tiempo, pasé un mes clasificando un producto seco de aprendizaje de front-end web que es más adecuado para el aprendizaje. Se organizan y envían varios marcos a todos los socios pequeños de front-end, si desea obtenerlo, puede agregar el siguiente grupo de QQ para obtenerlo de forma gratuita.
Tres, el operador de fusión espacial
En el proceso de desarrollo, a menudo nos encontramos con un escenario de este tipo: si la variable está vacía, se usa el valor predeterminado. Así es como lo logramos:
let c = a? a: b // Método 1 let c = a || b // Método 2
Estos dos métodos tienen un inconveniente obvio, cubrirán todos los valores falsos, como (0, '', falso), Estos los valores pueden ser entradas válidas en determinadas situaciones.
Para resolver este problema, alguien propuso crear un operador coalescente "nulo", denotado por ??. Con él, solo establecemos el valor predeterminado cuando el primer elemento es nulo o indefinido.
Por ejemplo, el siguiente código:
const x = null;const y = x ?? 500;console.log(y); // 500const n = 0const m = n ?? 9000;console.log(m) // 0
Cuatro, BigInt
Una de las razones por las que JS siempre ha sido malo en matemáticas es que no puede representar con precisión números mayores que 2 ^ 53, lo que hace que sea muy difícil lidiar con números bastante grandes.
1234567890123456789 * 123;// -> 151851850485185200000 // 计算结果丢失精度
Afortunadamente, BigInt (entero grande) es para resolver este problema. Puede utilizar los mismos operadores que los números normales en BigInt, como +, -, /, *,%, etc.
La creación de un valor de tipo BigInt también es muy simple, simplemente agregue n después del número. Por ejemplo, 123 se convierte en 123n. También puede usar el método global BigInt (valor) para convertir, y el valor del parámetro de entrada es un número o una cadena de números.
const aNumber = 111;const aBigInt = BigInt(aNumber);aBigInt === 111n // truetypeof aBigInt === 'bigint' // truetypeof 111 // "number"typeof 111n // "bigint"
Siempre que agregue n al final del número, puede calcular el número grande correctamente:
1234567890123456789n * 123n;// -> 151851850485185185047n
Pero hay un problema: en la mayoría de las operaciones, BigInt y Number no se pueden mezclar. Es posible comparar Number y BigInt, pero no puede sumarlos.
1n < 2// true1n + 2// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
Ahora, esta función está disponible en las últimas versiones de Chrome y Node.js.
Cinco, campo estático
Permite que las clases tengan campos estáticos, similar a la mayoría de los lenguajes de programación orientada a objetos. Los campos estáticos se pueden usar en lugar de enumeraciones y también se pueden usar para campos privados.
class Colors { // public static 字段 static red = '#ff0000'; static green = '#00ff00'; // private static 字段 static #secretColor = '#f0f0f0';}font.color = Colors.red;font.color = Colors.#secretColor; // 出错
Ahora, esta función está disponible en las últimas versiones de Chrome y Node.js.
6.
La función async / await en Top-level await ES2017 (ES8) solo permite el uso de la palabra clave await en funciones asincrónicas. La nueva propuesta tiene como objetivo permitir el uso de la palabra clave await en el contenido de nivel superior, por ejemplo, para simplificar el proceso de carga de módulos dinámicos:
const strings = await import(`/i18n/${navigator.language}`);
Esta función es muy útil para depurar contenido asincrónico (como buscar) en la consola del navegador sin tener que envolverlo en una función asincrónica.
Otro caso de uso es que se puede usar en el nivel superior de un módulo ES que se inicializa de forma asincrónica (como establecer una conexión de base de datos). Al importar un "módulo asíncrono" de este tipo, el sistema de módulos esperará a que se resuelva y luego ejecutará los módulos que dependen de él. Esta forma de manejar la inicialización asincrónica es más fácil que devolver una promesa de inicialización y esperar a que se resuelva. Un módulo no sabe si sus dependencias son asincrónicas.
// db.mjsexport const connection = await createConnection();// server.mjsimport { connection } from './db.mjs';server.start();
En este ejemplo, no se realizará nada hasta que se complete la conexión en server.mjs db.mjs.
Esta función ahora está disponible en la última versión de Chrome.
Seven, WeakRef
En términos generales, en JavaScript, la referencia del objeto está fuertemente reservada, lo que significa que mientras se mantenga la referencia del objeto, no se recolectará basura.
const ref = { x: 42, y: 51 };// 只要我们访问 ref 对象（或者任何其他引用指向该对象），这个对象就不会被垃圾回收
Actualmente en Javascript, WeakMap y WeakSet son los únicos métodos para hacer referencias débiles a objetos: agregar un objeto como clave a WeakMap o WeakSet no evitará que se recolecte basura.
const wm = new WeakMap();{ const ref = {}; const metaData = 'foo'; wm.set(ref, metaData); wm.get(ref); // 返回 metaData}// 在这个块范围内，我们已经没有对 ref 对象的引用。// 因此，虽然它是 wm 中的键，我们仍然可以访问，但是它能够被垃圾回收。const ws = new WeakSet();ws.add(ref);ws.has(ref);// 返回 true
WeakMap de JavaScript no es una referencia débil en el verdadero sentido: de hecho, mientras la clave siga viva, hace una fuerte referencia a su contenido. WeakMap solo hace referencia débilmente a su contenido después de que la clave se recolecta como basura.
WeakRef es una API más avanzada que proporciona una referencia débil real. Las instancias Weakref tienen un método deref, que devuelve el objeto original al que se hace referencia, y si se ha recopilado el objeto original, devuelve el objeto no definido.
const cache = new Map();const setValue = (key, obj) => { cache.set(key, new WeakRef(obj));};const getValue = (key) => { const ref = cache.get(key); if (ref) { return ref.deref(); }};// this will look for the value in the cache// and recalculate if it's missingconst fibonacciCached = (number) => { const cached = getValue(number); if (cached) return cached; const sum = calculateFibonacci(number); setValue(number, sum); return sum;};