JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. Permite-lhe escrever menos código e fazer mais. O ES6 apresenta-nos muitas características, como funções de seta, strings de template, destruição de classe, módulos… e muito mais. Vamos dar uma vista de olhos.

const and let

const is a new keyword in ES6 for declaring variables. const é mais poderoso do que var. Uma vez usada, a variável não pode ser transferida., Em outras palavras, é uma variável imutável exceto quando usada com objetos.

isto é realmente útil para direccionar os selectores. Por exemplo, quando temos um único botão que dispara um evento, ou quando você quer selecionar um elemento HTML em JavaScript, use const em vez de var. Isto porque var é ‘hoisted’. É sempre preferível usar const quando não se deseja transferir a variável .,

No código acima, const não vai mudar e não podem ser reatribuídas. Se você tentar dar-lhe um novo valor, ele irá devolver – lhe um erro.

let pode ser reatribuída e assumir o novo valor. Cria uma variável mutável.

let é o mesmo queconst in that both are blocked-scope. Significa que a variável só está disponível no seu âmbito.,

funções de seta

a função de seta é realmente impressionante, e faz com que o seu código seja mais legível, mais estruturado, e se pareça com o código moderno. Em vez de usar esse:

Use este:

Como você pode ver, a seta função parece mais legível e limpo! Você não precisará mais usar a sintaxe antiga.

também pode usar a função Arrow com map, filter, e reduce funções incorporadas.,

a função do mapa com setas parece mais clara e legível do que map em ES5. Com ES6 você pode escrever código mais curto e mais inteligente. Você pode usar o mesmo com filter e reduce.

os literais de modelos

os literais de modelos ou os strings de modelos são bastante fixes. Não temos que usar o operador plus (+) para concatenar strings, ou quando queremos usar uma variável dentro de uma string.,

A antiga sintaxe:

Com o novo ES6 sintaxe:

Tão simples! É realmente uma grande diferença entre a sintaxe antiga e ES6. Ao jogar com strings, a string literal em ES6 parece mais organizada e bem estruturada do que ES5.

parâmetros predefinidos

quando trabalho em PHP, normalmente uso parâmetros predefinidos. Estes permitem-lhe definir um parâmetro com antecedência.,

assim, quando você se esquecer de escrever o parâmetro, ele não irá retornar um erro indefinido porque o parâmetro já está definido no padrão. Então, quando você executar sua função com um parâmetro perdido, ele vai tomar o valor do parâmetro padrão t, e não vai retornar um erro!

observe o exemplo a seguir:

A função acima retorna indefinido, porque esquecemos de dar o segundo parâmetro age.,

mas se usarmos o parâmetro padrão, ele não retornará indefinido, e usará seu valor quando nos esquecermos de atribuir um parâmetro!

como pode ver, a função devolve um valor, apesar de não termos atingido o segundo parâmetro. Agora com o parâmetro padrão podemos lidar com o erro antecipadamente.

Array and object Destruction

Destruction makes the assignment of the values of an array or object to the new variable easy.,

A antiga sintaxe:

Com ES6 sintaxe:

Com ES5, temos a atribuir a cada valor para cada variável. Com o ES6, nós apenas colocamos nossos valores dentro de parênteses curly para obter qualquer propriedade do objeto.

nota: se atribuir uma variável que não seja idêntica ao nome da propriedade, ela irá retornar indefinida. Por exemplo, se o nome da propriedade for name e atribuirmos a uma variável username, ela retornará indefinida.,

temos sempre de nomear a variável da mesma forma que o nome da propriedade. Mas caso queiramos mudar o nome da variável, podemos usar o colon : em vez disso.

Para a matriz, usamos a mesma sintaxe que o objeto. Só temos de substituir os parêntesis rectos por parêntesis rectos.

Importar e exportar

Usando a tag import e export no seu aplicativo JavaScript torna-lo mais poderoso., Eles permitem que você crie componentes separados e reutilizáveis.

Se você estiver familiarizado com JavaScript framework MVC, você vai ver que eles usam import e export para manipular os componentes a maior parte do tempo. Então, como é que eles realmente funcionam?é simples! export permite exportar um módulo para ser usado noutro componente JavaScript. Nós usamos import para importar esse módulo para usá-lo em nosso componente.

Por exemplo, temos dois arquivos., O primeiro é nomeado detailComponent.js e o segundo é nomeado homeComponent.js.

In detailComponent.jswe are going to export thedetail function.

E se queremos utilizar esta função homeComponent.js vamos usar import.

Se quisermos importar mais de um módulo, basta colocá-los dentro de parênteses.,

So cool, isn’t it?!

promessas

promessas são uma nova característica do ES6. É um método para escrever código assíncrono. Ele pode ser usado quando, por exemplo, queremos obter dados de uma API, ou quando temos uma função que leva tempo para ser executada. Promessas tornam mais fácil resolver o problema, então vamos criar a nossa primeira promessa!

se registar a sua consola, irá devolver uma promessa. Então, se quisermos executar uma função após a obtenção de dados, usaremos uma promessa., A promessa leva dois parâmetros: resolve e reject para lidar com um erro esperado.Nota: A função fetch devolve uma promessa!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Agora, se você registrar o seu console ele vai retornar uma matriz de dados.

parâmetro de repouso e Operador de espalhamento

os restantes parâmetros são usados para obter o argumento de um array, e retornar um novo array.,

Podemos usar o parâmetro Spread para obter os valores de um Array, em vez de usar um for loop ou qualquer outro método.

Classes

Classes são o núcleo da programação orientada a objetos (OOP). Eles tornam o seu código mais seguro e encapsulado. Usar aulas dá ao seu código uma boa estrutura e mantém-no orientado.,

Para criar uma classe, use o class palavras-chave seguido do nome da classe com duas chaves.

Agora podemos acessar o class métodos e propriedades usando o new palavra-chave.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

para herdar de outra classe, use oextends palavra-chave seguida pelo nome da classe da qual você quer herdar.,

pode aprender mais sobre as Classes aqui.

ES6 tem outras características incríveis – você pode explorá-las aqui.

conclusão

espero que vocês tenham achado este artigo útil, e espero ter sido capaz de apresentar algumas das características do ES6. Em caso afirmativo, subscreva esta lista de E-mail para saber mais sobre tópicos Front-end. Obrigado pelo seu tempo.

by the way, i’ve recently worked with a strong group of software engineers for one of my mobile applications., A organização foi ótima, e o produto foi entregue muito rapidamente, muito mais rápido do que outras empresas e freelancers que eu trabalhei com, e eu acho que eu posso honestamente recomendá-los para outros projetos lá fora. Manda – me um e — mail se quiseres entrar em contacto … [email protected].