Nuevas funciones de JavaScript ES10/ES2019

Echemos un vistazo a las nuevas características de ES10/ECMAScript 2019 que fueron aprobadas por TC39

· 3 min de lectura
Nuevas funciones de JavaScript ES10/ES2019

Cada año se publica una nueva versión de ECMAScript basada en las propuestas que han sido aceptadas por el comité TC39.

Object.fromEntries()

En versiones anteriores de ECMAScript, puede utilizar el metodo  Object.entries() devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto. Pero ahora puede simplemente revertir el proceso usando Object.fromEntries(). Esto devolverá un nuevo objeto instantáneamente con la clave y los valores. Lea la siguiente Documentación.

const persona = {
  nombre: 'GodoFredo',
  edad: '11',
  pais: 'Peru'
}

/* se crea una entrada */
const entry = Object.entries(persona);

/* esto revertirá la entrada */
const reverseEntry = Object.fromEntries(entry);

trimStart() y trimEnd()

String.prototype.trimStart() — Ya tenemos una característica trim() que nos ayuda a evitar los espacios en blanco en una cadena (string). Con los nuevos trimStart() y trimEnd(), puedes elegir qué parte de la cadena tienes que evitar.

const saludo = '       Hola Mundo     ';

console.log(saludo);
// "       Hola Mundo     "

console.log(saludo.trimStart());
// "Hola Mundo     "

console.log(saludo.trimEnd());
// "       Hola Mundo"

console.log(saludo.trim());
// "Hola Mundo"

JSON.stringify

Convierte un objeto o valor de JavaScript en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.

const cord = {
  x: 5,
  y: 6
}

const cordStringify = JSON.stringify(cord);

console.log(cordStringify);
// "{\"x\":5,\"y\":6}"

Se ha presentado una nueva propuesta Well-formed JSON.stringify para evitar que JSON.stringify devuelva cadenas mal formadas de Unicode. La solución propuesta es representar los puntos de código sustituto no apareados como secuencias de escape JSON en lugar de devolverlos como unidades de código UTF-16 únicas.

JSON.stringify('\uDF06\uD834'); // "\udf06\ud834"
JSON.stringify('\uDEAD'); // "\udead"

Array.prototype.flat()

Como su nombre indica, el método flat() devuelve un nuevo array que es una versión aplastada del array en el que fue llamado. Por defecto tiene el argumento 1 si no se especifica un valor, De lo contrario, si se pasa un número como primer argumento, se usa como la profundidad máxima para aplanar el array.

const animals = [['?', '?'], ['?', '?']];

const flatAnimals = animals.flat();
// es lo mismo: const flatAnimals = animals.flat(1);

console.log(flatAnimals);

// ['?', '?', '?', '?']

Y observe lo que sucede cuando la profundidad total del array es mayor que la profundidad máxima para el método flat:

const animals = [['?', '?'], ['?', '?', ['?',['?'], '?']]];

const flatAnimals = animals.flat(2);

console.log(flatAnimals);
// ['?', '?', '?', '?', '?',['?'], '?']

Al pasar Infinity como un parámetro dentro del flat() se ejecutará recursivamente infinitas veces y aplanará el array a un solo array.

const animals = [['?', '?'], ['?', '?', ['?',['?'], '?']]];

const flatAnimals = animals.flat(Infinity);

console.log(flatAnimals);
// ['?', '?', '?', '?', '?', '?', '?']
El método flat() crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

Array.prototype.flatMap()

Esto es algo similar Array.prototype.Map() pero ligeramente diferente. flatMap() asigna cada valor a un nuevo valor y entonces la matriz resultante se aplana hasta una profundidad máxima de 1.

const animals = ['?', '?', '?', '?'];
const noises = ['woof', 'meow', 'baa', 'mooo'];

const mappedOnly = animals.map((animal, index) => [animal, noises[index]]);
const mappedAndFlatten = animals.flatMap((animal, index) => [animal, noises[index]]);

console.log(mappedOnly);
// [['?', 'woof'], ['?', 'meow'], ['?', 'baa'], ['?', 'mooo']

console.log(mappedAndFlatten);
// ['?', 'woof', '?', 'meow', '?', 'baa', '?', 'mooo']

Try/Catch

La declaración try consiste en un bloque try que contiene una o más sentencias (se debe usar siempre {} incluso para una sola sentencia) y al menos una cláusula catch o una cláusula finally, o bien ambas. Esto nos da tres formas posibles para la declaración try:

  1. try...catch
  2. try...finally
  3. try...catch...finally

Se ha presentado una nueva propuesta Try/Catch Binding, con esta propuesta permite omitir el enlace y los paréntesis que lo rodean. Esto se ha modificado en la nueva propuesta y podemos usar el try/catch como se indica a continuación:

try {
   throw new Error('Soy un error');
} catch {
   console.log('Sé que eres un error');
}

Function.prototype.toString()

En versiones anteriores de ECMAScript, puede imprimir el código fuente de una función utilizando toString(), pero existe el inconveniente de que elimina todos los espacios en blanco y comentarios adicionales. En la nueva propuesta se ha mantenido.

function /* Adds numbers */  addNumbers (x) {
  let y = x + 5;
  return y;
}

console.log(addNumbers.toString())

// function /* Adds numbers */  addNumbers (x) {
//  let y = x + 5;
//  return y;
// }

Symbol.prototype.description

Cuando crea un símbolo, puede especificar una descripción para el símbolo con fines de depuración.

Al crear un símbolo a través de la función de fábrica Symbol(), puede proporcionar opcionalmente una cadena como descripción, a través de un parámetro:

const myDescription = Symbol('description');

Hasta hace poco, la única forma de acceder a la descripción era convirtiendo el símbolo en una cadena.

La propuesta introduce al captador Symbol.prototype.description para acceder directamente a la descripción:

const myDescription = 'description';
const symbol = Symbol(myDescription);

console.log(symbol.description == myDescription);
// true

— Source:


Artículo anterior

? Realiza dibujos en el gráfico de contribución de GitHub

Hackea tu gráfico de contribución de GitHub y agregue un poco de estilo Pixel Art ?? creando impresionantes dibujos

Artículo siguiente

Cómo simplificar tu código con map(), reduce() y filter() en JavaScript

He visto mucho código de sentencias entre 8 y 10 lineas para realizar un bucle, solo para resolver una tarea cualquiera en la que Array.

Artículos Relacionados

Como obtener al padre de un elemento con vanilla JS

Como obtener al padre de un elemento con vanilla JS

· 1 min de lectura
Cómo utilizar window.confirm()

Cómo utilizar window.confirm()

· 1 min de lectura
Como elegir una clave SSH para un host especifico

Como elegir una clave SSH para un host especifico

· 1 min de lectura
Como detectar un elemento sticky cuando se queda fijo

Como detectar un elemento sticky cuando se queda fijo

· 1 min de lectura
Convertir una cadena en un array en JavaScript

Convertir una cadena en un array en JavaScript

· 2 min de lectura
? No, el logotipo de Firefox no se va a cambiar

? No, el logotipo de Firefox no se va a cambiar

· 2 min de lectura