Artigo original: How to Count Objects in an Array
Traduzido e adaptado por Daniel Rosa
Saber como percorrer um array rapidamente e contar objetos dentro dele é simples, mas pode enganar. O método length() informa a você o número total de valores dentro do array, mas e se você quiser contar apenas os valores com base em determinadas condições?
Por exemplo, imagine que você tenha um array assim:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];Digamos que você queira apenas contar o número de objetos com status definido como '0'.
Assim como ocorre com tudo em programação, existem várias maneiras de se fazer isso. Vamos ver alguns dos métodos comuns abaixo.
Usar um laço for
Provavelmente, o modo mais fácil seria declarar uma variável counter (contador, em inglês), percorrer o array e incrementar o counter apenas quando status fosse igual a '0':
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
let counter = 0;
for (let i = 0; i < storage.length; i++) {
if (storage[i].status === '0') counter++;
}
console.log(counter); // 6Isso poderia ser simplificado usando um laço for...of:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
let counter = 0;
for (const obj of storage) {
if (obj.status === '0') counter++;
}
console.log(counter); // 6Além disso, você poderia criar uma função para fazer a mesma coisa se tiver outros arrays de objetos para contar de modo condicional:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
function statusCounter(inputs) {
let counter = 0;
for (const input of inputs) {
if (input.status === '0') counter += 1;
}
return counter;
}
statusCounter(storage); // 6Usar métodos de array
O JavaScript inclui alguns métodos úteis (texto em inglês) ao trabalhar com arrays. Cada um deles pode ser encadeado a um array e receber parâmetros diferentes para se trabalhar com eles ao iterar pelos elementos do array.
Os dois métodos que analisaremos são filter() e reduce().
filter()
O método filter faz o que seu nome diz – iterar por cada elemento do array e filtrar todos os elementos que não atendem a uma condição ou condições que você fornece. Então, um novo array é retornado com todos os elementos que foram retornados como verdadeiros com base nessas condições.
Por exemplo:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(function(item){
if (item.status === 0) {
return true;
} else {
return false;
}
});
/*
[
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' }
]
*/Agora que filtramos o objeto com status: '1', basta chamar o método length() no novo array para obtermos a contagem total de status: '0':
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(function(item){
if (item.status === 0) {
return true;
} else {
return false;
}
}).length; // 6É possível, ainda, reduzir isso a uma linha com a sintaxe da ES6:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.filter(item => item.status === '0').length; // 6reduce()
Pense no método reduce() como uma espécie de canivete suíço – ele é extremamente flexível e permite que você receba um array como entrada e o transforme naquilo que quiser. Melhor ainda, assim como filter(), esse método retorna um novo array, deixando o original intacto.
Você pode ler mais sobre reduce() neste artigo (texto em inglês).
Para nosso propósito, queremos receber um array, examinar seu conteúdo e produzir um número. Aqui temos uma maneira simples de se fazer isso:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, obj) => {
if (obj.status === '0') counter += 1
return counter;
}, 0); // 6É possível simplificar ainda mais usando a sintaxe do ES6 e um operador ternário:
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, obj) => obj.status === '0' ? counter += 1 : counter, 0); // 6Ou mais ainda usando desestruturação de objetos (texto em inglês):
const storage = [
{ data: '1', status: '0' },
{ data: '2', status: '0' },
{ data: '3', status: '0' },
{ data: '4', status: '0' },
{ data: '5', status: '0' },
{ data: '6', status: '0' },
{ data: '7', status: '1' },
];
const count = storage.reduce((counter, { status }) => status === '0' ? counter += 1 : counter, 0); // 6Essas são algumas maneiras de se percorrer os elementos de um array e de contá-los condicionalmente. Agora é sua vez! Procure os arrays de objetos que deseja contar e faça isso com confiança!