Neste tutorial, você aprenderá sobre JavaScript ES6 com a ajuda de exemplos.
JavaScript ES6 (também conhecido como ECMAScript 2015 ou ECMAScript 6 ) é a versão mais recente do JavaScript que foi introduzida em 2015.
ECMAScript é o padrão usado pela linguagem de programação JavaScript. ECMAScript fornece a especificação de como a linguagem de programação JavaScript deve funcionar.
Este tutorial fornece um breve resumo dos recursos comumente usados do ES6 para que você possa iniciar rapidamente no ES6.
JavaScript let
JavaScript leté usado para declarar variáveis. Anteriormente, as variáveis eram declaradas usando a varpalavra - chave.
Para saber mais sobre a diferença entre lete var, visite JavaScript let vs var.
As variáveis declaradas usando lettêm escopo de bloco . Isso significa que eles só podem ser acessados em um determinado bloco. Por exemplo,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript const
A constinstrução é usada para declarar constantes em JavaScript. Por exemplo,
// name declared with const cannot be changed const name = 'Sara';
Depois de declarado, você não pode alterar o valor de uma constvariável.
Função de seta JavaScript
Na versão ES6 , você pode usar as funções de seta para criar expressões de função. Por exemplo,
esta função
// function expression let x = function(x, y) ( return x * y; )
pode ser escrito como
// function expression using arrow function let x = (x, y) => x * y;
Para saber mais sobre as funções de seta, visite JavaScript Arrow Function.
Classes de JavaScript
A classe JavaScript é usada para criar um objeto. Classe é semelhante a uma função construtora. Por exemplo,
class Person ( constructor(name) ( this.name = name; ) )
A palavra class- chave é usada para criar uma classe. As propriedades são atribuídas em uma função de construtor.
Agora você pode criar um objeto. Por exemplo,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Para saber mais sobre as classes, visite JavaScript Classes.
Valores de parâmetro padrão
Na versão ES6, você pode passar valores padrão nos parâmetros de função. Por exemplo,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
No exemplo acima, se você não passar o parâmetro para y, o valor padrão será 5 .
Para saber mais sobre os parâmetros padrão, visite Parâmetros padrão da função JavaScript.
Literais de modelo de JavaScript
O literal de modelo tornou mais fácil incluir variáveis dentro de uma string. Por exemplo, antes você tinha que fazer:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Isso pode ser alcançado usando o modelo literal por:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Para saber mais sobre literais de modelo, visite JavaScript Template Literal.
Desestruturação de JavaScript
A sintaxe de desestruturação torna mais fácil atribuir valores a uma nova variável. Por exemplo,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Usando a sintaxe ES6 Destructuring, o código acima pode ser escrito como:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Para saber mais sobre desestruturação, visite Destructuring JavaScript.
Importação e exportação de JavaScript
Você pode exportar uma função ou um programa e usá-lo em outro programa, importando-o. Isso ajuda a tornar os componentes reutilizáveis. Por exemplo, se você tiver dois arquivos JavaScript chamados contact.js e home.js.
No arquivo contact.js, você pode exportar a contact()função:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Então, quando você quiser usar a contact()função em outro arquivo, pode simplesmente importar a função. Por exemplo, no arquivo home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
JavaScript Promises
As promessas são usadas para lidar com tarefas assíncronas. Por exemplo,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Para saber mais sobre promessas, visite JavaScript Promises.
Parâmetro de descanso de JavaScript e operador de propagação
Você pode usar o parâmetro rest para representar um número indefinido de argumentos como uma matriz. Por exemplo,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Você passa os argumentos restantes usando a … sintaxe. Conseqüentemente, o parâmetro de resto do nome .
Você usa a sintaxe de propagação … para copiar os itens em uma única matriz. Por exemplo,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Tanto o parâmetro rest quanto o operador spread usam a mesma sintaxe. No entanto, o operador de propagação é usado com matrizes (valores iteráveis).
Para saber mais sobre o operador de spread, visite JavaScript Spread Operator.
