JavaScript ECMAScript 2017

Índice

Mostrar índice

Números de versão JavaScript

As versões antigas do JS 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 ECMAScript 2017

Este capítulo apresenta os novos recursos do ECMAScript 2017:

Preenchimento de string JavaScript
Entradas de objetos JavaScript()
Valores do objeto JavaScript()
JavaScript assíncrono e aguardar
JavaScript Object.getOwnPropertyDescriptors

Preenchimento de string JavaScript

ECMAScript 2017 adicionou dois métodos de string ao JavaScript: padStart() e padEnd() para suportar preenchimento no início e no final de uma string.

Exemplos

let text = "5";
text = text.padStart(4,0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padStart(4,"0");

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

</body>
</html>

let text = "5";
text = text.padEnd(4,0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padEnd(4,"0");

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

</body>
</html>

O preenchimento de strings JavaScript é compatível com todos os navegadores modernos desde abril de 2017:


Chrome 57	Edge 15	Firefox 48	Safari 10	Opera 44
Mar 2017	Apr 2017	Aug 2016	Sep 2016	Mar 2017

Entradas de objetos JavaScript

ECMAScript 2017 adicionou o método Object.entries() aos objetos.

Object.entries() retorna uma matriz dos pares chave/valor em um objeto:

Exemplo

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.entries(person);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.entries() method returns an array of the key/value pairs in an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.entries(person);
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.entries() simplifica o uso de objetos em loops:

Exemplo

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to use objects in loops:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

let text = "";
for (let [fruit, amount] of Object.entries(fruits)) {
  text += fruit + ": " + amount + "<br>";
}

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

</body>
</html>

Object.entries() também simplifica a conversão de objetos em mapas:

Exemplo

const fruits = {Bananas:300, Oranges:200, Apples:500};

const myMap = new Map(Object.entries(fruits));

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to convert Object to Map:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

const myMap = new Map(Object.entries(fruits));

document.getElementById("demo").innerHTML = myMap;
</script>

</body>
</html>

Object.entries() é compatível com todos os navegadores modernos desde março de 2017:


Chrome 47	Edge 14	Firefox 47	Safari 10.1	Opera 41
Jun 2016	Aug 2016	Jun 2016	Mar 2017	Oct 2016

Valores de objetos JavaScript

Object.values() são semelhantes a Object.entries(), mas retorna uma matriz de dimensão única dos valores do objeto:

Exemplo

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.values(person);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.values() method returns an array of values from an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.values(person)
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.values() é compatível com todos os navegadores modernos desde março de 2017:


Chrome 54	Edge 14	Firefox 47	Safari 10.1	Opera 41
Oct 2016	Aug 2016	Jun 2016	Mar 2017	Oct 2016

Funções assíncronas JavaScript

Esperando por um tempo limite

async function myDisplay() {
  let myPromise = new Promise(function(myResolve,  myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Firefox e Chrome foram os primeiros navegadores com suporte para funções JavaScript assíncronas:


Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
Dec 2016	Apr 2017	Mar 2017	Sep 2017	Dec 2016