Criando um forEach com JS (javascript) Puro

Alguns de nós Front-Ends estamos acostumados com facilidades, com essas inovações cada dia que passa aumentando, não lembramos mais como é criar uma API , Biblioteca de funções do começo…Depois que John Resig criou o framework jQuery conhecido no mundo todo, perdemos os conceitos básicos de logica de programação.

Mas para tanto, venho com este blog mostrar algumas coisas que podemos usar no nosso dia-a-dia , fazendo com que nossas aplicações não necessitem de um framework, diminuindo o tempo de  carregamento.

Diagramação do forEach

Bom , o código abaixo cria um método .forEach() para fazermos buscar dentro de elementos.

//verifica se existe um metodo com o mesmo nome
//se existir ele nao faz nada
if(!Array.prototype.forEach){

//inclui um prototype dentro do Objeto Array
 Array.prototype.forEach = function(fn) {

 //recupera o total de elementos
 var len = this.length;

//verifica se o callback é uma função
 if( typeof fn != 'function') throw new TypeError();

   //faz um loop dentro do elemento
   //usa como callback a funcao passada no parametro
   //recuperando os elementos , os indice e o proprio objeto

   for(var i=0; i< len; i++){
      fn(this[i] , i , this); //aqui é a magica do forEach
    }

 };//fim forEach()

}//fim if[0]

Agora vamos ver a magica acontecendo..

fn(this[i] , i , this); //aqui é a magica do forEach

É onde tudo acontece, porque é nesta linha que nos vamos poder recuperar via funcao callback tudo que precisamos..vamos a um exemplo.


//array
var arr = [100,200,300,400,500,'true'];

//variavel vazia
var temp = '';

//utilizando forEach
//callback function(elem,indice){} ou seja o elemento e
//a chave deste elemento dentro do array

arr.forEach(function(elem,indice){

//adicionando a variavel temp
 temp = 'Indice: ' +indice + '\nValor : ' + elem;

//imprimindo no console os valores
console.log(temp);

});

E o Resultado no console.log() será assim , resgatando cada indice e cada valor do seu respectivo indice.  Muito melhor do que usar jQuery rsrs..da mais emoção trabalhar assim.

Indice: 0
Valor : 100

Indice: 1
Valor : 200

Indice: 2
Valor : 300

Indice: 3
Valor : 400

Indice: 4
Valor : 500

Indice: 5
Valor : true

Virão não é tão dificil assim criar algo que usamos no nosso dia,
esse método recupera 50% do tempo que teriamos criando for, while e etc..

Portanto galera, vamos deixar a preguiça de lado , e começar a trabalhar, criar nossos proprios plugins e metodos invés de ficar usando de outras pessoas..temos capacidade pra isso!!!!
Brasileiro é bicho saliente hehehe…

Abraços , até o proximo post.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s