O que é um Array
Se você não conhece esse recurso, normalmente, para declarar várias variáveis, você precisa declarar uma por uma. Veja um exemplo em código:
let item1 = 'Maçã';
let item2 = 'Banana';
let item3 = 'Laranja';
No entanto, utilizando um array (que significa "variedade" em português), você pode, por meio de uma única variável, acessar uma lista de itens. Veja como fazer isso:
let frutas = ['Maçã', 'Banana', 'Laranja'];
Ou
let frutas = new Array('Maçã', 'Banana', 'Laranja');
Acessando itens no Array
Antes de começar a manipular listas (arrays), é necessario entender o que é um indice. Indice nada mais é do que a posição que um termo esta localizado na lista. Na programação o primeiro indice sempre é representado por 0, ou seja, o primeiro termo de uma lista estará sempre na posição de número 0, o segundo na posição de numero 1 e assim por diante. Com isso em mente, você pode acessar os itens no array usando seu índice:
let frutas = ['Maçã', 'Banana', 'Laranja'];
// Acessando o primeiro item (índice 0)
let primeiraFruta = frutas[0]; // 'Maçã'
// Acessando o segundo item (índice 1)
let segundaFruta = frutas[1]; // 'Banana'
Adicionando itens ao Array
Você pode adicionar itens ao array de diferentes maneiras:
Utilizando o Metodo Push
let frutas = ['Maçã', 'Banana', 'Laranja'];
frutas.push('Manga');
Ou
Adicionando em uma posição específica
let frutas = ['Maçã', 'Banana', 'Laranja'];
frutas[4] = 'Uva';
Removendo itens do Array
Remover itens de um array também é simples:
Utilizando o Metodo Pop
O metodo pop é utilizado para remover o ultimo item de um Array
let frutas = ['Maçã', 'Banana', 'Laranja'];
frutas.pop();
// Removendo um item específico (por índice)
frutas.splice(1, 1); // Remove 1 item a partir do índice 1
Utilizando o Metodo Shift
O metodo shift é utilizado para remover o primeiro item de um Array
let frutas = ['Maçã', 'Banana', 'Laranja'];
frutas.shift();
// Removendo um item específico (por índice)
frutas.splice(1, 1); // Remove 1 item a partir do índice 1
Utilizando o Meotodo Splice
O metodo splice é utilizado para uma quantidade N de valores a partir de um indice informado de um Array.
let frutas = ['Maçã', 'Banana', 'Laranja'];
frutas.splice(1, 1); // Remove 1 item a partir do índice 1
Método Sort
O método sort() é utilizado em JavaScript para ordenar os elementos de um array. Por padrão,
ele
ordena os elementos como strings em ordem alfabética e crescente. Isso significa que os números também
serão
ordenados como strings, o que pode causar resultados inesperados quando se trata de números. Além disso,
o método
sort() altera o array original, ou seja, a ordenação é feita diretamente no array em que é
chamado,
sem criar uma cópia. Veja um exemplo a seguir.
Exemplo Antes da Ordenação
Considere o seguinte array de números e strings:
let itens = [40, 100, 1, 5, 25, 10, 'Banana', 'Maçã', 'Laranja'];
Depois da Ordenação
Após aplicar o método sort(), o array será ordenado da seguinte maneira:
itens.sort();
console.log(itens);
// Resultado: [1, 10, 100, 25, 40, 5, 'Banana', 'Laranja', 'Maçã']
Ordenação Personalizada
Você tambem pode utilizar uma função personalizada para ordenar o Array. Por exemplo, se você quiser
ordenar os números corretamente, precisará fornecer uma função de comparação ao método
sort(). Aqui está como fazer isso:
let numeros = [40, 100, 1, 5, 25, 10];
numeros.sort(function(a, b) {
return a - b;
});
console.log(numeros);
// Resultado: [1, 5, 10, 25, 40, 100]
Método Reduce
O método reduce() é utilizado em JavaScript para reduzir um array a um único valor. Ele
aplica uma função fornecida a um acumulador e a cada elemento do array (da esquerda para a direita),
resultando em um único valor final. Esse método é especialmente útil para somar valores, calcular
produtos, ou para transformar dados complexos em um único resultado.
O reduce() também aceita um segundo parâmetro opcional, que é o valor inicial do acumulador.
Se esse valor inicial for fornecido, a iteração começa com ele e o primeiro elemento do array. Se o
valor inicial não for fornecido, o primeiro elemento do array será usado como o valor inicial, e a
iteração começará a partir do segundo elemento. A escolha de fornecer ou não um valor inicial depende do
que você deseja alcançar com a operação de redução.
Exemplo de Uso do Reduce
Considere o seguinte array de números:
let numeros = [1, 2, 3, 4, 5];
Se quisermos somar todos os números desse array, podemos usar o método reduce() da seguinte
maneira:
let soma = numeros.reduce(function(acumulador, valorAtual) {
return acumulador + valorAtual;
}, 0);
console.log(soma); // Resultado: 15
Entendendo o Exemplo
No exemplo acima, a função é chamada para cada elemento do array, onde
acumulador mantém o valor acumulado da soma e valorAtual é o valor do elemento
atual sendo processado. Começamos com acumulador igual a 0 (o segundo argumento passado ao
reduce()) e, à medida que iteramos sobre o array, somamos cada valor ao acumulador.
Método Filter
O método filter() é utilizado em JavaScript para criar um novo array com todos os elementos
que passam em um teste (ou condição) fornecido por uma função. Ele não modifica o array original; em vez
disso, retorna um novo array contendo apenas os elementos que atendem à condição especificada na função.
A função é chamada para cada elemento do array, e deve retornar true ou
false. Os elementos para os quais a função retorna true são incluídos no novo
array, enquanto os elementos que retornam false são excluídos.
Além disso, o método filter() aceita um segundo parâmetro opcional, que é o valor de
this a ser usado dentro da função de callback. Se esse parâmetro for fornecido, ele será
utilizado como o contexto this durante a execução da função de callback. Caso contrário, o
valor de this dentro da função de callback será undefined ou, se a função for
definida em um contexto específico, o valor desse contexto.
Exemplo de Uso do Filter
// Array de números
let numeros = [10, 20, 30, 40, 50];
// Função de callback para filtrar números maiores que um valor definido em this
function filtrarMaioresQue(valor) {
return valor > this.limite;
}
// Objeto que define o valor de limite
let contexto = { limite: 25 };
// Usando o filter com um segundo parâmetro para definir o contexto this
let resultado = numeros.filter(filtrarMaioresQue, contexto);
console.log(resultado); // Resultado: [30, 40, 50]
Outro Exemplo de Uso do Filter
// Array de números
let numeros = [10, 20, 30, 40, 50];
// Valor limite para filtrar os números
let limite = 25;
// Função de callback para filtrar números maiores que o limite
function filtrarMaioresQue(valor) {
return valor > limite;
}
// Usando o filter sem segundo parâmetro
let resultado = numeros.filter(filtrarMaioresQue);
console.log(resultado); // Resultado: [30, 40, 50]
Método Spread
O operador de espalhamento, ou spread, é uma funcionalidade introduzida no JavaScript ES6
que permite expandir elementos de um array, objeto iterável, ou até mesmo uma string, em um local onde
múltiplos elementos são esperados. O operador spread é representado por três pontos
(...) e é amplamente utilizado para copiar, concatenar arrays, passar múltiplos argumentos
para funções, e clonar objetos de forma superficial.
Exemplo de Uso com Arrays
O operador spread pode ser usado para combinar dois ou mais arrays em um novo array:
let frutas = ['Maçã', 'Banana'];
let citricos = ['Laranja', 'Limão'];
// Combinando arrays usando o operador spread
let todasFrutas = [...frutas, ...citricos];
console.log(todasFrutas); // Resultado: ['Maçã', 'Banana', 'Laranja', 'Limão']
Método Map
O método map() é uma funcionalidade em JavaScript que permite criar um novo array, populado
com os resultados da aplicação de uma função em cada elemento do array original. Diferente de outros
métodos, como forEach(), o map() retorna um novo array sem modificar o array
original, sendo uma excelente escolha quando se deseja transformar os dados de um array.
Exemplo de Uso do Map
Vamos considerar um exemplo simples onde temos um array de números e desejamos criar um novo array com cada número multiplicado por 2:
// Array de números
let numeros = [1, 2, 3, 4, 5];
// Usando o método map para criar um novo array com os números multiplicados por 2
let numerosMultiplicados = numeros.map(function(numero) {
return numero * 2;
});
console.log(numerosMultiplicados); // Resultado: [2, 4, 6, 8, 10]
O que é um Objeto em JavaScript?
Em JavaScript, um objeto é uma coleção de propriedades, cada uma associada a um valor. As propriedades são pares de chave e valor, onde a chave é uma string (ou um símbolo) e o valor pode ser qualquer tipo de dado, incluindo outros objetos ou funções. Objetos são amplamente utilizados para armazenar e organizar dados relacionados.
Como Criar um Objeto
Você pode criar um objeto em JavaScript da seguinte maneira:
Literal de Objeto
// Criando um objeto usando a sintaxe de literal de objeto
let pessoa = {
nome: 'João',
idade: 30,
profissao: 'Desenvolvedor'
};
Exemplo de Uso com Objetos
O método map() também é muito útil ao trabalhar com arrays de objetos. Por exemplo, podemos
ter um array de objetos representando produtos e desejamos extrair apenas os nomes desses produtos:
// Array de objetos representando produtos
let produtos = [
{ nome: 'Camisa', preco: 29.99 },
{ nome: 'Calça', preco: 49.99 },
{ nome: 'Sapato', preco: 79.99 }
];
// Usando map para extrair apenas os nomes dos produtos
let nomesProdutos = produtos.map(function(produto) {
return produto.nome;
});
console.log(nomesProdutos); // Resultado: ['Camisa', 'Calça', 'Sapato']
Testar Metodos
Digite seu código JavaScript no espaço abaixo e clique em "Executar Código" para ver a saída (erros ou
console.log()). Esta seção
é uma ótima oportunidade para experimentar e compreender melhor os métodos de manipulação de arrays,
como sort, filter, spread, map e
reduce.
Resultado
Aplicações
Vamos considerar um cenário em que temos um array de objetos representando vendas de produtos em uma
loja. Nosso objetivo é processar esses dados para obter informações úteis. Usaremos os métodos
sort(), reduce(), filter(), spread, e
map() para resolver o problema.
Problema
Temos o seguinte array de objetos de vendas:
let vendas = [
{ produto: 'Camisa', quantidade: 10, preco: 25.00 },
{ produto: 'Calça', quantidade: 5, preco: 45.00 },
{ produto: 'Sapato', quantidade: 2, preco: 80.00 },
{ produto: 'Tênis', quantidade: 7, preco: 60.00 },
{ produto: 'Jaqueta', quantidade: 3, preco: 100.00 }
];
1. Ordenar os Produtos por Preço
Queremos ordenar os produtos pelo preço em ordem crescente. Usaremos o método sort() para
isso:
let produtosOrdenadosPorPreco = vendas.sort(function(a, b) {
return a.preco - b.preco;
});
console.log(produtosOrdenadosPorPreco);
// Resultado: [{ produto: 'Camisa', quantidade: 10, preco: 25.00 }, { produto: 'Calça', quantidade: 5, preco: 45.00 }, { produto: 'Tênis', quantidade: 7, preco: 60.00 }, { produto: 'Sapato', quantidade: 2, preco: 80.00 }, { produto: 'Jaqueta', quantidade: 3, preco: 100.00 }]
Explicação: O método sort() foi usado com uma função de comparação para
ordenar os produtos com base no preço.
2. Calcular o Total de Vendas
Precisamos calcular o total das vendas de todos os produtos. Usaremos o método reduce():
let totalVendas = vendas.reduce(function(acumulador, venda) {
return acumulador + (venda.quantidade * venda.preco);
}, 0);
console.log(totalVendas);
// Resultado: 675.00
Explicação: O método reduce() foi utilizado para somar o total de vendas
multiplicando a quantidade pelo preço de cada produto e acumulando o resultado.
3. Filtrar Produtos com Quantidade Maior que 5
Queremos filtrar apenas os produtos com quantidade maior que 5. Usaremos o método filter():
let produtosQuantidadeMaiorQue5 = vendas.filter(function(venda) {
return venda.quantidade > 5;
});
console.log(produtosQuantidadeMaiorQue5);
// Resultado: [{ produto: 'Camisa', quantidade: 10, preco: 25.00 }, { produto: 'Tênis', quantidade: 7, preco: 60.00 }]
Explicação: O método filter() foi usado para criar um novo array contendo
apenas os produtos cuja quantidade é maior que 5.
4. Adicionar um Novo Produto à Lista
Queremos adicionar um novo produto à lista de vendas. Usaremos o operador spread para isso:
let novoProduto = { produto: 'Chapéu', quantidade: 4, preco: 20.00 };
let vendasAtualizadas = [...vendas, novoProduto];
console.log(vendasAtualizadas);
// Resultado: [{ produto: 'Camisa', quantidade: 10, preco: 25.00 }, { produto: 'Calça', quantidade: 5, preco: 45.00 }, { produto: 'Sapato', quantidade: 2, preco: 80.00 }, { produto: 'Tênis', quantidade: 7, preco: 60.00 }, { produto: 'Jaqueta', quantidade: 3, preco: 100.00 }, { produto: 'Chapéu', quantidade: 4, preco: 20.00 }]
Explicação: O operador spread foi utilizado para adicionar o novo produto
ao array de vendas existente, criando um novo array com todos os produtos.
5. Criar um Array Apenas com os Nomes dos Produtos
Precisamos extrair apenas os nomes dos produtos. Usaremos o método map():
let nomesProdutos = vendas.map(function(venda) {
return venda.produto;
});
console.log(nomesProdutos);
// Resultado: ['Camisa', 'Calça', 'Sapato', 'Tênis', 'Jaqueta']
Explicação: O método map() foi usado para criar um novo array contendo
apenas os nomes dos produtos extraídos dos objetos de vendas.