JavaScript ECMAScript 2020


Tabla de contenido

    Mostrar tabla de contenidos

Números de versión de JavaScript

Las versiones antiguas de JS se nombran con números: ES5 (2009) y ES6 (2015).

A partir de 2016, las versiones se nombran por año: ECMAScript 2016, 2017, 2018, 2019,...

Nuevas funciones en ES2020

  • Empezando

  • Coincidencia de cadenasTodos()

  • El operador coalescente nulo (??)

  • El operador de encadenamiento opcional (?.)

  • Operador lógico de asignación AND (&&=)

  • Asignación lógica OR (||=)

  • Asignación coalescente nula (??=)

  • Promise allSettled():
    style="word-wrap: break-word;">Promise.allSettled([prom1,prom2,prom3]).luego {}

  • Importación dinámica

Advertencia

Estas características son relativamente nuevas.

Los navegadores más antiguos pueden necesitar un código alternativo (Polyfill)

JavaScript grandeint

Las variables JavaScript BigInt se utilizan para almacenar valores enteros grandes que son demasiado grandes para ser representados por un Número de JavaScript normal.

Los números enteros de JavaScript solo tienen una precisión de hasta 15 dígitos.

Ejemplo de número entero

let x = 999999999999999;
let y = 9999999999999999; // too big

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Ejemplo de BigInt

let x = 9999999999999999;
let y = 9999999999999999n;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

<p id="demo"></p>

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


Para crear un BigInt, agregue n al final de un número entero o llame BigInt():

Ejemplo

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

<p id="demo"></p>

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


El tipode de JavaScript de un BigInt es "bigint":

Ejemplo

let x = BigInt(999999999999999);
let type = typeof x;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>


BigInt es compatible con todos los navegadores modernos desde septiembre de 2020:

Chrome 67 Edge 79 Firefox 68 Safari 14 Opera 54
May 2018 Jan 2020 Jul 2019 Sep 2020 Jun 2018

Coincidencia de cadenas de JavaScriptTodo()

Antes de ES2020 no existía ningún método de cadena que pudiera usarse para buscar todas las ocurrencias de una cuerda en una cuerda.

Ejemplo

const iterator = text.matchAll("Cats");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Si el parámetro es una expresión regular, el indicador global (g) debe establecerse; de lo contrario, Se lanza un TypeError.

Ejemplo

const iterator = text.matchAll(/Cats/g);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Si desea buscar sin distinguir entre mayúsculas y minúsculas, se debe configurar el indicador de insensibilidad (i):

Ejemplo

const iterator = text.matchAll(/Cats/gi);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Nota

ES2021 introdujo el método de cadena replaceAll().



El operador coalescente nulo (??)

El operador ?? devuelve el primer argumento si no es nulo (nulo o indefinido).

En caso contrario devuelve el segundo.

Ejemplo

let name = null;
let text = "missing";
let result = name ?? text;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

<p id="demo"></p>

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>


El operador nulo es compatible con todos los navegadores modernos desde marzo de 2020:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020

El operador de encadenamiento opcional (?.)

El Operador de encadenamiento opcional devuelve undefinido si un objeto es undefinido o null (en lugar de generar un error).

Ejemplo

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

El operador ?.= es compatible con todos los navegadores modernos desde marzo de 2020:

Chrome 80 Edge 80 Firefox 74 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Mar 2020 Mar 2020 Mar 2020

El operador &&=

El Operador de asignación lógico AND se utiliza entre dos valores.

Si el primer valor es true, se asigna el segundo valor.

Ejemplo de asignación lógica Y

let x = 10;
x &&= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador &&= es compatible con todos los navegadores modernos desde septiembre de 2020:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

El operador ||=

El Operador de asignación lógico OR se utiliza entre dos valores.

Si el primer valor es falso, se asigna el segundo valor.

Ejemplo de asignación lógica OR

let x = 10;
x ||= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

El operador ||= es compatible con todos los navegadores modernos desde septiembre de 2020:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

El operador ??=

El Operador de asignación coalescente nula se utiliza entre dos valores.

Si el primer valor es undefinido o null, se asigna el segundo valor.

Ejemplo de asignación de fusión nula

let x;
x ??= 5;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

El operador ??= es compatible con todos los navegadores modernos desde septiembre de 2020:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020