Novos recursos do ES2021 que você pode ter perdido

Para quem não sabe, TC39 é a organização por trás da padronização de a especificação ECMAScript (JavaScript). Desde o grande lançamento do ES6 em 2015, tornou-se a norma lançar novos recursos anualmente.

Para que um recurso seja adicionado a uma versão anual, ele precisa passar por quatro estágios de proposta, sendo o estágio final a aprovação. Vamos dar uma olhada nas cinco propostas de recursos que estão atualmente no estágio final , com uma data de lançamento prevista para meados de 2021.

1. Operadores de atribuição lógica

Os novos operadores de atribuição lógica &&=, ||= e ??= são bastante semelhantes aos existentes operadores lógicos e são bastante úteis para atribuir valores padrão a variáveis.

Operador lógico de atribuição OR ( ||=)

  x ||=y
 

O operador lógico de atribuição OR é uma operação de curto-circuito, assim como o operador lógico OR ( || ). A expressão acima é idêntica a x || (x=y) , o que significa que y só será atribuído a x se x for falsy . Caso contrário, x retém seu valor original.

<"Exemplo:

 const giveKey=()=> { //executa cálculos aleatórios return"somekey";
}
let userDetails={name:"chika", age: 5, room: 10, key:""}
userDetails.key ||=giveKey ()
console.log (userDetails.key) //output: somekey

console.log (userDetails.key) retorna "somekey" porque o valor da chave original era uma string vazia, que é um valor falso.

Operador lógico de atribuição AND ( &&=)

 x &&=y

O operador lógico de atribuição AND é o oposto do operador lógico de atribuição OR. Nesse caso, y é atribuído apenas a x , se e somente se x for um truthy . Caso contrário, ele retém seu valor original.

 const deleteKey=()=> { //executa cálculos aleatórios Retorna"";
}
let userDetails={name:"chika", age: 5, room: 10, key:"990000"}
userDetails.key &&=deleteKey ()
console.log (userDetails.key) //resultado:""

userDetails.key &&=deleteKey () retorna uma string vazia da função deleteKey porque o valor anterior de userDetails era um número, que é um valor verdadeiro.

Operador lógico de atribuição nula ( ??=)

 x ??=y

O operato lógico nulo r atribui apenas y para x se x for nulo (ou seja, nulo ou indefinido).

<"Exemplo:

 const getKey=()=> { //executa cálculos aleatórios return"somekey";
}
let userDetails={name:"chika", age: 5, room: 10,}
userDetails.key ??=getKey ()
console.log (userDetails.key) //output:"somekey"

Aqui, a saída é "somekey" porque userDetails.key não existe no objeto de resposta (ou seja, é indefinido).

2. String.replaceAll

 const newString=oldString.replaceAll (padrão, substituição);

O replaceAll método retorna uma nova string na qual todas as ocorrências de um padrão são substituídas por uma substituição passada a ele. O parâmetro pattern pode ser uma string ou um padrão regex, e o substituição pode ser uma string ou uma função que cria uma nova string para substituir o padrão .

O método replaceAll é uma sequência do String.replace método, que apenas substitui a primeira ocorrência do pattern por replacement .

 const str="Linda é uma desenvolvedora autodidata. Linda governará o mundo"; let newStr=str.replace ("Linda","Micheal")
//output: Micheal é um desenvolvedor autodidata. Linda governará o mundo let newStr=str.replaceAll ("Linda","Micheal")
//output: Micheal é um desenvolvedor autodidata. Michael vai governar o mundo

3. Separador numérico

O separador numérico simplesmente melhora a legibilidade de números grandes usando o caractere sublinhado ( _ ) para separar grupos de números, da mesma forma que você usa vírgulas para separar números por escrito. Considere o número 1200044555 . À primeira vista, é muito difícil decifrar que esse número é 1,2 bilhão e algo assim.

 const billGatesNetWorth=1_200_044_555;

Agora está muito mais legível. Observe que isso não tem nenhum benefício de desempenho ou afeta a igualdade. 1_200_044_555 ainda é igual a 1200044555 .

4. Promise.Any

 Promise.any ([promessa1, promessa2, promessa3,...]). então (.... faça algo)

O Promise.any () método é um novo método de promessa que aceita uma série de promessas e resolve o valor da primeira promessa a ser resolvida com sucesso. Em outras palavras, o promessa.all resolve com sucesso se alguma das promessas for resolvida e rejeita se todas as promessas forem rejeitadas.

<"Exemplo:

 const promessa1=nova promessa ((resolver)=> setTimeout ((resolver)=> resolver, 300,'mais rápido');
const promessa2=nova promessa ((rejeitar)=> setTimeout ((rejeitar)=> rejeitar, 100,"mais rápido")
const promessa3=nova promessa ((resolver)=> setTimeout ((resolver)=> resolver, 700,'rápido');
promessas constantes=[promessa1, promessa2, promessa3]; Promise.any (promessas).then ((valor)=> console.log (valor)); //Saída: mais rápido

5. WeakRef

 const weakRef=novo WeakRef ({ nome:"Linda";
});
console.log (weakRef.deref (). nome) //output: Linda

WeakRef é um recurso avançado que provavelmente deve ser evitado, de acordo com as notas da proposta TC39. Para entender o que WeakRef faz, você precisa primeiro entender os conceitos de referência de objeto e coleta de lixo em JavaScript.

 const obj={}

Quando você cria um objeto em JavaScript e o atribui a uma variável, o mecanismo JavaScript em execução em um navegador aloca um endereço de memória que armazena o objeto. Por outro lado, a variável à qual o objeto é atribuído armazena o endereço de memória do objeto e não o valor do próprio objeto. Portanto, você pode dizer que obj contém uma referência ao objeto atribuído a ele.

Conforme os objetos são criados e armazenados na memória, em algum ponto, o navegador pode começar a ficar sem memória e precisará liberar espaço na memória. A coleta de lixo é o processo pelo qual o mecanismo do navegador libera espaço de memória, excluindo objetos que não são mais referenciados por nenhuma variável.

WeakRef cria uma referência fraca para o objeto passado a ele. Isso significa que sempre que o navegador precisar executar a coleta de lixo, se a única referência a esse objeto for de uma variável WeakRef , o mecanismo JavaScript pode remover com segurança o objeto da memória e liberar espaço. Isso pode ser ideal para dados WebSocket por causa de sua curta vida útil.

Um WeakRef é criado com o construtor new WeakRef , e o valor da variável WeakRef pode ser acessado por meio do deRef método .

Como começar a usar os recursos do ES2021 em sua base de código hoje

Os novos recursos do ES2021 já são suportados por versões recentes dos principais navegadores como Chrome 85, Firefox 79 e Safari 14. No entanto, para permitir que seu código seja executado em navegadores mais antigos, você precisa configurar seu projeto com o B abel complier.

Instale os seguintes pacotes:

 npm install--save-dev @ babel/core @ babel/cli @ babel/preset-env
npm install core-js

Crie um arquivo babel.config.json na raiz do seu projeto:

 { "predefinições": [ [ "@ babel/preset-env", { "useBuiltIns":"uso", "corejs": { "versão":"3.8", "propostas": verdadeiro } } ] ]
}

A configuração acima instrui o Babel a usar a predefinição env, que contém transformações para todos os recursos JavaScript mais recentes que chegaram ao estágio quatro do processo de proposta TC39. Ele também instrui o Babel a recuperar polyfills quando necessário do JS principal.

Crie um arquivo .browserlistrc na raiz do seu projeto para especificar os navegadores de destino para o Babel transformar o código em:

 padrões
versões de nó mantidas

A consulta defaults instrui o Babel a transformar e polyfill código apenas para:

• Navegadores das duas últimas versões
• Navegadores com> 0,5 por cento de uso do mercado
• Navegadores que não morreram

versões de nó mantidas afirmam que Babel deve transformar e polyfill código para todas as versões de Node que ainda são mantidas pela base Node.js.

Agora, você pode executar:

./node_modules/.bin/babel src--out-dir lib

Isso analisará e transformará todos os seus arquivos JavaScript no diretório src em código adequado para navegadores mais antigos (conforme especificado pelo seu arquivo .browserlistrc ) e produzirá cada arquivo para o diretório lib .

N.B ., se você estiver usando um conjunto de ferramentas como Create React App ou vue-cli, essas configurações já foram abstraídas.

E é isso. Você está pronto para ir. Vá e comece a usar o ES2021 hoje!

A postagem Novos recursos do ES2021 que você pode ter perdido apareceu primeiro no LogRocket Blog .

Source link