Javascript ES2019

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 ES2019

  • Cadena.trimStart()

  • Cadena.trimEnd()

  • Objeto.deEntradas

  • Encuadernación opcional

  • matriz.plana()

  • matriz.planoMap()

  • Array.Sort() revisado

  • JSON.stringify() revisado

  • Símbolos separadores permitidos en literales de cadena

  • Función revisada.toString()

Advertencia

Estas características son relativamente nuevas.

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

Cadena de JavaScript trimStart()

ES2019 agregó el método String trimStart() a JavaScript. <p>El método trimStart() funciona como trim(), pero elimina los espacios en blanco sólo desde el inicio de una cuerda.

Ejemplo

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

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

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

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

La cadena JavaScript trimStart() es compatible con todos los navegadores modernos desde enero de 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

Cadena de JavaScript trimEnd()

ES2019 agregó el método String trimEnd() a JavaScript. <p>El método trimEnd() funciona como trim(), pero elimina los espacios en blanco sólo al final de una cuerda.

Ejemplo

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

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

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

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

La cadena JavaScript trimEnd() es compatible con todos los navegadores modernos desde enero de 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

Objeto JavaScript deEntries()

ES2019 agregó el método de objeto fromEntries() a JavaScript. <p>El método fromEntries() crea un objeto a partir de pares clave/valor iterables.

Ejemplo

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>

<p>The number of pears are:</p>
<p id="demo"></p>

<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>

</body>
</html>

El objeto JavaScript fromEntries() es compatible con todos los navegadores modernos desde enero de 2020:

Chrome 73 Edge 79 Firefox 63 Safari 12.1 Opera 60
Mar 2019 Jan 2020 Oct 2018 Mar 2019 Apr 2019

Enlace de captura opcional

Desde ES2019 puedes omitir el parámetro catch si no lo necesitas:.

Ejemplo

Antes de 2019:

try {
  // code
} catch (err) {
  // code
}

Después de 2019:

try {
  // code
} catch {
  // code
}

El enlace de captura opcional es compatible con todos los navegadores modernos desde enero de 2020:

Chrome 66 Edge 79 Firefox 58 Safari 11.1 Opera 53
Apr 2018 Jan 2020 Jan 2018 Mar 2018 May 2018

Matriz JavaScript plana()

ES2019 agregó el método Array flat() a JavaScript.

El método flat() crea una nueva matriz aplanando una matriz anidada.

Ejemplo

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

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

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

JavaScript Array flat() es compatible con todos los navegadores modernos desde enero de 2020:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Matriz JavaScript flatMap()

ES2019 agregó el método Array flatMap() a JavaScript.

El método flatMap() primero asigna todos los elementos de una matriz y luego crea una nueva matriz aplanando la matriz.

Ejemplo

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

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

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Ordenación de matriz estable()

ES2019 revisó el método Array sort().

Antes de 2019, la especificación permitía algoritmos de clasificación inestables como QuickSort.

Después de ES2019, los navegadores deben utilizar un algoritmo de clasificación estable:

Al ordenar elementos según un valor, los elementos deben mantener su posición relativa con respecto a otros elementos con el mismo valor.

Ejemplo

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

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

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

En el ejemplo anterior, al ordenar por precio, no se permite que el resultado salga con los nombres en otra posición relativa como como esto:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

JSON.stringify() revisado

ES2019 revisó el método JSON stringify().

Antes de 2019, JSON no podía codificar caracteres codificados con \.

Ejemplo

let text = JSON.stringify("\u26D4");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>

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

<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>

</body>
</html>

Antes de ES2019, se usaba JSON.stringify()JSON en puntos de código UTF-8 (U+D800 a U+DFFF) devolvió caracteres Unicode rotos como ���.

Después de esta revisión, las cadenas con puntos de código UTF-8 se convierten de forma segura con JSON.stringify(), y volver al original usando JSON.parse().

Símbolos separadores

<p>Ahora se permiten separadores de línea y símbolos de separador de párrafo (\u2028 y \u2029) en cadenas literales.

Antes de 2019, se trataban como terminadores de línea y generaban excepciones de error:

Ejemplo

// This is valid in ES2019:
let text = "\u2028";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>

<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>

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

<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Nota

Ahora, JavaScript y JSON tienen reglas iguales.

Antes de ES2019:

text=JSON.parse('"\u2028"') se analizaría como ''.

text='"\u2028"' daría error de sintaxis.

Función revisada toString()

ES2019 revisó el método Función toString().

El método toString() devuelve una cadena que representa el código fuente de una función.

A partir de 2019, toString() debe devolver el código fuente de la función, incluidos los comentarios, espacios y detalles de sintaxis.

Antes de 2019, diferentes navegadores devolvían diferentes variantes de la función (como sin comentarios ni espacios). A partir de 2019, la función debería devolverse exactamente como está escrita.

Ejemplo

function myFunction(p1, p2) {
    return p1 * p2;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>