Recursos do JavaScript moderno dos quais você talvez não conheça

Apesar de nos últimos sete anos eu escrever em JavaScript quase todos os dias úteis, devo admitir que presto pouca atenção às notícias sobre inovações da ES. Os principais recursos, como async / waitit e proxies, são uma coisa, mas todos os anos há um fluxo de pequenas mudanças em fases que não se enquadram no meu campo de visão, pois sempre há algo mais importante para estudar.

Neste artigo, reuni os recursos do JS moderno, que não eram muito comentados quando apareceram. Alguns deles apenas aumentam a usabilidade, e outros são incrivelmente práticos e podem poupar você escrevendo um monte de código.

ES2015

Literais binários e octais

O JavaScript nem sempre precisa usar manipulação binária. Mas às vezes surgem tarefas que não podem ser resolvidas de outra forma. Por exemplo, quando você escreve código de alto desempenho para dispositivos fracos, insere bits no armazenamento local, realiza manipulações de pixels RGB em um navegador ou trabalha com formatos de dados binários compactados.

Tudo isso pode exigir muito trabalho para ocultar / combinar números binários; sempre me pareceu que eles estavam em vão escondidos em casas decimais. Para esses casos, o formato literal binário foi adicionado ao ES6: 0b .

 const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101; 

Isso simplifica bastante o trabalho com sinalizadores binários:

 // Pizza toppings const olives = 0b0001; const ham = 0b0010; const pineapple = 0b0100; const artechoke = 0b1000; const pizza_ham_pineapple = pineapple | ham; const pizza_four_seasons = olives | ham | artechoke; 

A mesma coisa com os números octais. No mundo JS, esta é uma oportunidade de nicho, mas eles são frequentemente usados ​​para redes e alguns formatos de arquivo. Você pode escrever números octais usando a sintaxe 0o .

Number.isNaN ()

Não deve ser confundido com window.isNaN() , este é um novo método com comportamento muito mais intuitivo.

O clássico isNaN tem alguns truques interessantes:

 isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true 

O que isso nos dá? Primeiro de tudo, nenhum desses parâmetros é realmente NaN . Como sempre, o problema está em todas as propriedades JavaScript "favoritas": conversão de tipo. Os argumentos para window.isNaN são convertidos em números usando a função Number .

O novo método estático Number.isNaN() resolve esse problema. Ele retorna de uma vez por todas a igualdade dos argumentos transmitidos a ele e a NaN . Isso é absolutamente claro:

 Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false 

Assinatura: Number.isNaN : (value: any) => boolean

ES2016

Operador de exponenciação

Isso acontece de tempos em tempos, por isso é bom ter uma sintaxe literal disponível para exponenciação:

 2**2 === 4 3**2 === 9 3**3 === 27 

Estranho, mas eu tinha certeza de que isso já existe em JavaScript. Talvez confundido com Python.

Array.prototype.includes ()

Era difícil de perder, mas se você escreveu array.indexOf(x) !== -1 nos últimos três anos, então se alegra com o novo método de array.indexOf(x) !== -1 :

 [1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false 

includes usa o algoritmo Same Value Zero , que é quase idêntico ao teste estrito de igualdade ( === ), exceto que ele pode manipular valores NaN . Esse algoritmo também compara objetos por links, e não por conteúdo:

 const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true 

fromIndex um segundo parâmetro, fromIndex , que permite fornecer um valor de deslocamento:

 // positions 0 1 2 3 4 const array = [1, 1, 1, 2, 2]; array.includes(1, 2) === true array.includes(1, 3) === false 

Útil

Assinatura: Array.prototype.includes : (match: any, offset?: Int) => boolean

ES2017

Memória compartilhada e operações atômicas

Esses são alguns dos ótimos recursos que são simplesmente inestimáveis ​​se você precisar trabalhar muito com os trabalhadores da Web. Você pode compartilhar diretamente a memória com vários processos e definir bloqueios para evitar condições de corrida.

Esses são dois ótimos recursos com APIs bastante complexas, então não os descreverei aqui. Para obter detalhes, envie-o para este artigo: https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . Nem todos os navegadores suportam esses recursos ainda, mas espero que a situação melhore nos próximos dois anos.

ES2018

Mina de ouro de expressões regulares

O ES2018 possui vários novos recursos de expressão regular:

Correspondências de lookbehind (combinando com caracteres anteriores)

Nos tempos de execução que suportam isso, agora você pode escrever expressões regulares que procuram por caracteres antes da correspondência. Por exemplo, para encontrar todos os números precedidos por um cifrão:

 const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400'] 

É tudo sobre o novo grupo lookbehind, os grupos gêmeos lookahead:

 Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc) 

Infelizmente, hoje em dia você não pode traduzir a nova sintaxe para navegadores antigos, portanto é bem possível que você só possa usá-la no Node por um tempo.

Grupos de captura nomeados

As expressões regulares agora podem selecionar subamostras e usar para análise simples. Até recentemente, poderíamos nos referir a esses fragmentos apenas por números, por exemplo:

 const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers' 

E agora existe uma sintaxe para nomear essas subamostras (ou grupos de registros): dentro dos colchetes no início que colocamos ?<titl> , se queremos dar um nome ao grupo:

 const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers' 

Infelizmente, isso só funciona no Chrome e no Node agora.

Agora os pontos podem marcar novas linhas

É necessário apenas afixar o sinalizador /s , por exemplo, /someRegex./s , /anotherRegex./sg .

ES2019

Array.prototype.flat () e flatMap ()

Fiquei muito feliz em ver isso na MDN.

Simplificando, flat() converte uma matriz multidimensional em uma matriz unidimensional a uma profundidade máxima especificada:

 const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9] 

flatMap é um map seguido por flat com profundidade 1. Isso é útil se você precisar mapear uma função que retorne uma matriz, mas não precisar que o resultado seja uma estrutura de dados aninhada:

 const texts = ["Hello,", "today I", "will", "use FlatMap"]; // with a plain map const mapped = texts.map(text => text.split(' ')); mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; // with flatmap const flatMapped = texts.flatMap(text => text.split(' ')); flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap']; 

Captura ilimitada

Agora você pode escrever expressões try / catch sem referência a erros de lançamento:

 try { // something throws } catch { // don't have to do catch(e) } 

A propósito, ganchos nos quais você não leva em conta o valor de e às vezes são chamados de manipulação de exceções de Pokemon . Porque você tem que pegá-los todos!

Métodos de corte de valor de string

Ligeiramente, mas agradável:

 const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';