Operações de agregação com JavaScript

Operações de agregação com JavaScript

Ao trabalhar com dados, pode ser necessário obter informações resumidas. Para fazer isso, se utilizam operações de agregação, que processam um determinado conjunto de dados, e retornam apenas um valor.

As operações de agregação mais comuns são:

COUNT - Conta o total de registros

SUM - Soma valores

AVG - Obtem a média

MAX - Retorna o maior valor

MIN - Retorna o menor valor

Neste artigo vamos ver como trabalhar com estas operações utilizando arrays no JavaScript. Vamos aprender como fazer isso de duas formas, primeiro utilizando um array apenas com números, e depois utilizando um array com objetos.

Primeiro vamos criar o nosso array de testes:

var array_teste1 = [20, 10, 3, 10];

Todo array possui uma propriedade chamada length que retorna a quantidade de registros. Sabendo disso, para saber a quantidade de registros do array, basta fazer:

console.log(array_teste1.length);

Agora vamos obter o menor e o maior valor do array em JavaScript. O JavaScript tem um objeto Math que possui os métodos "max" e "min", mas elas funcionam apenas com uma lista de números. Para utilizar um array, temos que usar um "spread operator" na hora de enviar os dados para o método.

Nos exemplos a seguir vamos criar funções utilizando arrow functions.

const arrMenorValor = arr => Math.min(...arr);

const arrMaiorValor = arr => Math.max(...arr);

console.log(arrMenorValor(array_teste1));

console.log(arrMaiorValor(array_teste1));

E para obter a soma e a média? Neste caso vamos ter que utilizar o "reduce", que permite iterar o array e retornar apenas um valor.

const arrSoma = arr => arr.reduce((a,b) => a + b, 0)

const arrMedia = arr => arr.reduce((a,b) => a + b, 0) / arr.length

console.log(arrSoma(array_teste1);

console.log(arrMedia(array_teste1);

Perceba que o reduce recebe dois parâmetros, o primeiro é o total e o segundo e o item atual. A diferença entre as funções é que a média vai dividir o resultado pelo total de elementos do array.

Agora vamos ver as mesmas operações utilizando um array de objetos.  O array que vamos utilizar é o seguinte:

var arrayVendas = [

{"vendedor": "Joao", "total": 500},

{"vendedor": "Lucas", "total": 700},

{"vendedor": "Matheus", "total": 200},

{"vendedor": "Marcos", "total": 600}

];

Para ver o total de registros para utilizar a propriedade length.

console.log(arrayVendas.length);

Para obter o maior e o menor valor será necessário fazer um "map" no array, o map permite iterar o array e retornar um novo array apenas com o conteúdo desejado, neste caso, precisamos de um novo array apenas com o "total" de cada registro.

const maiorVenda = arr => Math.max(...arr.map(o => o.total));

const menorVenda = arr => Math.min(...arr.map(o => o.total));

console.log(maiorVenda(arrayVendas));

console.log(menorVenda(arrayVendas));

Para fazer a soma e a média vamos continuar usando o "reduce", a diferença em relação ao primeiro exemplo é que vamos extrair apenas o "total" de cada objeto do array.

const mediaVenda = arr => arr.reduce((a, {total}) => a + total, 0) / arr.length;

const somaVenda = arr => arr.reduce((a, {total}) => a + total, 0);

console.log(mediaVenda(arrayVendas));

console.log(somaVenda(arrayVendas));

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Separando um array de strings em conjuntos de arrays ordenados alfabeticamente com JavaScript
19/03/2023JAVASCRIPT

Separando um array de strings em conjuntos de arrays ordenados alfabeticamente com JavaScript

Veja várias formas de separar um array de string com JavaScript

Saiba mais...
Criando gráficos em JavaScript com ChartJS
10/10/2019JAVASCRIPT

Criando gráficos em JavaScript com ChartJS

Um exemplo de como criar gráficos em JavaScript

Saiba mais...
Números e datas por extenso em JavaScript
31/10/2019JAVASCRIPT

Números e datas por extenso em JavaScript

Veja alguns exemplos de como fazer isso com JavaScript

Saiba mais...

Conteúdo sobre banco de dados sem complicação!


Warning: Cannot modify header information - headers already sent by (output started at /home/storage/f/7d/a9/dbins/public_html/blog/post.php:101) in /home/storage/f/7d/a9/dbins/public_html/blog/ga4_track.php on line 11