O desenvolvimento de novos recursos para a linguagem JavaScript principal realmente melhorou nos últimos cinco anos, graças, em parte, às estruturas JavaScript que ultrapassaram os limites e provaram a importância de determinadas funcionalidades. Meus posts anteriores sobre ES6, Seis recursos minúsculos, mas incríveis, do ES6 e Mais seis recursos minúsculos, porém incríveis, do ES6O artigo “Six More Tiny But Awesome Features” (Seis recursos minúsculos, mas incríveis, do ES6), destacou uma dúzia de excelentes recursos que foram adicionados ao JavaScript para facilitar nossa vida, e eles certamente facilitam. Vamos dar uma olhada em algumas das “pequenas” funcionalidades que o ES7 e o ES8 nos trouxeram!
String.prototype.padStart/padEnd
padStart e padEnd nos permitem preencher uma determinada string com qualquer texto de nossa escolha para garantir que a string corresponda a um determinado comprimento:
// padStart(desiredLength, textToPrepend) // No text ''.padStart(10, 'Hi') // 'HiHiHiHiHi' // Some text 'def'.padStart(6, 'abc') // 'abcdef' // Only use what gets to length '5678'.padStart(7, '1234') // '1235678' // padEnd(desiredLength, textToAppend) '23'.padEnd(8, '0') // '23000000'
Um uso de padStart poderia incluir o acréscimo de um código de área ao número de telefone se a entrada do usuário não tiver o tamanho correto. padEnd pode ser usado para precisão decimal.
Object.entries
Object.entries nos permite obter os pares de propriedades enumeráveis de um objeto no formato de matriz ([key, value]):
// Object literal
Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]
// String
Object.entries('david') // [["0","d"],["1","a"],["2","v"],["3","i"],["4","d"]]
Object.entries segue a mesma ordem que o for...in seria.
Object.values
Object.keys tem sido imensamente útil para mim, então também fiquei animado ao ver o Object.values apresentado:
// Object literal
Object.values({ 'a': 23, 'b': 19 }) // [23, 19]
// Array-like object (order not preserved)
Object.values({ 80: 'eighty', 0: 1, 1: 'yes' }) // [1, 'yes', 'eighty']
// String
Object.values('davidwalsh') // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]
// Array
Object.values([1, 2, 3]) // [1, 2, 3]
Object.values fornece entradas de valores em literais de objetos, matrizes, strings etc.
Array.prototype.includes
Array.prototype.includes é um pouco como o indexOf mas, em vez disso, retorna um true ou false em vez do índice do item:
['a', 'b', 'c'].includes('a') // true, not 0 like indexOf would give
['a', 'b', 'c'].includes('d') // false
indexOf tem sido usado ao longo dos anos para detectar a presença de itens em uma matriz, mas o índice `0` pode levar a falsos negativos se não for codificado corretamente. Fico feliz que o JavaScript tenha adicionado uma função que retorna exatamente o que precisamos: uma resposta positiva ou negativa!
Exponenciação
O JavaScript introduziu um método abreviado de exponenciação:
// 2 to the power of 8 Math.pow(2, 8) // 256 // ..becomes 2 ** 8 // 256
Essa nova sintaxe faz o mesmo que o Math.pow com menos código!
Vírgulas à direita
Tenho idade suficiente para me lembrar dos dias em que uma vírgula à direita explodia completamente seu código JavaScript no Internet Explorer 6. O JavaScript agora acomoda a vírgula extra:
let myObj = { a:'b', b: 'c', } // No error!
let myArr = [1, 2, 3, ] // No error!
[1, 2, 3,].length // 3
[1, 2, 3, , , ].length // 5
O caso do comprimento do array é algo que o senhor deve ter em mente. O ESLint tem um comma-dangle que o senhor pode usar para garantir que o uso da vírgula seja consistente.
Bônus: async / await
Obviamente async e await, o novo método de lidar com tarefas assíncronas, não é uma adição “minúscula”, mas certamente é incrível! Leia meu guia de async e await para transformar seu inferno de callbacks em uma abordagem mais elegante e de cima para baixo do código assíncrono!
A cada iteração do JavaScript, estamos resolvendo os problemas que tínhamos com a falta de funcionalidade ou com o uso inadequado de outras funções. Qual é a sua adição recente favorita ao JavaScript?
