Se você ainda não domina arrays em JavaScript, espero começar a te ajudar a mudar isso! Os arrays, também conhecidos como vetores, são frequentemente utilizados por nós desenvolvedores e estão disponíveis em diversas linguagens de programação. Então pode ter certeza, você vai utilizar muito arrays, portanto saber manipulá-los é algo importantíssimo.
Caso esse seja seu primeiro contato com arrays ou você considera que ainda precisa ver o básico, considere ler primeiro essa breve introdução a arrays, clicando aqui.
Vamos focar nos principais métodos fornecidos pelo JavaScript para manipulação de arrays. E para isso vamos trabalhar com um array de objetos, onde cada item do array será um objeto aluno. Abaixo é mostrado a estrutura do objeto aluno em sua forma literal.
{
"codigo": "C1332",
"nome": "joão miguel rocha",
"notas": [9, 5.6, 2.7]
}
Você pode baixar o nosso array de objetos aluno diretamente em meu Github, clicando aqui. A seguir uma prévia mostrando os dois primeiros alunos.
[
{
"codigo": "C1332",
"nome": "joão miguel rocha",
"notas": [9, 5.6, 2.7]
},
{
"codigo": "C1333",
"nome": "joão mathias",
"notas": [7.3, 6.6, 8.7]
},
// ...
]
O map é ideal para aplicar uma transformação no array, por exemplo no array de alunos, todo o nome está com caracteres minúsculos, digamos que seja necessário alterar o de todos os alunos para maiúsculo.
let alunos = [
{
"codigo": "C1332",
"nome": "joão miguel rocha",
"notas": [9, 5.6, 2.7]
},
// restante omitido
]
alunos = alunos.map(aluno => {
return {
codigo: aluno.codigo,
nome: aluno.nome.toUpperCase(),
notas: aluno.notas
}
});
A função map é usada para percorrer o array "alunos". Para cada elemento do array, ele cria um novo objeto com as mesmas propriedades do aluno original, porém com uma modificação específica.
Dentro da função map, é usado uma função de flecha (arrow function) para definir uma operação a ser realizada em cada aluno. A função recebe um parâmetro chamado "aluno", que representa cada elemento do array "alunos".
Dentro da função, é criado um novo objeto com as mesmas propriedades do objeto original, No entanto, a propriedade "nome" é convertida para letras maiúsculas utilizando o método toUpperCase;
Ao final, a função map retorna um novo array contendo os objetos modificados, ou seja, um novo array de alunos com o mesmo código, nome em letras maiúsculas e as notas originais.
Array de alunos completo após a transformação:
[
{
"codigo": "C1332",
"nome": "JOÃO MIGUEL ROCHA",
"notas": [9, 5.6, 2.7]
},
{
"codigo": "C1333",
"nome": "JOÃO MATHIAS",
"notas": [7.3, 6.6, 8.7]
},
{
"codigo": "C4434",
"nome": "ISAAC BARBOSA",
"notas": [3.4, 6, 7.7]
},
{
"codigo": "C1248",
"nome": "VALENTINA GARCIA",
"notas": [9, 6, 9.8]
},
{
"codigo": "C1623",
"nome": "PEDRO DIAS",
"notas": [3.7, 5.8, 6.2]
},
{
"codigo": "C1745",
"nome": "LORENZO FONSECA",
"notas": [8.9, 6.7, 7.9]
}
]
Quando precisamos realizar uma pesquisa no array, podemos utilizar o método find, que nos retorna o primeiro item encontrado, veja o exemplo ao pesquisarmos pelo aluno que contém o nome “JOÃO”:
let filtroAluno =
alunos.find(aluno => aluno.nome.includes('JOÃO'));
console.log(filtroAluno);
/*
{
"codigo": "C1332",
"nome": "JOÃO MIGUEL ROCHA",
"notas": [9, 5.6, 2.7]
}
*/
Similar ao find, porém retorna o último item encontrado, veja como fica o exemplo utilizando findLast pesquisando pelo aluno que contém o nome “JOÃO”:
let filtroAluno =
alunos.findLast(aluno => aluno.nome.includes('JOÃO'));
console.log(filtroAluno);
/*
{
"codigo": "C1333",
"nome": "JOÃO MATHIAS",
"notas": [7.3, 6.6, 8.7]
}
*/
Muitas vezes vamos precisar obter apenas o índice de onde se encontra o nosso item no array, e a função perfeita para esse trabalho, é a findIndex, e assim como o find, ela retorna o índice da primeira ocorrência encontrada, observe seu exemplo:
let indice = alunos.findIndex(aluno => aluno.nome.includes('JOÃO'));
console.log(indice);
// 0
Para buscar o último índice no array, podemos utilizar a função findLastIndex, ela vai nos retornar o último índice da ocorrência.
let indice =
alunos.findLastIndex(aluno => aluno.nome.includes('JOÃO'));
console.log(indice);
// 1
Diferente do find que retorna apenas o primeiro item encontrado, o filter retorna um array com todos os resultados encontrados.
Vamos imaginar que precisamos buscar todos os alunos que tiveram alguma de suas notas inferior a 6, podemos fazer isso combinando o filter e o find, veja o exemplo a seguir:
const alunosNotaMenor6 =
alunos.filter(aluno => aluno.notas.find(n => n < 6));
console.log(alunosNotaMenor6);
/*
[
{
"codigo": "C1332",
"nome": "JOÃO MIGUEL ROCHA",
"notas": [9, 5.6, 2.7]
},
{
"codigo": "C4434",
"nome": "ISAAC BARBOSA",
"notas": [3.4, 6, 7.7]
},
{
"codigo": "C1623",
"nome": "PEDRO DIAS",
"notas": [3.7, 5.8, 6.2]
}
]
*/
O reduce faz a somatória de todos os valores de um array e retorna essa soma. Vejamos o código onde aplicamos uma transformação no array com o map para retornar os alunos com uma nova propriedade, que será a média de suas notas. Observe que o reduce tem o exato papel aqui de somar todas as notas para depois conseguirmos realizar o cálculo da média.
const alunosComMedia = alunos.map(aluno => {
const somaNotas =
aluno.notas.reduce((total, nota) => total + nota);
const mediaNotas = somaNotas / aluno.notas.length;
return {
codigo: aluno.codigo,
nome: aluno.nome,
notas: aluno.notas,
media: mediaNotas.toFixed(1)
}
});
console.log(alunosComMedia);
/*
[
{
"codigo": "C1332",
"media": 5.8,
"nome": "JOÃO MIGUEL ROCHA",
"notas": [9, 5.6, 2.7]
},
{
"codigo": "C1333",
"media": 7.5,
"nome": "JOÃO MATHIAS",
"notas": [7.3, 6.6, 8.7]
},
{
"codigo": "C4434",
"media": 5.7,
"nome": "ISAAC BARBOSA",
"notas": [3.4, 6, 7.7]
}
// ...
]
*/
Com o some podemos verificar se existe “algum” no array, por exemplo, o seguinte código verifica se tivemos algum aluno na turma que foi reprovado, ou seja, com média inferior a 6.
Da mesma forma, invertendo a condição, podemos descobrir se a turma teve pelo menos uma aprovação.
O some retorna true ou false.
const peloMenosUmaReprovacao =
alunosComMedia.some(x => x.media < 6);
const peloMenosUmaAprovacao =
alunosComMedia.some(x => x.media >= 6);
console.log(peloMenosUmaReprovacao);
// true
console.log(peloMenosUmaAprovacao);
// true
Se o método some precisa que pelo menos um item do array satisfaça a condição, o every precisa que todos satisfaçam a condição para retornar true. Veja um exemplo:
// Todos os alunos estão aprovados?
const todosAprovados = alunosComMedia.every(x => x.media >= 6);
// Todos os alunos estão reprovados?
const todosReprovados = alunosComMedia.every(x => x.media < 6);
console.log(todosAprovados);
// false
console.log(todosReprovados);;
// false
Quando precisarmos ordenar um array, por qualquer dado que seja, podemos utilizar a função sort, vejamos um exemplo onde queremos ordenar os alunos da maior média para a menor.
const alunosOrdenados = alunosComMedia.sort((a1, a2) => {
if(a1.media < a2.media) {
return 1;
} else if(a1.media > a2.media) {
return -1;
}
return 0;
});
console.log(alunosOrdenados);
/*
[
[
{
"codigo": "C1248",
"nome": "VALENTINA GARCIA",
"notas": [9, 6, 9.8],
"media": "8.3"
},
{
"codigo": "C1745",
"nome": "LORENZO FONSECA",
"notas": [8.9, 6.7, 7.9],
"media": "7.8"
},
{
"codigo": "C1332",
"nome": "JOÃO MATHIAS",
"notas": [7.3, 6.6, 8.7],
"media": "7.5"
}
// ...
]
*/
O operador spread (...) pode ser utilizado para criar cópias ou combinar elementos de arrays no JavaScript. Por exemplo, vamos supor que precisamos criar uma nova disciplina e copiar o array de alunos para ela. Podemos fazer assim:
const disciplinaHistoria = [...alunos];
Dessa forma a nossa variável “disciplinaHistoria” contém todos os alunos presentes no array de alunos.
O spread também é útil para combinarmos arrays, apenas para fins didáticos, vamos dividir os alunos por aprovados e reprovados, já vimos que podemos fazer isso utilizando o filter:
const reprovados = alunosComMedia.filter(x => x.media < 6);
const aprovados = alunosComMedia.some(x => x.media >= 6);
console.log(peloMenosUmaReprovacao);
// true
console.log(peloMenosUmaAprovacao);
// true
Agora vamos criar um novo array para combinar os aprovados e reprovados.
const todosAlunos = [...aprovados, ...reprovados];
Como você pode ver, o operador spread é muito versátil quando trabalhamos com arrays.
Agora que você já tem o conhecimento sobre arrays, te convido para construir um projeto de portal do aluno e aplicarmos tudo o que vimos aqui no e-book em um projeto prático, bora? É mais conteúdo gratuito para você, clique aqui para acessar, está disponível em meu canal do youtube.
O conteúdo abordado até agora sobre arrays no JavaScript é apenas o ponto de partida para explorar todo o potencial dessa poderosa estrutura de dados. Para que você continue aprimorando suas habilidades, gostaria de compartilhar dois próximos passos valiosos:
Inscreva-se no meu canal do YouTube clicando aqui, para receber atualizações de novos conteúdos relacionados. Lá, você encontrará vídeos exclusivos sobre JavaScript e outras tecnologias, que irão aprofundar ainda mais o seu conhecimento.
Cadastre-se na minha newsletter abaixo, para ficar sempre ligado em novos artigos sobre JavaScript e assim não perder nenhuma novidade.