Aqui estão alguns exemplos de tudo o que de novo no ECMAScript 2016, 2017, e 2018

por rajaraodv

É difícil acompanhar o que há de novo no JavaScript (ECMAScript). E é ainda mais difícil encontrar exemplos de código úteis.

assim, neste artigo, vou cobrir todas as 18 características que estão listadas nas propostas finais do TC39 que foram adicionadas nos ES2016, ES2017 e ES2018 (projeto final) e mostrá-las com exemplos úteis.

este é um post bastante longo, mas deve ser uma leitura fácil. Pensa nisto como uma leitura especial do Netflix.”No final, eu prometo que você terá uma tonelada de conhecimento sobre todas essas características.Muito bem, vamos rever isto um a um.

matriz.prototipo.includes

includes is a simple instance method on the Array and helps to easily find if an item is in the Array (including NaN unlike indexOf).

ECMAScript 2016 or ES7-Array.prototipo.inclui()

trivialidades: as pessoas do JavaScript queriam dar-lhe o nome de contains , mas isso aparentemente já era usado por Mootools, então eles usaram includes .As operações matemáticas como adição e subtração têm operadores infix como + e - , respectivamente. Semelhante a eles, o operador ** infix é comumente usado para operação de expoente. Em ECMAScript 2016, o ** foi introduzido em vez de Math.pow .

ECMAScript 2016 ou ES7 — ** operador expoente infix

protesto.valores()

Object.values() é uma nova função que é semelhante a Object.keys() mas retorna todos os valores das propriedades próprias do objeto excluindo qualquer valor(S) na cadeia prototípica.

ECMAScript 2017 (ES8)— Object.valores()

protesto.entradas()

Object.entries() está relacionado com Object.keys, mas em vez de devolver apenas chaves, ele retorna tanto chaves e valores na moda array. Isso torna muito simples fazer coisas como usar objetos em loops ou converter objetos em mapas.Exemplo 1:

ECMAScript 2017 (ES8) — Using Object.entradas () em ciclos

Exemplo 2:

ECMAScript 2017 (ES8) — Using Object.entradas() para converter objeto para Mapa

String padding

dois métodos de instância foram adicionados a String — String.prototype.padStart e String.prototype.padEnd — que permitem adicionar/pré-adicionar uma string vazia ou alguma outra string para o início ou o fim da string original.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

isto vem a calhar quando queremos alinhar as coisas em cenários como exibição de impressão bonita ou impressão terminal.

3.1 exemplo de padStart:

no exemplo abaixo, temos uma lista de números de comprimentos variáveis. Queremos preparar ” 0 ” para que todos os itens tenham o mesmo comprimento de 10 dígitos para fins de exibição. Podemos usar padStart(10, '0') para conseguir isso facilmente.

ECMAScript 2017 — padStart exemplo

3.2 padEnd exemplo:

padEnd realmente vem a calhar quando temos a impressão de vários itens de diferentes comprimentos e deseja alinhar à direita-los corretamente.

o exemplo abaixo é um bom exemplo realista de como padEnd , padStart , e Object.entries todos se reúnem para produzir uma bela produção.

ECMAScript 2017-padEnd, padStart and Object.Entradas de exemplo

3.3 ⚠️ padStart e padEnd no Emojis e outros caracteres de byte duplo

Emojis e outros caracteres de byte duplo são representados por meio de múltiplos bytes de unicode. Então o padStart e o padEnd podem não funcionar como esperado!⚠ ️

por exemplo: digamos que estamos tentando pad a corda heart para alcançar 10 caracteres com o emoji❤ ️. O resultado será parecido com o abaixo:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

isto porque ❤ ️ tem 2 pontos de código de comprimento ('\u2764\uFE0F' )! A palavra heart em si é de 5 caracteres, então só temos um total de 5 caracteres para pad. Então o que acontece é que js pads dois corações usando '\u2764\uFE0F' e que produz❤ ️ ❤ ️. Para o último, ele simplesmente usa o primeiro byte do coração \u2764 que produz ❤

Então, vamos acabar com: ❤️❤️❤heart

PS: Você pode usar este link para verificar unicode char conversões.

Object.getOwnPropertyDescriptors

este método devolve todos os detalhes (incluindo getter gete setter set methods) para todas as propriedades de um dado objecto. A principal motivação para adicionar isso é permitir a cópia / Clonagem superficial de um objeto em outro objeto que também copia funções getter e setter em oposição a Object.assign .

Object.atribuir cópias rasas a todos os detalhes, exceto as funções getter e setter do objeto de origem original.

O exemplo abaixo mostra a diferença entre Object.assign e Object.getOwnPropertyDescriptors juntamente com Object.defineProperties para copiar um objeto original Car em um novo objeto ElectricCar . Você verá que ao usar as funções Object.getOwnPropertyDescriptors ,discount getter e setter também são copiados para o objeto alvo.

antes…

Antes de usar o objecto.atribuir

após…

ECMAScript 2017 (ES8) — Object.getOwnPropertyDescriptors

Adicionar à direita vírgulas nos parâmetros da função

Esta é uma pequena atualização que nos permite ter à direita vírgulas após o último parâmetro da função. Por quê? Para ajudar com ferramentas como git blame para garantir que apenas os novos desenvolvedores são culpados.

o exemplo abaixo mostra o problema e a solução.

ECMAScript 2017 (ES 8) — vírgula em função parâmetro

Nota: Você também pode chamar funções com vírgulas finais!

Async / Await

this, by far, is the most important and most useful feature if you ask me. As funções Async nos permite não lidar com o inferno de callback e fazer todo o código parecer simples.

a palavra-chave async diz ao compilador JavaScript para tratar a função de forma diferente. O compilador pára sempre que atinge a palavra-chave await dentro dessa função. Ele assume que a expressão após await retorna uma promessa e espera até que a promessa seja resolvida ou rejeitada antes de avançar.

no exemplo abaixo, a função getAmount está chamando duas funções assíncronas getUser e getBankBalance . Podemos fazer isso em promessa, mas usar async await é mais elegante e simples.

ECMAScript 2017 (ES 8) – Async Await basic example

6.1 async funciona eles mesmos retornam uma promessa.

se você está esperando o resultado de uma função async, você precisa usar a sintaxe do Promise then para capturar o seu resultado.

no exemplo seguinte, queremos registar o resultado usando console.log mas não dentro do doubleAndAdd. Então queremos esperar e usar a sintaxe then para passar o resultado para console.log .

ECMAScript 2017 (ES 8) — Assíncrono Esperam por si retorna Promessa

6.2 Chamando async/await em paralelo

No exemplo anterior nós estamos chamando esperam por duas vezes, mas cada vez estamos esperando por um segundo (de um total de 2 segundos). Em vez disso, podemos paralelizá-lo uma vez que a e b não são dependentes um do outro usando Promise.all.

ECMAScript 2017 (ES 8) — Using Promise.tudo para paralelizar async / wait

6.3 manipulação de erros async/aguardar funções

existem várias maneiras de lidar com erros ao usar async wait.

Opção 1 — Usar try catch dentro da função

ECMAScript 2017 — Usar try catch dentro do async/await função

Opção 2— Pegar todos esperam expressão

uma vez que cada await expressão devolve uma Promessa, você pode pegar erros em cada linha, como mostrado abaixo.

ECMAScript 2017 — Use tente pegar todos esperam expressão

Opção 3 — Pegar todo o async esperam função

ECMAScript 2017 — Pegar todo o async/await função no final

ECMAScript está atualmente em redação final e vai ser lançado em junho ou julho de 2018. Todas as características Cobertas abaixo estão na Fase-4 e farão parte do ECMAScript 2018.

1. Memória compartilhada e atômica

esta é uma característica enorme, bastante avançada e é uma melhoria do núcleo para motores JS.

a ideia principal é trazer algum tipo de recurso multi-threading para JavaScript de modo que os desenvolvedores JS podem escrever programas de alto desempenho, concorrentes no futuro, permitindo gerir a memória por eles mesmos, em vez de deixar JS motor gerir a memória.

isto é feito por um novo tipo de objeto global chamado SharedArrayBuffer que essencialmente armazena dados em um espaço de memória compartilhada. Assim, esses dados podem ser compartilhados entre o principal thread JS e threads web-worker.

até agora, se quisermos compartilhar dados entre o fio principal JS e web-workers, tivemos que copiar os dados e enviá-los para o outro fio usando postMessage . Já não!

você simplesmente usa SharedArrayBuffer e os dados são instantaneamente acessíveis tanto pela linha principal como por várias threads de Web-worker.

mas partilhar memória entre fios pode causar condições raciais. Para ajudar a evitar as condições de corrida, o objeto global” atômica ” é introduzido. Atomics fornece vários métodos para bloquear a memória compartilhada quando um thread está usando seus dados. Ele também fornece métodos para atualizar tais dados naquela memória compartilhada com segurança.

a recomendação é usar este recurso através de alguma biblioteca, mas agora não há bibliotecas construídas em cima deste recurso.Se estiver interessado, recomendo a leitura.:

  1. dos trabalhadores à memória partilhada-lucasfcosta
  2. a cartoon intro to Shareddarraybuffers-Lin Clark
  3. Shared memory and atomics-Dr. Axel Rauschmayer

2. Restrição literal de modelo marcado removido

primeiro, precisamos esclarecer o que é um” literal de modelo marcado ” para que possamos entender melhor este recurso.

In ES2015+, there is a feature called a tagged template literal that allows developers to customize how strings are interpolated. Por exemplo, a maneira padrão de seqüências de caracteres são interpolados como abaixo…

No tagged literal, você pode escrever uma função para receber o hardcoded partes da cadeia literal, por exemplo, , e as variáveis de substituição, por exemplo, , como parâmetros para uma função personalizada (por exemplo, greet ), e voltar o que você quiser, desde que a função personalizada.

o exemplo abaixo mostra que a nossa Função “Marca” personalizada greet adiciona o tempo do dia como ” Bom Dia!””Boa tarde”, e assim por diante, dependendo da hora do dia para o texto literal e retorna uma string personalizada.

Marca função de exemplo que mostra a seqüência personalizada interpolação

Agora que discutimos o que “Tagged” funções são, muitas pessoas querem usar esse recurso em diferentes domínios, como no Terminal de comandos e solicitações HTTP para compor URIs, e assim por diante.

⚠️O problema com Tagged literal de Cadeia de caracteres

Então, se você tem um Marcado função que internamente usa algum outro domínio de regras (como o Terminal regras), que pode precisar usar \ubla123abla que não se parece com \u0049 ou \u{@F804}, então você teria que receber um erro de sintaxe.

Em ES2018, as regras são mais flexíveis, para permitir que tais aparentemente inválido caracteres de escape, enquanto o Tagged função retorna os valores em um objeto com um “cozido” de propriedade (onde os caracteres inválidos são “indefinido”) e, em seguida, uma “prima” da propriedade (com o que você quiser).

“dotall” flag for Regular expression

Currently in RegEx, although the dot(“.”) é suposto corresponder a um único personagem, não corresponde a novos caracteres de linha como \n \r \f etc.

por exemplo:

//Before/first.second/.test('first\nsecond'); //false

este aprimoramento torna possível para o operador de ponto corresponder a qualquer caractere. A fim de garantir que isso não quebra nada, precisamos usar a bandeira \s quando criamos a RegEx para que isso funcione.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

Aqui é o geral da API da proposta doc:

ECMAScript 2018 — Regex dotAll recurso permite a correspondência de mesmo \n via “.”via / s flag

RegExp name Group Captures ?

este aprimoramento traz um recurso de expressão regular útil de outras linguagens como Python, Java e assim por diante chamado de “grupos nomeados”.”Esta característica permite que os desenvolvedores que escrevem RegExp forneçam nomes (identificadores) no formato(?<name>...) para diferentes partes do grupo no RegExp. Eles podem então usar esse nome para pegar qualquer grupo que eles precisam com facilidade.

4.1 Basic Named group example

ECMAScript 2018-Regex named groups example

4.2 Using Named groups inside regex itself

We can use the \k<group name> format to back reference the group within the regex itself. O exemplo seguinte mostra como funciona.

ECMAScript 2018-Regex nomes dos grupos remetendo para trás via \k<nome do grupo>

4.3 usar grupos com nomes no texto.prototipo.substituir

a característica do grupo nomeado é agora cozido no método de instância de String replace. Então podemos facilmente trocar palavras na corda.

por exemplo, mude “nome próprio, apelido” para “apelido, nome próprio”.

ECMAScript 2018 — Usando a expressão regular é chamado de recurso de grupos em função de substituir

Resto propriedades para Objetos

Resto operador ... (três pontos) permite extrair as propriedades de Objeto que já não são extraídos.

5.1 Você pode usar o resto para ajudar a extrair apenas as propriedades que você deseja

ECMAScript 2018 — Objeto desestruturação via resto

5.2 Mesmo melhor, você pode remover itens indesejados! ??

ECMAScript 2018 — Objeto desestruturação através de resto

Espalhar propriedades para Objetos

Espalhar propriedades também olhar apenas como o resto propriedades com três pontos ... mas a diferença é que você usa se espalhou para criar (reestruturação) novos objetos.

Tip: O operador de spread é usado no lado direito do sinal de igual. O resto é usado no lado esquerdo do sinal de igual.

ECMAScript 2018 — Objeto de reestruturação, através de espalhar

RegExp de Recuo Afirmações

Este é um acessório para o RegEx que nos permite garantir a algumas cadeia de existir imediatamente *antes de* alguma outra seqüência de caracteres.

pode agora utilizar um grupo (?<=…) (ponto de interrogação, inferior a, igual) para procurar asserções positivas.

afirmação positiva: digamos que queremos garantir que o sinal # existe antes da palavra winning (isto é: #winning) e queremos que o regex retorne apenas a string “winning”. É assim que se escreve.

ECMAScript 2018 — (?<=…) for positive assertion

afirmação negativa: digamos que queremos extrair números de linhas que têm sinais € e não $ antes desses números.

ECMAScript 2018 – (?<!… ) for negative assertions

RegExp Unicode Property Escapes

it was not easy to write RegEx to match various unicode characters. Coisas como … \w , \W , \d etc só correspondem a caracteres e números em inglês. Mas e números em outras línguas como Hindi, grego, e assim por diante?É aí que a propriedade Unicode escapa. Acontece que o Unicode adiciona propriedades de metadados para cada símbolo (caractere) e o usa para agrupar ou caracterizar vários símbolos.

por exemplo, a base de dados Unicode agrupa todos os caracteres Hindi(ou seja, todos os caracteres Hindi) sob uma propriedade chamada Script com valor Devanagari e outra propriedade chamada Script_Extensions com o mesmo valor Devanagari. Então podemos procurar por Script=Devanagari e obter todos os personagens Hindi.

Devanagari pode ser usado para várias línguas indianas como Marathi, Hindi, Sânscrito, e assim por diante.

começando em ECMAScript 2018, podemos usar \p para escapar personagens juntamente com {Script=Devanagari} para combinar com todos esses caracteres indianos. Isto é, podemos usar: \p{Script=Devanagari} no RegEx para combinar todos os caracteres Devanagari.

ECMAScript 2018-showing \p
//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

similarmente, a base de dados Unicode agrupa todos os caracteres gregos em Script_Extensions (e Script ) propriedade com o valor Greek . Então podemos procurar por todos os caracteres gregos usando Script_Extensions=Greek ou Script=Greek .

isto é, podemos usar: \p{Script=Greek} no RegEx para corresponder a todos os caracteres gregos.

ECMAScript 2018 — mostrando \p
//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

além disso, o Unicode banco de dados armazena vários tipos de Emojis sob a propriedades booleanas Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, e Emoji_Modifier_Base com valores de propriedade, como `true`. Então podemos procurar todos os Emojis simplesmente selecionando Emoji para ser verdadeiro.

isto é, podemos usar: \p{Emoji}, \Emoji_Modifier e assim por diante para combinar vários tipos de Emojis.

o exemplo seguinte irá esclarecer tudo.

ECMAScript 2018 — mostrando como \p pode ser utilizada para diversos emojis

por último, podemos usar letras “P”(\P ) caractere de escape em vez de pequeno p (\p ), para negar as partidas.

  1. ECMAScript 2018 Proposal

Promise.prototipo.finalmente.()

finally() é um novo método de exemplo que foi adicionado à promessa. A ideia principal é permitir a execução de uma chamada de volta após resolve ou reject para ajudar a limpar as coisas. O callback finally é chamado sem qualquer valor e é sempre executado não importa o que.Vejamos vários casos.

ECMAScript 2018 — finalmente() em resolver o caso
ECMAScript 2018 — finalmente() no caso de rejeição de
ECMASCript 2018 — finalmente() no de Erro lançada a partir de Promessa de caso
ECMAScript 2018 — Erro lançada de dentro **captura** caso

Assíncrona Iteração

Este é um *extremamente* recurso útil. Basicamente, permite-nos criar loops de código async com facilidade!

este recurso adiciona um novo laço” para-esperar-de” que nos permite chamar as funções async que retornam promessas (ou Arrays com um monte de promessas) em um loop. A coisa legal é que o loop espera por cada promessa de resolver antes de fazer o próximo loop.

ECMAScript 2018 — Async Iterator via for-wait-of

that’s pretty much it!Se isto foi útil, por favor clica no gongo ? abotoe abaixo algumas vezes para mostrar o seu apoio! ⬇⬇⬇ ??

My Other Posts

  1. Check out these useful ECMAScript 2015 (ES6) tips and tricks
  2. 5 JavaScript “Bad” Parts That Are Fixed In ES6
  3. Is “Class” In ES6 The New “Bad” Part?

Deixe uma resposta

O seu endereço de email não será publicado.