Javascript ES6

Índice

    Mostrar índice

ECMAScript 2015 foi a segunda grande revisão do JavaScript.

ECMAScript 2015 também é conhecido como ES6 e ECMAScript 6.

Este capítulo descreve os recursos mais importantes do ES6.

Novos recursos no ES6

  • A palavra-chave let

  • A palavra-chave const

  • Funções de seta

  • O operador

  • Para de

  • Objetos de mapa

  • Definir objetos

  • Aulas

  • Promessas

  • Símbolo

  • Parâmetros padrão

  • Parâmetro de descanso da função

  • String.inclui()

  • String.startsWith()

  • String.endsWith()

  • Array.from()

  • Chaves de matriz()

  • Array encontrar()

  • Matriz findIndex()

  • Novos métodos matemáticos

  • Novas propriedades numéricas

  • Novos métodos numéricos

  • Novos métodos globais

  • Entradas de objeto

  • Módulos JavaScript

Suporte de navegador para ES6 (2015)

Safari 10 e Edge 14 foram os primeiros navegadores a oferecer suporte total ao ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript permite

A palavra-chave let permite que você declare uma variável com escopo do bloco.

Exemplo

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

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

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Leia mais sobre let no capítulo: JavaScript Let.

Const JavaScript

A palavra-chave const permite declarar uma constante (um Variável JavaScript com um valor constante).

As constantes são semelhantes às variáveis let, exceto que o valor não pode ser alterado.

Exemplo

var x = 10;
// Here x is 10
{ 
  const x = 2;
    // Here x is 2
}
// Here x is 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

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

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Leia mais sobre const no capítulo: JavaScript Const.

Funções de seta

As funções de seta permitem uma sintaxe curta para escrever expressões de função.

Você não precisa da palavra-chave function, da palavra-chave return e da palavra-chave colchetes.

Exemplo

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

As funções de seta não possuem seu próprio isto. Eles não são adequados para definir métodos de objetos.

As funções de seta não são içadas. Eles devem ser definidos antes de serem usados.

Usando const é mais seguro do que usar var, porque uma expressão de função é sempre um valor constante.

Você só pode omitir a palavra-chave return e as chaves se a função for uma única instrução. Por isso, pode ser um bom hábito mantê-los sempre:

Exemplo

const x = (x, y) => { return x * y };

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

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

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Saiba mais sobre Arrow Functions no capítulo: Função de seta JavaScript.

O operador Spread (...)

O operador ... expande um iterável (como um array) em mais elementos:

Exemplo

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

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

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

O operador ... pode ser usado para expandir um iterável em mais argumentos para chamadas de função:

Exemplo

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

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

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

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

</body>
</html>

O loop For/Of

A instrução JavaScript for/of faz um loop através dos valores de objetos iteráveis.

for/of permite fazer loop em estruturas de dados que são iteráveis, como Arrays, Strings, Maps, NodeLists e muito mais.

O loop for/of tem a seguinte sintaxe:

for (variable of iterable) {
      // code block to be executed
}

variável - Para cada iteração o valor da próxima propriedade é atribuído à variável. Variável pode ser declarada com const, let ou var.

iterável - Um objeto que possui propriedades iteráveis.

Fazendo loop em um array

Exemplo

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

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

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

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

</body>
</html>

Loop sobre uma string

Exemplo

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

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

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

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

</body>
</html>

Saiba mais no capítulo: JavaScript Loop For/In/Of.

Mapas JavaScript

Ser capaz de usar um Objeto como chave é um recurso importante do Mapa.

Exemplo

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

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

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Saiba mais sobre objetos Map e a diferença entre um Map e um Array no capítulo: Mapas JavaScript.

Conjuntos JavaScript

Exemplo

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

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

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Saiba mais sobre objetos Set no capítulo: Conjuntos JavaScript.

Aulas JavaScript

Classes JavaScript são modelos para objetos JavaScript.

Use a palavra-chave class para criar uma classe.

Sempre adicione um método chamado constructor():

Sintaxe

class ClassName {
   constructor() { ... }
}

Exemplo

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

O exemplo acima cria uma classe chamada “Car”.

A classe possui duas propriedades iniciais: “nome” e “ano”.

Uma classe JavaScript não é um objeto.

É um modelo para objetos JavaScript.

Usando uma classe

Quando você tem uma classe, você pode usá-la para criar objetos:

Exemplo

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

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

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Saiba mais sobre classes no capítulo: Classes JavaScript.

Promessas de JavaScript

Uma promessa é um objeto JavaScript que vincula "Código de produção" e "Código de consumo".

“Produzir Código” pode levar algum tempo e “Consumir Código” deve aguardar o resultado.

Sintaxe da promessa

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Exemplo usando uma promessa

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

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

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

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Saiba mais sobre Promessas no capítulo: Promessas JavaScript.

O tipo de símbolo

Um símbolo JavaScript é um tipo de dados primitivo como Number, String ou Boolean.

Representa um identificador "oculto" exclusivo que nenhum outro código pode acessar acidentalmente.

Por exemplo, se diferentes codificadores quiserem adicionar uma propriedade person.id a um objeto person pertencente a um código de terceiros, eles poderiam misturar os valores uns dos outros.

Usar Symbol() para criar identificadores exclusivos resolve este problema:

Exemplo

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

let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

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

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

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

Observação

Os símbolos são sempre únicos.

Se você criar dois símbolos com a mesma descrição eles terão valores diferentes:

Symbol("id") == Symbol("id"); // false

Valores de parâmetro padrão

ES6 permite que os parâmetros de função tenham valores padrão.

Exemplo

function myFunction(x, y = 10) {	  // y is 10 if not passed or undefined	  return x + y;
}
myFunction(5); // will return 15

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

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

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

Parâmetro de descanso da função

O parâmetro rest (...) permite que uma função trate um número indefinido de argumentos como um array:

Exemplo

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

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

<script>
function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

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

</body>
</html>

String.inclui()

O método includes() retorna true se uma string contém um valor especificado, caso contrário falso:

Exemplo

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

O método startsWith() retorna true se uma string começar com um valor especificado, caso contrário false:

Exemplo

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

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

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

O método endsWith() retorna true se uma string terminar com um valor especificado, caso contrário false:

Exemplo

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

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

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Array.from()

O método Array.from() retorna um objeto Array de qualquer objeto com comprimento propriedade ou qualquer objeto iterável.

Exemplo

Crie um array a partir de uma string:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Experimente você mesmo →

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

<p>Return an array object from any object with a length property or any iterable object.</p>

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

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

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Chaves de matriz()

O método keys() retorna um objeto Array Iterator com as chaves de um array.

Exemplo

Crie um objeto Array Iterator, contendo as chaves do array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

Experimente você mesmo →

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

<p>Return an Array Iterator object with the keys of the array:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

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

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Array encontrar()

O método find() retorna o valor do primeiro elemento do array que passa um função de teste.

Este exemplo encontra (retorna o valor de ) o primeiro elemento que é maior mais de 18:

Exemplo

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Experimente você mesmo →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Observe que a função leva 3 argumentos:

  • O valor do item

  • O índice do item

  • A própria matriz

Matriz findIndex()

O método findIndex() retorna o índice do primeiro elemento do array que passa em uma função de teste.

Este exemplo encontra o índice do primeiro elemento maior que 18:

Exemplo

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Experimente você mesmo →

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

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

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Observe que a função leva 3 argumentos:

  • O valor do item

  • O índice do item

  • A própria matriz

Novos métodos matemáticos

ES6 adicionou os seguintes métodos ao objeto Math:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()

O método Math.trunc()

Math.trunc(x) retorna a parte inteira de x:

Exemplo

Math.trunc(4.9);    // returns 4
Math.trunc(4.7);    // returns 4
Math.trunc(4.4);    // returns 4
Math.trunc(4.2);    // returns 4
Math.trunc(-4.2);    // returns -4

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

O método Math.sign()

Math.sign(x) retorna se x for negativo, nulo ou positivo:

Exemplo

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

O método Math.cbrt()

Math.cbrt(x) retorna a raiz cúbica de x:

Exemplo

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

O método Math.log2()

Math.log2(x) retorna o logaritmo de base 2 de x:

Exemplo

Math.log2(2);    // returns 1

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

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

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

O método Math.log10()

Math.log10(x) retorna o logaritmo de base 10 de x:

Exemplo

Math.log10(10);    // returns 1

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

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

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

Novas propriedades numéricas

ES6 adicionou as seguintes propriedades ao objeto Number:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

Exemplo ÉPSILON

let x = Number.EPSILON;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

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

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

</body>
</html>

Exemplo MIN_SAFE_INTEGER

let x = Number.MIN_SAFE_INTEGER;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

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

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

</body>
</html>

Exemplo MAX_SAFE_INTEGER

let x = Number.MAX_SAFE_INTEGER;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

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

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

</body>
</html>

Novos métodos numéricos

ES6 adicionou 2 novos métodos ao objeto Number:

  • Number.isInteger()

  • Number.isSafeInteger()

O método Number.isInteger()

O método Number.isInteger() retorna true se o argumento for um número inteiro.

Exemplo

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

O método Number.isSafeInteger()

Um número inteiro seguro é um número inteiro que pode ser representado exatamente como um número de precisão dupla.

O método Number.isSafeInteger() retorna true se o argumento for um número inteiro seguro.

Exemplo

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Inteiros seguros são todos números inteiros de -(253 - 1) a +(253 - 1).
Isto é seguro: 9007199254740991. Isto não é seguro: 9007199254740992.

Novos métodos globais

ES6 adicionou 2 novos métodos de números globais:

  • isFinite()

  • isNaN()

O método isFinite()

O método global isFinite() retorna false se o argumento for Infinito ou NaN.

Caso contrário, retorna true:

Exemplo

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

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

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

O método isNaN()

O método global isNaN() retorna true se o argumento for NaN. Caso contrário, retorna false:

Exemplo

isNaN("Hello");       // returns true

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

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

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Entradas de objeto()

Exemplo

Crie um Array Iterator e, em seguida, itere sobre os pares chave/valor:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

O método entries() retorna um objeto Array Iterator com pares chave/valor:

[0, "Banana"]
[1, "Laranja"]
[2, "Maçã"]
[3, "Manga"]

O método entries() não altera o array original.

Módulos

Os módulos são importados de duas maneiras diferentes:

Importar de exportações nomeadas

Importe exportações nomeadas do arquivo person.js:

import { name, age } from "./person.js";

Experimente você mesmo →

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

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

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

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

</body>
</html>

Importar de exportações padrão

Importe uma exportação padrão do arquivo message.js:

import message from "./message.js";

Experimente você mesmo →

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

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

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Saiba mais sobre Módulos em: Módulos JavaScript.