Aulas

Curso de Javascript – Aula 10 | Manipulação Avançada de Arrays

por: Bernardo Collet

atualizado há 9 meses atrás

Curso de JAVASCRIPT Aula 10 - Manipulação Avançada de Arrays

Nesta aula, vamos explorar alguns métodos poderosos do JavaScript para manipulação de arrays: map, filter, reduce e sort. Esses métodos permitem realizar operações complexas em arrays de forma mais simples e concisa, melhorando a eficiência e a legibilidade do código.

O método map

O método map é utilizado para criar um novo array a partir da transformação dos elementos de um array original. Ele recebe uma função de callback como argumento, que será executada para cada elemento do array original.

Exemplo de uso do método map:
const numeros = [1, 2, 3, 4, 5];

const dobrados = numeros.map(numero => numero * 2);
console.log(dobrados); // Resultado: [2, 4, 6, 8, 10]

O método filter

O método filter é utilizado para criar um novo array contendo apenas os elementos que atendem a uma determinada condição. Ele também recebe uma função de callback como argumento, que deve retornar um valor booleano.

Exemplo de uso do método filter:
const numeros = [1, 2, 3, 4, 5];

const pares = numeros.filter(numero => numero % 2 === 0);
console.log(pares); // Resultado: [2, 4]

O método reduce

O método reduce é utilizado para reduzir um array a um único valor, aplicando uma função de callback que acumula os resultados das iterações anteriores.

Exemplo de uso do método reduce:
const numeros = [1, 2, 3, 4, 5];

const soma = numeros.reduce((acumulador, numero) => acumulador + numero, 0);
console.log(soma); // Resultado: 15

O método sort

O método sort é utilizado para ordenar os elementos de um array de acordo com uma função de comparação.

Exemplo de uso do método sort:
const frutas = ['maçã', 'banana', 'laranja', 'uva'];

frutas.sort();
console.log(frutas); // Resultado: ['banana', 'laranja', 'maçã', 'uva']

Uso de arrow functions para simplificar o código

Nesta aula, vamos explorar as arrow functions, uma sintaxe mais concisa para definir funções em JavaScript. As arrow functions tornam o código mais limpo e enxuto, sendo especialmente úteis quando utilizadas em conjunto com métodos de arrays, como map, filter, reduce e sort.

Sintaxe das Arrow Functions

A sintaxe das arrow functions é uma forma mais curta de escrever funções em JavaScript, usando a seta (=>) para substituir a palavra-chave function. A sua forma básica é (parâmetros) => expressão.

Exemplo de uma arrow function:
const dobrar = numero => numero * 2;
console.log(dobrar(5)); // Resultado: 10

Arrow Functions em Métodos de Arrays

As arrow functions são especialmente úteis em métodos de arrays, tornando o código mais conciso e legível.

Exemplo de uso de arrow functions com map:
const numeros = [1, 2, 3, 4, 5];

const dobrados = numeros.map(numero => numero * 2);
console.log(dobrados); // Resultado: [2, 4, 6, 8, 10]
Exemplo de uso de arrow functions com filter:
const numeros = [1, 2, 3, 4, 5];

const pares = numeros.filter(numero => numero % 2 === 0);
console.log(pares); // Resultado: [2, 4]
Exemplo de uso de arrow functions com reduce:
const numeros = [1, 2, 3, 4, 5];

const soma = numeros.reduce((acumulador, numero) => acumulador + numero, 0);
console.log(soma); // Resultado: 15

O uso de arrow functions simplifica a sintaxe e melhora a legibilidade do código em JavaScript. Quando combinadas com métodos de arrays, como map, filter, reduce e sort, as arrow functions proporcionam uma forma mais concisa e eficiente de manipular arrays. Com essas ferramentas em mãos, estamos preparados para explorar o módulo de Manipulação Avançada de Arrays, onde continuaremos a aprofundar nossos conhecimentos e aprimorar nossas habilidades na manipulação de dados em JavaScript.

Woocommerce

Otimização de Desempenho para sua Loja WooCommerce: Estratégias Eficientes

Descubra como otimizar sua loja no WooCommerce para aumentar vendas e a satisfação do cliente. Estratégias e dicas eficazes!
Elementor

Elementor vs. Outros Construtores de Página: Qual a Melhor Escolha para o seu Site?

Construtores de Página: Descubra as vantagens do Elementor em comparação com outros construtores e encontre a ferramenta ideal para você.
Dúvidas?