A novidade do momento é o ES6, que será abordado em outro momento aqui no blog, mas vamos tirar um momento para rever algumas excelentes estruturas que fazem parte do ES5.
Ainda hoje vejo código dos mais diversos lugares utilizando estruturas dos primórdios da internet, quando existem formas muito mais eficientes de escreve-las.
A não ser que você precise dar suporte para browsers legados, como o IE 8 (Você realmente precisa dar suporte? Estatísticas de uso do IE 8), não existem motivos para não utilizar as estruturas abaixo. Entrem os Array#extras:
- forEach
- map
- filter
- reduce
- some
- every
Provavelmente você já se deparou com alguns deste métodos em bibliotecas como underscore.js e lodash. Mas advinhem só? Esse métodos são todos nativos do ES5, e estão disponíveis a partir do IE 9+, Firefox 21+, Chrome 23+, iOS 7+…mãos à massa!
forEach
Esse provavelmente é o mais conhecido dentre os Array#extras. Deixe o ‘for (var i=0; i<arr.length; i++)’ de lado. Este método irá executar o callback fornecido uma vez para cada item do array:
var nomes = ['Bruno', 'redspark', 'Megaman'];
function eLegal(nome) {
console.log(nome + ‘ é legal!’);
}
nomes.forEach(eLegal);
// Bruno é legal, redspark é legal, Megaman é legal
map
O método map faz o mesmo que o forEach; executa o callback uma vez para cada elemento do array. Seu diferencial é que retorna um novo array após executar o callback:
var numeros = [1,2,3];
function soma2(numero) {
return numero + 2;
}
var novosNumeros = numeros.map(soma2);
// novosNumeros é [3,4,5]
// numeros ainda é [1,2,3]
filter
Filter é uma mão na roda. Ele executa um callback para cada item do array e retorna um novo array, mas apenas com os itens que passarem na validação da função fornecida:
var numeros = [11,12,21,22,10,45,6];
function menorQue20(numero) {
return numero < 20;
}
var menoresQue20 = numeros.filter(menorQue20);
// menoresQue20 é [11,12,10,6]
// numeros ainda é [11,12,21,22,10,45,6]
reduce
A idéia do reduce é guardar o valor retornado pela sua última execução e passá-lo para a próxima execução retornando no final um novo array. Dessa forma fica bem simples de somar todos os valores do array, ou então achatar um array bidimensional:
var array2D = [[4,5],[6,7],[8,9]];
function achatar(a, b) {
return a.concat(b);
}
var arrayAchatado = array2D.reduce(achatar);
// arrayAchatado é [4,5,6,7,8,9]
// array2D ainda é [[4,5],[6,7],[8,9]]
some
O método some vai executar o callback para cada elemento do array, utilizando este callback como validação, e retornando um boolean no final. É possível utilizar este método para verificar se um item específico existe no array:
var personagens = ['Mario', 'Ryu', 'Vader'];
function quemESeuPai(personagem) {
return personagem === ‘Vader’;
}
personagens.some(quemESeuPai);
// retorna true
every
O every faz o mesmo que o método some, porém seu resultado é influenciado por todos os itens do array, ao invés de apenas 1. Todas as verificações que forem feitas por este método devem ser verdadeiras para que ele retorne true:
var nomes = ['Alice', 'Aaron', 'Ana', 'Antonio'];
function comecamComA(nome) {
return nome.toLowerCase().charAt(0) === ‘a’;
}
nomes.every(comecamComA);
// retorna true
Saiba que estes não são os únicos métodos de Arrays implementados no ES5.
Você pode encontrar mais métodos, assim como mais informações sobre cada método apresentado aqui, como os argumentos opcionais que os mesmos recebem e outras informações, acessando a MDN.
Compartilhe isso:
