Métodos de Iteração em JavaScript e jQuery: forEach(), map(), $.each() e $.map()

Pontos em Comum entre forEach() e map() no JavaScript

Ambos os métodos, forEach() e map(), são utilizados para iterar sobre cada elemento de uma array. Cada execução da função anônima aceita três parâmetros: o valor atual, o índice e a array original. Dentro da função anônima, o this refere-se ao objeto global (como window). Estes métodos são exclusivos para arrays e não funcionam diretamente com objetos.

Método forEach(): Execução Sem Retorno

O forEach() executa uma função de callback para cada item da array, sem produzir um valor de retorno. A array original pode ser modificada indiretamente através dos índices.

const valores = [15, 25, 35, 45, 55];
const resultado = valores.forEach(function(elemento, posicao, arrayRef) {
    arrayRef[posicao] = elemento + 5;
});
console.log(resultado); // undefined
console.log(valores); // [20, 30, 40, 50, 60] - array original alterada

Método map(): Transformação com Retorno

O map() itera sobre a array e retorna uma nova array contendo os resultados da função de callback. A array original permanece inalterada, pois o método cria uma cópia modificada.

const dados = [2, 4, 6, 8];
const transformados = dados.map(function(valor, idx, arr) {
    return valor * 3;
});
console.log(transformados); // [6, 12, 18, 24]
console.log(dados); // [2, 4, 6, 8] - array original mantida

Pontos em Comum entre $.each() e $.map() no jQuery

Os métodos $.each() e $.map() do jQuery oferecem suporte para iteração tanto em arrays quanto em objetos, ao contrário dos métodos nativos do JavaScript que são restritos a arrays.

Método $.each(): Iteração sem Valor de Retorno

A $.each() percorre uma aray ou objeto, executando uma função para cada elemento. A ordem dos parâmetros é invertida em relação aos métodos nativos: primeiro o índice/chave, depois o valor.

// Iteração em uma array
const listaNum = [10, 20, 30];
$.each(listaNum, function(chave, valor) {
    console.log('Posição: ' + chave + ', Valor: ' + valor);
});

// Iteração em um objeto
const config = { tema: "escuro", idioma: "pt-BR" };
$.each(config, function(propriedade, conteudo) {
    console.log(propriedade + ': ' + conteudo);
});

Método $.map(): Transformação com Retorno

A $.map() itera sobre uma array ou objeto e retorna uma nova array com os valores processados. Para objetos, os resultados são frequentemente convertidos em uma lista de pares chave-valor.

// Iteração em uma array
const origem = [1, 2, 3];
const processado = $.map(origem, function(elemento, idx) {
    return elemento * idx;
});
console.log(processado); // [0, 2, 6]

// Iteração em um objeto
const pessoa = { nome: "Ana", idade: 30 };
const detalhes = $.map(pessoa, function(valor, chave) {
    return chave.toUpperCase() + '=' + valor;
});
console.log(detalhes); // ["NOME=Ana", "IDADE=30"]

Tags: javascript jQuery Arrays iteration foreach

Publicado em 7-11 22:01