O autor do material, cuja tradução publicamos hoje, diz que os novos recursos JavaScript incluídos no padrão ES2019 já estão
disponíveis oficialmente nos navegadores Chrome, Firefox e Safari, bem como na plataforma Node.js. Se você precisar oferecer suporte a navegadores desatualizados, poderá aproveitar as inovações ao transpilar o código JS usando o
Babel . Aqui, examinamos exemplos de alguns dos novos recursos do JS.
Método Object.fromEntries
No ES2017, o método
Object.entries . Ele converte o objeto em uma matriz. Por exemplo, pode ser assim:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students)
Este método se tornou uma adição maravilhosa aos recursos do idioma. O fato é que tornou possível processar convenientemente os dados do objeto usando os vários métodos criados no protótipo
Array . Entre esses métodos, por exemplo,
map ,
filter ,
reduce pode ser observado. Porém, para converter a matriz de volta em um objeto, infelizmente, não havia ferramentas convenientes. Tudo tinha que ser feito manualmente, usando um loop:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
O método
Object.fromEntries projetado para se livrar desses loops. Ele permite que você resolva o mesmo problema com uma quantidade muito menor de código. Isso pode ajudar os desenvolvedores a usar métodos de matriz com mais frequência para processar objetos convertidos em matrizes.
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
É importante observar que matrizes e objetos não são em vão diferentes estruturas de dados. Em alguns casos, a conversão de um para outro leva à perda de dados. No exemplo a seguir, você pode ver como, ao converter uma matriz em um objeto, os elementos da matriz que se tornam chaves duplicadas do objeto são perdidos.
let students = [ [ 'amelia', 22 ], [ 'beatrice', 22 ], [ 'eloise', 21], [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students);
▍Suporte
- Chrome 75
- Firefox 67
- Safari 12.1
Método Array.prototype.flat
Matrizes multidimensionais são estruturas de dados que os programadores encontram com bastante frequência. Especialmente - ao carregar alguns dados. Ao mesmo tempo, reduzir a dimensão da matriz sempre foi uma tarefa importante. Sempre foi possível resolver esse problema, mas o código para sua solução não podia ser chamado de muito atraente.
Considere o seguinte exemplo. Aqui, como resultado do processamento de uma matriz de objetos usando a função
map , temos uma matriz multidimensional. Queremos torná-lo mais "plano".
let courses = [ { subject: "math", numberOfStudents: 3, waitlistStudents: 2, students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']] }, { subject: "english", numberOfStudents: 2, students: ['Wilson', 'Taylor'] }, { subject: "history", numberOfStudents: 4, students: ['Edith', 'Jacob', 'Peter', 'Betty'] } ] let courseStudents = courses.map(course => course.students)
Agora temos à disposição o método
Array.prototype.flat , que recebe um argumento opcional que indica em que nível os elementos da matriz devem ser "aumentados".
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel)
Observe que, se você não passar argumentos para esse método, ele elevará os elementos da matriz em um nível. Isso é muito importante, pois, no nosso caso, precisamos transformar o array em uma estrutura de dados completamente plana. Aqui está o que acontece ao usar esse método sem parâmetros:
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened)
A justificativa de um dispositivo desse método pode ser encontrada no fato de que, por padrão, ele não procura transformar nenhuma matriz em unidimensional, exigindo instruções específicas para a conversão da matriz. Se você precisar converter uma matriz cujos parâmetros exatos são desconhecidos em uma matriz unidimensional, poderá passar o valor
Infinity para o método
flat .
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened)
Como sempre, essas operações devem ser usadas com cautela. Essa abordagem, provavelmente, não pode ser considerada uma boa opção para os casos em que a profundidade da matriz processada é realmente desconhecida.
▍Suporte
- Chrome 75
- Firefox 67
- Safari 12
Método Array.prototype.flatMap
Juntamente com o método
flat , agora temos à nossa disposição um novo método combinado -
Array.prototype.flatMap . Acima, na verdade, já vimos um exemplo de uma situação na qual esse método pode ser útil, mas vamos ver outro exemplo.
Suponha que tenhamos a tarefa de inserir certos elementos em uma matriz. Como resolveríamos isso antes do advento dos novos recursos do JS? Por exemplo, assim:
let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7])
Agora que temos o método
Array.prototype.flat , esse código pode ser aprimorado:
let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
O problema que estamos resolvendo aqui é baseado em um padrão relativamente popular (especialmente programação funcional). Portanto, com que beleza podemos resolvê-lo usando o método
flatMap não pode deixar de nos alegrar:
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
Lembre-se de que, por padrão, o método
Array.prototype.flat funciona como se tivesse passado uma unidade. O método
flatMap se comporta exatamente da mesma maneira, ou seja, "eleva" os elementos da matriz em apenas 1 nível. É o resultado de uma combinação de
map e métodos
flat .
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
▍Suporte
- Chrome 75
- Firefox 67
- Safari 12
Métodos String.prototype.trimStart e String.prototype.trimEnd
Outro novo recurso interessante do ES2019 são os aliases que dão a alguns métodos de string nomes mais significativos. Anteriormente, tínhamos os métodos
String.prototype.trimLeft e
String.prototype.trimLeft à nossa disposição:
let message = " Welcome to CS 101 " message.trimRight()
Os métodos são maravilhosos, mas o bom é que eles receberam nomes mais relevantes para seus propósitos. E o objetivo deles é remover os espaços em branco iniciais e finais das strings.
let message = " Welcome to CS 101 " message.trimEnd()
▍Suporte
- Chrome 75
- Firefox 67
- Safari 12
Argumento opcional do bloco catch
Outro recurso interessante do ES2019 é que o argumento nos blocos
try-catch agora se tornou opcional. Anteriormente, todos
catch blocos de
catch tinham que passar um objeto de exceção como parâmetro. O argumento tinha que ser passado para
catch mesmo que não fosse usado.
try { let parsed = JSON.parse(obj) } catch(e) {
Agora isso não é verdade. Se o objeto de exceção não for usado no
catch , nada precisará ser transferido para esse bloco.
try { let parsed = JSON.parse(obj) } catch { console.log("error") }
Esta é uma grande oportunidade, que será útil nos casos em que o programador souber antecipadamente sobre que tipo de situação de emergência levará a entrar no
catch correspondente.
▍Suporte
- Chrome 75
- Firefox 67
- Safari 12
Alterações no método Function.prototype.toString
O padrão ES2019 trouxe mudanças na maneira como o
toString função
toString funciona. Anteriormente, ele distorceu ligeiramente a aparência do código de saída:
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
Agora, este método reflete a representação real do código fonte das funções.
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
▍Suporte
Sumário
Aqui vimos exemplos de uso de apenas alguns dos novos recursos JavaScript. Se você estiver interessado em inovações de JS, dê uma olhada
neste repositório e
nesta tabela.
Caros leitores! Você encontrou situações nas quais os novos recursos do JS simplificam significativamente a solução de qualquer problema?
