As funções nativas de arrays em JavaScript otimizam o desenvolvimento. Conheça os métodos para iteração, manipulação, ordenação, busca e validação.
As funções nativas de array no JavaScript tornam a escrita de códigos mais eficiente e concisa. Você pode simplificar tarefas complexas e melhorar a legibilidade e a manutenibilidade do código.
Essa abordagem é um padrão aceito na comunidade de desenvolvimento JavaScript. Ou seja, a maioria das pessoas desenvolvedoras está familiarizada com ela, o que facilita a colaboração e a compreensão.
Ao longo deste artigo, exploraremos uma variedade de métodos nativos de array. Prepare-se para aprofundar seu conhecimento e transformar seus códigos JavaScript em soluções mais robustas e elegantes!
Como usar os métodos fundamentais das funções nativas de array em JavaScript?
Os métodos fundamentais — forEach(), map(), filter(), e reduce() — formam a base para muitas operações de manipulação de dados realizadas em JavaScript e desempenham papéis distintos no processamento e na transformação dos elementos de um array.
Ao compreender profundamente como cada um deles funciona, você poderá resolver problemas no desenvolvimento de aplicações web, desde iterações simples até transformações complexas.
Conheça as aplicações práticas e os casos de uso para entender como os métodos fundamentais resolvem problemas reais.
Iteração simples e direta
O método forEach() é utilizado para iterar sobre os elementos de um array e executar uma função de callback para cada um.
O exemplo a seguir demonstra como usá-lo sobre cada elemento e realizar uma ação específica.
const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
console.log(element); // Saída: 1, 2, 3, 4, 5 (um por linha)
});
É uma abordagem simples e direta para percorrer os elementos de um array sem a necessidade de acompanhar manualmente os índices ou alocar variáveis adicionais.
Transformação de dados
O método map() é utilizado para criar um array a partir da transformação dos elementos de outro existente.
Ele executa uma função de callback para cada elemento do original e retorna um novo array contendo os resultados das operações realizadas.
Exemplo:
const array = [1, 2, 3, 4, 5];
const doubledArray = array.map((element) => {
return element * 2;
});
console.log(doubledArray); // Saída: [2, 4, 6, 8, 10]
Ele é útil para formatar ou manipular os dados de um array de acordo com requisitos específicos, como duplicar os valores.
Filtragem de elementos
Para criar um novo array apenas com os elementos que atendem a uma determinada condição, usamos o método filter().
Ele executa uma função de callback para cada elemento do array original e retorna um novo contendo somente os elementos para os quais a função de callback retorna true.
O exemplo ilustra essa dinâmica:
const array = [1, 2, 3, 4, 5];
const evenNumbers = array.filter((element) => {
return element % 2 === 0;
});
console.log(evenNumbers); // Saída: [2, 4]
É uma maneira eficiente de filtrar elementos com base em critérios específicos, como selecionar apenas os números pares de um array.
Redução de dados
O método reduce() é útil para reduzir os elementos de um array a um único valor, aplicando uma função de callback a cada elemento.
Ele acumula o resultado da operação em um valor acumulador e retorna o valor final após percorrer todos os elementos.
Por exemplo:
const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // Saída: 15
O método pode ser usado para calcular estatísticas sobre os dados de um array ou para concatenar valores em um único valor agregado.
Como utilizar os métodos de modificação de arrays em JavaScript?
Os métodos de modificação ajudam a lidar com dados de forma eficiente, preservando sua integridade.
Os métodos de modificação de arrays em JavaScript são utilizados para adicionar, remover e modificar elementos de forma eficiente.
Eles proporcionam maneiras convenientes de manipular arrays sem a necessidade de operações manuais complexas.
Com isso, podemos realizar operações de manipulação de arrays de maneira rápida e concisa, mantendo a eficiência e a integridade dos dados.
Esses métodos são fundamentais para a construção de aplicações web escaláveis, permitindo uma manipulação eficiente de conjuntos de dados em JavaScript.
Vamos focar nos quatro principais, push(), pop(), shift() e unshift(), discutindo suas funcionalidades.
Adicionando elementos ao final do array
O método push() é utilizado para adicionar um ou mais elementos ao final de um array e retorna o novo comprimento.
Este exemplo modifica o array original, adicionando os elementos fornecidos como argumentos ao final:
const array = [1, 2, 3];
array.push(4);
console.log(array); // Saída: [1, 2, 3, 4]
array.push(5, 6);
console.log(array); // Saída: [1, 2, 3, 4, 5, 6]
A linha array.push(4); adiciona o número 4 ao final do array, e a linha array.push(5, 6); inclui os números 5 e 6.
Após cada chamada do método push(), o array é modificado e seu comprimento é atualizado para refletir os elementos adicionados.
Removendo o último elemento do array
O método pop() é utilizado para remover o último elemento de um array e retorna o elemento removido. Ele modifica o array original, reduzindo o seu comprimento em 1.
Exemplo:
const array = [1, 2, 3, 4];
const removedElement = array.pop();
console.log(removedElement); // Saída: 4
console.log(array); // Saída: [1, 2, 3]
A linha const removedElement = array.pop(); remove o último elemento do array e o armazena na variável removedElement.
Após a chamada do método pop(), o array é modificado e seu comprimento é reduzido em 1.
Removendo o primeiro elemento do array
O método shift() remove o primeiro elemento de um array e retorna o elemento removido.
Ele modifica o array original, deslocando todos os outros elementos para um índice menor e reduzindo o comprimento em 1.
Este exemplo demonstra o uso do método shift():
const array = [1, 2, 3, 4];
const removedElement = array.shift();
console.log(removedElement); // Saída: 1
console.log(array); // Saída: [2, 3, 4]
A linha const removedElement = array.shift(); remove o primeiro elemento do array e o armazena na variável removedElement.
Após a chamada do método shift(), todos os outros elementos são deslocados para índices menores, e seu comprimento é reduzido em 1.
Adicionando elementos no início do array
Por outro lado, unshift() adiciona um ou mais elementos no início de um array e retorna o novo comprimento. Ele modifica o array original, deslocando todos os outros elementos para índices maiores.
Por exemplo:
const array = [2, 3, 4];
array.unshift(1);
console.log(array); // Saída: [1, 2, 3, 4]
array.unshift(-1, 0);
console.log(array); // Saída: [-1, 0, 1, 2, 3, 4]
A linha array.unshift(1); adiciona o número 1 no início do array, e a linha array.unshift(-1, 0); inclui os números -1 e 0.
Após cada chamada do método unshift(), todos os outros elementos são deslocados para índices maiores, e seu comprimento é atualizado para refletir o que foi adicionado.
Leia mais:
- Banco de Dados: 3 coisas que todo desenvolvedor precisa saber
- Gestão de dados: como desenvolver estratégias eficientes
- O que é e como construir um data lake?
Como manipular a ordem dos elementos em arrays em JavaScript?
Para manipular a ordem dos elementos em arrays em JavaScript, você também pode utilizar os métodos sort() e reverse().
O método sort() é utilizado para ordenar de acordo com critérios específicos, como numéricos ou alfabéticos.
Por sua vez, o método reverse() é usado para inverter a ordem dos elementos em um array.
Ordenar elementos em arrays com sort()
O método sort() é utilizado para ordenar os elementos de um array conforme a classificação dos valores.
Por padrão, eles são convertidos em strings e ordenados como strings Unicode, como no exemplo abaixo.
const array = [3, 1, 4, 2];
// Ordenação padrão (como strings Unicode)
array.sort();
console.log(array); // Saída: [1, 2, 3, 4]
No entanto, é possível passar uma função de comparação como argumento para definir o critério de ordenação personalizado.
// Ordenação personalizada (crescente)
array.sort((a, b) => a – b);
console.log(array); // Saída: [1, 2, 3, 4]
Tenha cuidado ao usar o método sort() com arrays de objetos complexos, pois a ordenação pode não produzir o resultado desejado sem uma função de comparação personalizada.
Inverter a ordem dos elementos com reverse()
O método reverse() é utilizado para inverter a ordem dos elementos.
Ele modifica o array original, alterando a posição dos elementos de forma que o primeiro se torne o último e o último se torne o primeiro.
Confira um exemplo:
const frutas = [‘maçã’, ‘banana’, ‘laranja’];
frutas.reverse(); // Inverte a ordem das frutas
console.log(frutas); // Saída: [‘laranja’, ‘banana’, ‘maçã’]
Quando for preciso inverter a ordem de maneira rápida e direta, o método reverse() é útil.
Contudo, seu uso excessivo em conjuntos grandes de dados pode afetar o desempenho da aplicação, devido à necessidade de percorrer todo o array.
Quais são os métodos avançados para localizar e manipular elementos?
Os métodos avançados para localizar e manipular elementos específicos em arrays permitem operações como adição, remoção, substituição e seleção de modo mais eficiente.
Localizar elementos
O método indexOf() encontra a primeira ocorrência de um elemento em um array e retorna o seu índice. Ele retorna -1 se o elemento não estiver presente no array.
Este trecho de código demonstra o uso dos métodos indexOf() e lastIndexOf() em um array que contém os elementos [1, 2, 3, 4, 2].
const array = [1, 2, 3, 4, 2];
const firstIndex = array.indexOf(2); // Procura a primeira ocorrência de 2
console.log(firstIndex); // Saída: 1
const lastIndex = array.lastIndexOf(2); // Procura a última ocorrência de 2
console.log(lastIndex); // Saída: 4
No caso deste array, a primeira ocorrência do número 2 está no índice 1, pois os índices em JavaScript começam em 0.
Por fim, o índice da última ocorrência do número 2 é impresso no console. Ela está no índice 4.
Manipular elementos
O método splice() altera o conteúdo de um array, removendo ou substituindo elementos existentes e/ou adicionando novos. Ele retorna um novo array contendo os elementos removidos, se houver.
No exemplo, temos um array inicializado com os valores [1, 2, 3, 4, 5]:
const array = [1, 2, 3, 4, 5];
// Removendo 2 elementos a partir do índice 2 e inserindo ‘a’, ‘b’, ‘c’
const removedElements = array.splice(2, 2, ‘a’, ‘b’, ‘c’);
console.log(array); // Saída: [1, 2, ‘a’, ‘b’, ‘c’, 5]
console.log(removedElements); // Saída: [3, 4]
O array removedElements que contém os elementos removidos pelo método splice() é impresso no console. O resultado é [3, 4].
O primeiro parâmetro do splice() se refere a partir de qual índice será removido e incluído novos elementos. No exemplo, “2”.
O segundo parâmetro se refere a quantos elementos serão removidos a partir do índice defino no primeiro parâmetro. No exemplo, “2”.
Os demais parâmetros serão os elementos a serem adicionados no array. No exemplo, “’a’,’b’,’c’”
Criação de uma cópia do array
O método slice() também pode ser usado para fazer uma cópia do array, sem modificar o original.
Ele retorna uma cópia superficial de parte de um array, selecionada a partir de um intervalo de índices especificado.
const array = [1, 2, 3, 4, 5];
const newArray = array.slice(1, 4); // Seleciona elementos do índice 1 ao 3
console.log(newArray); // Saída: [2, 3, 4]
O novo array contém os elementos [2, 3, 4], que foram selecionados do original.
No slice(), o primeiro parâmetro se refere a partir de qual índice será criado o novo array. No exemplo, “1”.
E o segundo parâmetro se refere ao índice do último elemento a ser adicionado, porém não adiciona o elemento daquele índice.
No exemplo, “4”, mas o elemento do índice 4 não é adicionado, por isso a saída é [2, 3, 4].
Técnicas avançadas para manipulação de elementos
Os métodos indexOf() e splice() podem ser combinados para remover elementos específicos de um array com base no seu valor ou índice.
O método indexOf() é usado para encontrar o índice do elemento que desejamos remover, enquanto o splice() é utilizado para realizar a remoção desse elemento.
Por exemplo:
const array = [1, 2, 3, 4, 5];
const elementToRemove = 3;
const indexToRemove = array.indexOf(elementToRemove); // Encontra o índice do elemento a ser removido
if (indexToRemove !== -1) { // Verifica se o elemento foi encontrado
array.splice(indexToRemove, 1); // Remove o elemento do array
}
console.log(array); // Saída: [1, 2, 4, 5]
Como testar e validar condições em arrays em Javascript?
Para testar e validar condições em arrays em JavaScript, você pode utilizar métodos como every(), some() e includes().
Essas funções permitem verificar se determinadas condições são verdadeiras para todos, alguns ou, pelo menos, um dos elementos.
Além disso, é possível incorporar essas funções em verificações mais complexas para avaliar diferentes condições, garantindo que os dados atendam aos critérios específicos exigidos pelo seu código.
every()
O método every() verifica se todos os elementos de um array satisfazem uma condição específica.
Ele retorna true se todos os elementos passarem no teste definido pela função de callback; caso contrário, retorna false.
const array = [1, 2, 3, 4, 5];
const allGreaterThanZero = array.every((element) => {
return element > 0;
});
console.log(allGreaterThanZero); // Saída: true
some()
Para verificar se pelo menos um elemento de um array satisfaz uma condição específica, o método some () pode ser usado.
Ele retorna true se pelo menos um elemento passar no teste definido pela função de callback; caso contrário, retorna false.
const array = [1, 2, 3, 4, 5];
const anyGreaterThanThree = array.some((element) => {
return element > 3;
});
console.log(anyGreaterThanThree); // Saída: true
includes()
O método includes() verifica se um array contém um determinado elemento, retornando true ou false, conforme a condição.
const array = [1, 2, 3, 4, 5];
const includesThree = array.includes(3);
console.log(includesThree); // Saída: true
Qual é a importância de dominar as funções nativas de arrays em JavaScript?
Nesse artigo, você descobriu uma caixa de ferramentas cheia de soluções inteligentes para desenvolvimento: as funções nativas de arrays em JavaScript.
Ao dominar esses métodos, é possível escrever código limpo e eficiente, tornando-se mais ágil na resolução de problemas.
Servidor VPS com a flexibilidade e autonomia que você precisa. Data Center no Brasil e suporte especializado a qualquer hora.
Clique aqui!
