Javascript ES2019

Índice

    Mostrar índice

Números de versão JavaScript

Versões JS antigas são nomeadas por números: ES5 (2009) e ES6 (2015).

A partir de 2016, as versões são nomeadas por ano: ECMAScript 2016, 2017, 2018, 2019, ...

Novos recursos no ES2019

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Ligação de captura opcional

  • Array.flat()

  • Array.flatMap()

  • Array.Sort() revisado

  • JSON.stringify() revisado

  • Símbolos separadores permitidos em literais de string

  • Função revisada.toString()

Aviso

Esses recursos são relativamente novos.

Navegadores mais antigos podem precisar de um código alternativo (Polyfill)

String JavaScript trimStart()

ES2019 adicionou o método String trimStart() ao JavaScript. <p>O método trimStart() funciona como trim(), mas remove espaços em branco apenas a partir do início do uma linha.

Exemplo

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

Experimente você mesmo →

<!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>

JavaScript String trimStart() é compatível com todos os navegadores modernos desde janeiro de 2020:

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

String JavaScript trimEnd()

ES2019 adicionou o método String trimEnd() ao JavaScript. <p>O método trimEnd() funciona como trim(), mas remove espaços em branco apenas do final de uma linha.

Exemplo

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

Experimente você mesmo →

<!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>

JavaScript String trimEnd() é compatível com todos os navegadores modernos desde janeiro 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 adicionou o método Object fromEntries() ao JavaScript. <p>O método fromEntries() cria um objeto a partir de pares chave/valor iteráveis.

Exemplo

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

const myObj = Object.fromEntries(fruits);

Experimente você mesmo →

<!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>

O objeto JavaScript fromEntries() é compatível com todos os navegadores modernos desde janeiro de 2020:

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

Ligação de captura opcional

No ES2019 você pode omitir o parâmetro catch se não precisar dele:.

Exemplo

Antes de 2019:

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

Depois de 2019:

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

A vinculação catch opcional é suportada em todos os navegadores modernos desde janeiro 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 adicionou o método Array flat() ao JavaScript.

O método flat() cria um novo array achatando um array aninhado.

Exemplo

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

Experimente você mesmo →

<!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() é compatível com todos os navegadores modernos desde janeiro 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 adicionou o método Array flatMap() ao JavaScript.

O método flatMap() primeiro mapeia todos os elementos de um array e então cria um novo array achatando o array.

Exemplo

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

Experimente você mesmo →

<!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>

Classificação de array estável()

ES2019 revisou o método Array sort().

Antes de 2019, a especificação permitia algoritmos de classificação instáveis, como QuickSort.

Após ES2019, os navegadores devem usar um algoritmo de classificação estável:

Ao classificar elementos por um valor, os elementos devem manter sua posição relativa a outros elementos com o mesmo valor.

Exemplo

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 }
];

Experimente você mesmo →

<!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>

No exemplo acima, ao ordenar por preço, não é permitido que o resultado saia com os nomes em outra posição relativa como assim:

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

JSON.stringify() revisado

ES2019 revisou o método JSON stringify().

Antes de 2019, o JSON não conseguia restringir caracteres codificados com \.

Exemplo

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

Experimente você mesmo →

<!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 do ES2019, usando JSON.stringify()JSON em pontos de código UTF-8 (U+D800 a U+DFFF) retornou caracteres Unicode quebrados como ���.

Após esta revisão, strings com pontos de código UTF-8 são convertidas com segurança com JSON.stringify(), e de volta ao original usando JSON.parse().

Símbolos Separadores

<p>Separadores de linha e símbolos de separação de parágrafo (\u2028 e \u2029) agora são permitidos em literais de string.

Antes de 2019, estes eram tratados como terminadores de linha e resultavam em exceções de erro:

Exemplo

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

Experimente você mesmo →

<!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>

Observação

Agora, JavaScript e JSON têm regras iguais.

Antes do ES2019:

text=JSON.parse('"\u2028"') seria analisado para ''.

text='"\u2028"' causaria erro de sintaxe.

Função revisada toString()

ES2019 revisou o método Function toString().

O método toString() retorna uma string representando o código fonte de uma função.

A partir de 2019, toString() deve retornar o código fonte da função incluindo comentários, espaços e detalhes de sintaxe.

Antes de 2019, diferentes navegadores retornavam diferentes variantes da função (como sem comentários e espaços). A partir de 2019 a função deverá ser retornada exatamente como está escrita.

Exemplo

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

Experimente você mesmo →

<!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>