neste tutorial você vai aprender sobre as novas funcionalidades na última versão do JavaScript.
What is ECMAScript 6 (or ES6)
ECMAScript 2015 (or ES6) é a sexta e maior edição do ECMAScript language specification standard. Ele define o padrão para a implementação JavaScript.
ES6 trouxe mudanças significativas na linguagem JavaScript., Ele introduz várias novas características, tais como, variáveis em bloco, novo loop para iterar sobre arrays e objetos, literais de modelos, e muitas outras melhorias para tornar a programação JavaScript mais fácil e mais divertida. Neste capítulo, vamos discutir alguns dos melhores recursos ES6 que você pode usar em seu código JavaScript diário.
a palavra-chave let
ES6 introduz a nova let palavra-chave para declarar variáveis. Antes de ES6, a única maneira de declarar uma variável em JavaScript era a palavra-chave var., Vamos ver qual é a diferença entre eles.
Existem duas diferenças críticas entre ovar elet. Variáveis declaradas com a palavra-chavevar são escopo e listadas no topo dentro de seu escopo, enquanto variáveis declaradas comlet palavra-chave são escopo em bloco ({}) e não são listadas.
escopo em bloco significa simplesmente que um novo escopo é criado entre um par de parênteses curados, ou seja, {}., Portanto, se você declarar uma variável com o let palavra-chave dentro de um loop, ele não existe fora do loop, como demonstrado no exemplo a seguir:
Como você pode ver no exemplo acima, a variável i no primeiro bloco não é acessível fora da for loop. Isso também nos permite reutilizar o mesmo nome de variável várias vezes como seu escopo é limitado ao bloco ({}), o que resulta em menos declaração variável e código mais limpo.,
a palavra-chave const
a nova palavra-chave const permite definir constantes. Constantes são apenas de leitura, você não pode transferir novos valores para eles. Eles também são escopados em bloco como let.
Exemplo
Tente este código ”
const PI = 3.14;console.log(PI); // 3.14PI = 10; // errorno Entanto, você ainda pode alterar as propriedades do objeto ou elementos de matriz:
A para…of Loop
The new for...of loop allows us to iterate over arrays or other iterable objects very easily., Além disso, o código dentro do loop é executado para cada elemento do objeto iterável. Aqui está um exemplo:
O for...of loop não funciona com objetos porque eles não são iteráveis. Se quiser iterar as propriedades de um objecto, poderá usar o for-in loop.
os literais de modelos
os literais de modelos fornecem uma forma fácil e limpa criar cadeias de caracteres multi-linhas e executar interpolação de cadeias de caracteres. Agora podemos incorporar variáveis ou expressões em uma string em qualquer lugar sem qualquer problema.,
modelos os literais são criados usando a tecla back (` `) (acento grave) em vez das aspas duplas ou simples habituais. Variáveis ou expressões podem ser colocadas dentro da cadeia usando a sintaxe ${...}. Compare os exemplos a seguir e veja o quanto útil é:
Enquanto no ES5, para atingir o mesmo que tinha que escrever algo como:
Valores Padrão para Parâmetros de Função
Agora, em ES6 você pode especificar valores padrão para os parâmetros da função., Isto significa que se nenhum argumento é fornecido para funcionar quando é chamado estes valores de parâmetros padrão serão usados. Este é um dos recursos mais aguardados em JavaScript. Aqui está um exemplo:
Enquanto no ES5, para atingir o mesmo que tinha que escrever algo como:
Seta Funções
Seta Funções são outra característica interessante em ES6. Ele fornece uma sintaxe mais concisa para a escrita de expressões de funções, optando por fora do id
e return palavras-chave.,
funções de seta são definidas usando uma nova sintaxe, a seta fat (=>) Notação. Vamos ver como ele parece:
Como você pode ver thre é no functione return palavra-chave na declaração da função da seta.
pode também ignorar os parêntesis, ou seja no caso de haver exactamente um parâmetro, mas terá sempre de O usar quando tiver zero ou mais do que um parâmetro.,
adicionalmente, se houver mais de uma expressão no corpo da função, você precisa embrulhá-la em Chavetas ({}). Neste caso, você também precisa usar a declaração return para retornar um valor.
Existem várias variações de como você pode escrever funções de seta. Aqui estão as mais usadas:
Há uma diferença importante entre Funções Regulares e funções de seta., Ao contrário de uma função normal, uma função de seta não tem sua própria this, ela leva this da função externa onde ela é definida. Em JavaScript, this é o atual contexto de execução de uma função.,
Para entender isso claramente, vamos confira os exemplos a seguir:
Reescrever o mesmo exemplo utilizando o ES6 modelo literais e seta para a função de:
Como você pode ver claramente, o this palavra-chave no exemplo acima refere-se ao contexto da função colocando a seta para a função, que é a Pessoa de objeto (linha, não-9), ao contrário do exemplo anterior, onde ele se refere ao objeto global Window (linha de não-9).
Classes
no ECMAScript 5 e anteriormente, as classes nunca existiram no JavaScript., Classes são introduzidas no ES6 que se assemelha a classes em outras linguagens orientadas a objetos, tais como Java, PHP, etc. no entanto, não funcionam exactamente da mesma forma. Classes ES6 tornam mais fácil criar objetos, implementar herança usando a palavra-chave extends, e reutilizar o código.
no ES6 você pode declarar uma classe usando o novo class palavra-chave seguida de um nome de classe. Por convenção os nomes das classes são escritos em TitleCase (isto é, capitalizando a primeira letra de cada palavra).,
no exemplo acima, a classe quadrada herda do retângulo usando a palavra-chave extends. As Classes que herdam de outras classes são referidas como classes derivadas ou classes infantis.
também, você deve chamar super()no construtor de classe infantil antes de acessar o contexto (this)., Por exemplo, se você omitir o super() e chame o getArea() método na praça do objeto que irá resultar em um erro, já que getArea() método precisam de acesso para this palavra-chave.
Nota: Ao contrário das declarações de função, as declarações de classes não são içadas. As declarações de classe residem na zona morta temporal (TDZ) até que a execução atinja o ponto da declaração de classe, semelhante a let e const declarações., Portanto, você precisa declarar sua classe antes de acessá-la, caso contrário, um ReferenceError ocorrerá.
Módulos
antes da ES6, não havia suporte nativo para módulos em JavaScript. Tudo dentro de uma aplicação JavaScript, por exemplo, variáveis em diferentes arquivos JavaScript, compartilhavam o mesmo escopo.
ES6 introduz o módulo baseado em arquivos, no qual cada módulo é representado por um separado .js file., Agora, você pode usar a declaração
ou import num módulo para exportar ou importar variáveis, funções, classes ou qualquer outra entidade para/de outros módulos ou arquivos.
vamos criar um módulo ou seja, um arquivo JavaScript ” main.js “e coloque o seguinte código nele:
Agora crie outro arquivo JavaScript” app.js “com o seguinte código:
finalmente criar um arquivo HTML” teste.html ” e com o seguinte código e abrir este ficheiro HTML no seu navegador usando o protocolo HTTP (ou usar localhost). Also notice the type="module" on script tag.,
os restantes parâmetros
ES6 introduz parâmetros de repouso que nos permitem passar um número arbitrário de parâmetros a uma função na forma de uma matriz. Isto é particularmente útil em situações em que você quer passar parâmetros para uma função, mas você não tem idéia de quantos você vai precisar.
a rest parameter is specified by prefixing a named parameter with rest operator (...) i.e. three dots. O parâmetro Rest pode ser apenas o último na lista de parâmetros, e só pode haver um parâmetro rest., Dê uma olhada no exemplo a seguir, para ver como ele funciona:
Quando o resto do parâmetro é o único parâmetro em uma função, ele recebe todos os argumentos passados para a função, caso contrário, fica o resto dos argumentos que excede o número de parâmetros nomeados.
Nota: Não confunda os parâmetros de repouso do termo com o resto (transferência de Estado representacional). Isto não tem nada a ver com serviços Web RESTful.,
o operador de Spread
o operador de spread, que também é denotado por (...), desempenha a função oposta exacta do operador de resto. A propagação do operador se espalha (por exemplo, divide) uma matriz e passa os valores para a função especificada, como mostrado no exemplo a seguir:
A propagação do operador também pode ser usado para inserir os elementos de um array para outro array sem utilizar a matriz de métodos como o push() unshift() concat(), etc.,
atribuição de destruição
a atribuição de destruição é uma expressão que torna fácil extrair valores de arrays, ou propriedades de objetos, em variáveis distintas, fornecendo uma sintaxe mais Curta.
Existem dois tipos de expressões de atribuição de destruição—o array e a atribuição de destruição de objetos.,fazer a mesma coisa em apenas uma linha, usando a matriz de desestruturação atribuição:
Você também pode usar o resto do operador na matriz desestruturação de atribuição, conforme mostrado a seguir:
O objeto desestruturação de atribuição
Em ES5 para extrair os valores de propriedade de um objeto, precisamos escrever algo como:
Mas em ES6, você pode extrair valores da propriedade do objeto e atribui-los a variáveis facilmente como este:
a Maioria dos recursos que discutimos acima são suportados na versão mais recente do os principais navegadores como o Google Chrome, Mozilla Firefox, Microsoft Borda, Safari, etc.,