ECMAScript 6 - 10 Novos Recursos Incríveis
Você sabia que o JavaScript (junto com JScript e ActionScript) é uma implementação de uma especificação de linguagem de script do lado do cliente para fins gerais chamada ECMAScript? Para tornar esta definição desagradável um pouco mais atraente, podemos dizer que ECMAScript (ou oficialmente ECMA-262) é o padrão que define como usamos JavaScript e o que podemos realizar com isso.
A mais recente, 6ª edição da linguagem, ECMAScript 2015 (ou ES6) é provavelmente a atualização mais significativa desde a primeira versão em 1997. O objetivo principal da última versão foi fornecer um melhor suporte para a criação de aplicativos e bibliotecas maiores. Isso significa uma sintaxe mais madura, novos atalhos para facilitar a codificação e também novos métodos, palavras-chave, tipos de dados e muitos outros aprimoramentos..
A documentação do ES6 é extensa, se você gosta de ler muito, pode baixar as especificações completas do site da ECMA International. Neste post, vamos dar uma olhada em 10 recursos escolhidos a dedo, embora o ES6 tenha muito mais a oferecer. Se você quiser experimentar, ES6 Fiddle é um ótimo lugar para fazer isso, e você também pode encontrar alguns trechos de código de exemplo lá.
Suporte para ECMAScript 6
Os fornecedores de navegadores têm gradualmente adicionado suporte para os recursos do ECMAScript 6. Você pode encontrar uma tabela de compatibilidade legal aqui sobre o suporte do navegador e do compilador para os novos recursos.
Se você estiver interessado no suporte do ES6 no Node.js, confira os documentos aqui.
Embora nem todos os recursos sejam atualmente suportados, podemos usar transpiladores como o Babel para transpilar nosso código ES6 para o ES5. Existe um plugin Grunt legal para Babel, muitos plugins ES6 incríveis para Grunt, e um incrível plugin Gulp-Babel por aí, então felizmente temos muitas opções.
Dessa forma, podemos começar a usar a sintaxe e os recursos aprimorados, enquanto não precisamos nos preocupar com problemas de compatibilidade. Agora vamos ver os recursos.
1. Novo deixei Palavra chave
ES6 apresenta o novo deixei palavra-chave que nos permite declarar variáveis locais no escopo de um bloco, como uma declaração, uma expressão ou uma função (n interna). Por exemplo, podemos declarar um para loop da seguinte maneira, então reutilize o mesmo nome de variável (como seu escopo é limitado ao para loop) dentro do próximo E se declaração:
para (let i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Nós reutilizamos "i" let i = x * y
Usando o deixei palavra-chave leva a um código mais limpo e mais utilizável. A diferença entre deixei e var está no escopo, por exemplo, uma variável local definida pelo var palavra-chave pode ser usada em toda a função envolvente, enquanto variáveis definidas por deixei só funcionam em bloco (sub) próprio. Deixei também pode ser usado globalmente, neste caso, comporta-se da mesma forma que var. Claro, no ES6 ainda podemos usar var se nós quisermos.
2. Novo const Palavra chave
O novo const A palavra-chave torna possível declarar constantes, também conhecidas como variáveis imutáveis, às quais não podemos reatribuir novos conteúdos mais tarde.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Erro silencioso, pois não podemos reatribuir um novo valor a uma constante
No entanto, as variáveis imutáveis nem sempre são totalmente imutáveis no ECMAScript 6, como se uma constante mantivesse um objeto, posteriormente podemos alterar o valor de suas propriedades e métodos. O mesmo vale para os elementos de um array.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Ainda não podemos reatribuir diretamente um novo valor ao objeto MY_CONSTANT no snippet de código acima, o que significa que não podemos alterar os nomes das propriedades e métodos, e também não podemos adicionar um novo ou excluir um existente, por isso não podemos fazer o seguinte coisa:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // erro
3. funções de seta
O ECMAScript 6 facilita a maneira como escrevemos funções anônimas, como podemos omitir completamente o função palavra chave. Nós só precisamos usar a nova sintaxe para funções de seta, nomeado após o => sinal de seta (flecha gorda), que nos fornece um grande atalho.
// 1. Um parâmetro em ES6 permite somar = (a, b) => a + b; // em ES5 var sum = function (a, b) retornar a + b; ; // 2. Sem parâmetros no ES6 let randomNum = () => Math.random (); // no ES5 var randomNum = function () retornar Math.random (); ; // 3. Sem return no ES6 let message = (name) => alert ("Oi" + nome + "!"); // no ES5 var message = function (seuNome) alert ("Oi" + seuNome + "!"); ; Há uma diferença importante entre as funções regular e de seta, ou seja, as funções de seta não recebem isto valor automaticamente como funções definidas com o função palavra-chave fazer. Funções de seta lexicalmente ligar a isto valor para o escopo atual. Isso significa que podemos reutilizar facilmente isto palavra-chave em uma função interna. No ES5, só é possível com o seguinte hack:
// ES5 Corte para usar a palavra-chave "this" em uma função interna … addAll: function addAll (pieces) var self = this; _.each (peças, função (peça) self.add (peça);); ,… // ES6 a mesma função interna agora pode usar o seu próprio "this" … addAll: function addAll (partes) _.each (pieces, piece => this.add (piece)); ,…
Código acima é de Mozilla Hacks
4. Novo espalhar Operador
O novo espalhar o operador está marcado com 3 pontos (…) e podemos usá-lo para assinar o local de vários itens esperados. Um dos casos de uso mais comuns do operador de propagação é inserir os elementos de uma matriz em outra matriz:
let myArray = [1, 2, 3]; deixe newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Nós também podemos ter alavancagem do espalhar operador em chamadas de função em que queremos passar argumentos de uma matriz:
let myArray = [1, 2, 3]; função soma (a, b, c) retornar a + b + c; console.log (sum (… myArray)); // 6
o espalhar operador é bastante flexível, pois pode ser usado várias vezes na mesma matriz ou chamada de função.
5. Valores padrão para parâmetros e novos parâmetros de descanso
Boas notícias, que no ECMAScript 6 podemos adicionar valores padrão aos parâmetros de uma função. Isso significa que, se não passarmos argumentos posteriormente na chamada de função, os parâmetros padrão serão usados. No ES5, os valores padrão dos parâmetros são sempre definidos como Indefinido, então a nova possibilidade de defini-los para o que queremos é definitivamente um grande aprimoramento da linguagem.
soma da função (a = 2, b = 4) retorno a + b; console.log (sum ()); // 6 console.log (soma (3, 6)); // 9
ES6 também introduz um novo tipo de parâmetro, o parâmetros de descanso. Eles se parecem e funcionam de maneira semelhante para distribuir operadores. Eles são úteis se não soubermos quantos argumentos serão passados posteriormente na chamada de função. Podemos usar as propriedades e métodos do objeto Array em parâmetros de descanso:
function putInAlphabet (… args) deixa classificado = args.sort (); retornar classificado; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Novo para de Declaração
Com a ajuda do novo para de loop podemos iterar sobre matrizes ou outros objetos iteráveis facilmente. Juntamente com o novo para de instrução, o ECMAScript 6 introduz dois novos objetos iteráveis também, Mapa para mapas de chave / valor e Conjunto para coleções de valores únicos que também podem ser valores primitivos e referências de objeto. Quando usamos o para de declaração, o código dentro do bloco é executado para cada elemento do objeto iterável.
let myArray = [1, 2, 3, 4, 5]; let sum = 0; para (let i of myArray) soma + = i; console.log (soma); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Template Literals
O ECMAScript 6 nos fornece uma nova alternativa para concatenação de strings. Literais de modelo nos permite criar facilmente modelos nos quais podemos incorporar valores diferentes a qualquer local desejado. Para isso, precisamos usar o $ … sintaxe em todos os lugares onde queremos inserir os dados que podemos passar de variáveis, matrizes ou objetos da seguinte maneira:
let customer = title: 'Ms', nome: 'Jane', sobrenome: 'Doe', idade: '34'; let template = 'Caro $ customer.title $ customer.firstname $ customer.surname! Feliz aniversário de $ customer.age th! '; console.log (modelo); // Cara querida Jane Doe! Feliz aniversário de 34 anos!
8. Classes
ES6 introduz classes JavaScript que são construídas sobre a herança baseada em protótipo existente. A nova sintaxe torna mais simples criar objetos, aproveitar a herança e reutilizar o código. Também facilitará para iniciantes que chegam de outras linguagens de programação entender como o JavaScript funciona.
No ES6 as classes são declaradas com o novo classe palavra-chave e precisa ter um construtor() método que é chamado quando um novo objeto é instanciado usando o novo myClass () sintaxe. Também é possível estender novas classes com o A classe Child estende o pai sintaxe que pode ser familiar a partir de outras linguagens orientadas a objetos, como o PHP. Também é importante saber que, ao contrário das declarações de função e variável, as declarações de classe NÃO são hasteadas no ECMAScript 6.
classe Polygon constructor (altura, largura) // construtor de classe this.name = 'Polygon'; this.height = altura; this.width = largura; sayName () // método de classe console.log ('Olá, eu sou um', this.name + '.'); let myPolygon = novo Polígono (5, 6); console.log (myPolygon.sayName ()); // Olá, eu sou um polígono. Código acima de ES6 Fiddle Examples, .
9. Módulos
Alguma vez você já se perguntou como seria legal se o JavaScript fosse modular? Obviamente, existem soluções alternativas como o CommonJS (usado no Node.js) ou o AMD (Asynchronous Module Definition) (usado no RequireJS) para fazer isso antes, mas o ES6 introduz módulos como um recurso nativo..
Precisamos definir cada módulo em seu próprio arquivo e usar o exportar palavra-chave para exportar variáveis e funções para outros arquivos e importar palavra-chave para importá-los de outros arquivos, de acordo com a seguinte sintaxe:
// functions.js function cube (a) retornar um * a * a; função cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // ou: export cube como cb, cubeRoot como cr // app.js import cubo, cubeRoot de 'functions'; console.log (cubo (4)); // 64 console.log (cubeRoot (125)); // 5
Essa solução é brilhante, pois o código armazenado em um módulo é invisível de fora e precisamos exportar apenas a parte que queremos que seja acessada por outros arquivos. Podemos fazer coisas muito mais surpreendentes com os módulos ES6, aqui você pode encontrar uma explicação excelente e detalhada sobre eles.
10. Cargas de Novos Métodos
O ECMAScript 6 introduz muitos novos métodos para o Protótipo de String, Objeto de Matriz, Protótipo de Matriz e Objeto Matemático existentes. Os novos métodos podem melhorar significativamente a maneira como podemos manipular essas entidades. O Mozilla Dev tem ótimos exemplos de código das novas adições, vale a pena levar tempo e examiná-las completamente.
Apenas para mostrar o quão legal eles são, aqui está o meu favorito: o método find do protótipo Array, que nos permite testar um determinado critério nos elementos de um array, executando a função callback em cada elemento, retornando o primeiro elemento que devolve verdade.
function isPrime (elemento, índice, array) var start = 2; enquanto (início <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, não encontrado console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Código acima de: Mozilla Dev
