Alguns novos recursos do ES7 + ES8
O desenvolvimento de novos recursos para a linguagem JavaScript realmente melhorou nos últimos anos, graças, em parte, a frameworks JavaScript que pressionam os limites e provam o quão importante uma funcionalidade pode ser. Entretanto, ao mesmo tempo, há uma enorme comunidade por trás dessa evolução, que fazem nosso desenvolvimento ficar mais fluido e agradável, confira abaixo alguns dos novos recursos disponíveis na versão do ES7 e ES8.
Dica rápida sobre como manter-se atualizado sobre essas novas funcionalidades
A Fernanda Bernardo, falou sobre todas essas novas funcionalidades na última edição da BrazilJS Conf, se quiser entender ainda mais sobre as novas funcionalidades do JS, assista a palestra dela no nosso canal do YouTube, e não deixe de acompanhar as atuais propostas listadas no repositório do TC39.
ES7
Array.prototype.includes
Array.prototype.includes é semelhante ao indexOf, que determina se um array contém um determinado elemento, mas, em vez disso, retorna true ou false.
['foo', 'bar', 'baz'].includes('foo'); // true, não 0 como retornaria o `indexOf` ['foo', 'bar', 'baz'].includes('foobar'); // false Além de ser mais eloqüente e realmente dar aos desenvolvedores o valor booleano em vez da posição de um dado, includes também funciona com NaN (não é um número). Finalmente, includes tem um segundo parâmetro opcional fromIndex. Isso é bom para otimização, pois permite procurar um dado a partir de uma determinada posição.
["foo", "bar", "baz"].includes("foo"); // === true ["foo", "bar", "baz"].includes("foo", 1); // === false [1, 2, 3].includes(2); // === true [1, 2, 3].includes(4); // === false [1, NaN].includes(NaN); // === true [1, -0, 2].includes(+0); // === true [1, +0, 2].includes(-0); // === true Em resumo, includes traz simplicidade para qualquer desenvolvedor que tenha que verificar se um valor está ou não em um array... Exponentiation Operator Se você esqueceu o que é o expoente, é quando você multiplica o mesmo número (base) sobre si mesmo muitas vezes (expoente). Por exemplo, 7 potência de 3 é 7 * 7 * 7. Atualmente, no ES6/ES2015, você pode usar o método Math.pow ou criar uma função recursiva para resolver esse problema: // Math.pow - 2 potência de 8 console.log(Math.pow(2, 8)) // 256 function power(base, exponent) { if (exponent == 0) return 1; return base * power(base, exponent - 1); } // Usando função recursiva - 2 potência de 8 console.log(power(2, 8)) // 256 Agora com o Exponentiation Operator do ES7/ES2016, podemos usar uma sintaxe mais curta: // Exponentiation Operator - 2 potência de 8 console.log(2 ** 8); // 256 let a = 2 a **= 3 console.log(a); // 8 Este operador é principalmente usado por desenvolvedores que fazem softwares envolvendo cálculos matemáticos e é útil no caso de 3D, Realidade Virtual, SVG ou visualização de dados. ES8 Object.values / Object.entries Extrair valores e pares de chave-valor de objetos se tornaram ainda mais fáceis! Com as novas funcionalidades Object.values e Object.entries que estão na especificação ECMAScript2017 e similarmente ao Object.keys, retornam arrays. Cada item do array retornado por Object.keys, Object.values e Object.entries correspondentemente, contém uma chave, um valor ou a entrada para uma propriedade/atributo de um objeto. Antes do ES8/ES2017, desenvolvedores JS que precisavam iterar sobre às próprias propriedades de um objeto tinham que usar Object.keys, iterar sobre o array retornado por ele e usar obj[key] para acessar cada valor: let obj = { a: 1, b: 2, c: 3 }; Object.keys(obj).forEach((key, index) => { console.log(key, ": ", obj[key]); }); /* == RESULTS * * a : 1 * b : 2 * c : 3 * */ Object.values retorna um array de valores de propriedade enumeráveis do objetos. E podemos iterar sobre ele usando o bom e velho Array.prototype.forEach combinado com arrow functions do ES6 de retorno implícito: // Object literal let obj = { a: 1, b: 2, c: 3 }; Object.values(obj).forEach(val => console.log(val)); // 1, 2, 3 // String Object.values("BrazilJS"); // [ 'B', 'r', 'a', 'z', 'i', 'l', 'J', 'S' ] Object.entries, por outro lado, irá retornar um array de objetos de chaves-valores de propriedade enumeráveis do objeto (como um array). Cada item do array resultante também será um array. // Object literal let obj = { a: 1, b: 2, c: 3 }; JSON.stringify(Object.entries(obj)); // '[["a",1],["b",2],["c",3]]' // String Object.entries("JS"); // [ [ '0', 'J' ], [ '1', 'S' ] ] String padding String.prototype.padStart e String.prototype.padEnd além de tornar o trabalho com strings em JavaScript uma experiência mais agradável, ajudam a evitar depender de bibliotecas extras. Ambos os métodos nos permitem trocar uma determinada string com qualquer texto de nossa escolha para garantir que uma string corresponda a um determinado comprimento. O método padStart() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no início. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado desde o início (esquerda) da string atual. console.log("BrazilJS".padStart(14)); // " BrazilJS" console.log("BrazilJS".padStart(14, "wow - ")); // "wow - BrazilJS" console.log("BrazilJS".padStart(14,"654321")); // "654321BrazilJS" console.log("BrazilJS".padStart(14, "0")); // "000000BrazilJS" console.log("BrazilJS".padStart(1)); // "BrazilJS" // uso sem uma string inicial console.log(''.padStart(78, 'Eu vou aprender ES7 + ES8!')); // 'Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!Eu vou aprender ES7 + ES8!' O método padEnd() retorna uma string de um determinado comprimento (targetLength), inserindo almofadas no final. As almofadas são uma string determinada, repetidas, se necessário, até atingir o comprimento desejado. O preenchimento é aplicado no final (direita) da string atual. console.log("BrazilJS".padEnd(14)); // "BrazilJS " console.log("BrazilJS".padEnd(14, " - wow")); // "BrazilJS - wow" console.log("BrazilJS".padEnd(14,"654321")); // "BrazilJS654321" console.log("BrazilJS".padEnd(14, "0")); // "BrazilJS000000" console.log("BrazilJS".padEnd(1)); // "BrazilJS" E você já está utilizando essas novas funcionalidades? Então, conte-nos sobre como tem sido o uso dessas funcionalidades e quais benefícios vocês já conseguiram perceber utilizando-as. Deixe sua opinião na seção de comentários e vamos conversar sobre isso! https://github.com/tc39/Array.prototype.includes https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/contains https://github.com/rwaldron/exponentiation-operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation https://github.com/tc39/proposal-string-pad-start-end https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd https://davidwalsh.name/es7-es8-features https://derickbailey.com/2017/06/06/3-features-of-es7-and-beyond-that-you-should-be-using-now/