{
"color": "purple",
"type": "minivan",
"registration": new Date('2012-02-03'),
"capacity": 7
}
Este objeto representa um carro. Pode haver muitos tipos e cores de carros, cada objeto representa um carro específico.
Agora, na maioria das vezes, você obtém dados assim de um serviço externo. Mas, às vezes, você precisa criar objetos e suas matrizes manualmente. Como eu fiz quando estava criando esta loja virtual:
Considerando que cada item da lista de categorias se parece com isso em HTML:
Eu não queria repetir esse código 12 vezes, o que o tornaria insustentável.
Criando uma matriz de objetos
Mas vamos voltar aos carros. Vamos dar uma olhada neste conjunto de carros:
Podemos representá-lo como uma matriz desta maneira:
let cars = [
{
"color": "purple",
"type": "minivan",
"registration": new Date('2017-01-03'),
"capacity": 7
},
{
"color": "red",
"type": "station wagon",
"registration": new Date('2018-03-03'),
"capacity": 5
},
{
...
},
...
]
Matrizes de objetos não permanecem iguais o tempo todo. Quase sempre precisamos manipulá-los. Então, vamos dar uma olhada em como podemos adicionar objetos a uma matriz já existente.
Adicionar um novo objeto no início – Array.unshift
Para adicionar um objeto na primeira posição, use Array.unshift.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.unshift(car);
Adicione um novo objeto no final – Array.push
Para adicionar um objeto na última posição, use Array.push.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.push(car);
Adicionar um novo objeto no meio – Array.splice
Para adicionar um objeto no meio, use Array.splice. Esta função é muito útil, pois também pode remover itens. Cuidado com seus parâmetros:
Array.splice(
{index where to start},
{how many items to remove},
{items to add}
);
Então, se quisermos adicionar o Volkswagen Cabrio vermelho na quinta posição, usaríamos:
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.splice(4, 0, car);
Loop através de uma variedade de objetos
Deixe-me fazer uma pergunta aqui: Por que você deseja percorrer uma matriz de objetos? A razão pela qual estou perguntando é que o loop quase nunca é a principal causa do que queremos alcançar.
O JavaScript fornece muitas funções que podem resolver seu problema sem realmente implementar a lógica em um ciclo geral. Vamos dar uma olhada.
Encontre um objeto em uma matriz por seus valores – Array.find
Digamos que queremos encontrar um carro vermelho. Nós podemos usar a função Array.find.
let car = cars.find(car => car.color === "red");
Esta função retorna o primeiro elemento correspondente:
console.log(car);
// output:
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// }
Também é possível procurar vários valores:
let car = cars.find(car => car.color === "red" && car.type === "cabrio");
Nesse caso, teremos o último carro na lista.
Obter vários itens de uma matriz que corresponda a uma condição – Array.filter
o Array.find A função retorna apenas um objeto. Se queremos comprar todos os carros vermelhos, precisamos usar Array.filter.
let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// },
// {
// color: 'red',
// type: 'cabrio',
// registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 2
// }
// ]
Transformar objetos de uma matriz – Array.map
Isso é algo que precisamos com muita frequência. Transforme uma matriz de objetos em uma matriz de objetos diferentes. Esse é um trabalho para Array.map. Digamos que queremos classificar nossos carros em três grupos com base em seu tamanho.
let sizes = cars.map(car => {
if (car.capacity <= 3){
return "small";
}
if (car.capacity <= 5){
return "medium";
}
return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']
Também é possível criar um novo objeto se precisarmos de mais valores:
let carsProperties = cars.map(car => {
let properties = {
"capacity": car.capacity,
"size": "large"
};
if (car.capacity <= 5){
properties['size'] = "medium";
}
if (car.capacity <= 3){
properties['size'] = "small";
}
return properties;
});
console.log(carsProperties);
// output:
// [
// { capacity: 7, size: 'large' },
// { capacity: 5, size: 'medium' },
// { capacity: 5, size: 'medium' },
// { capacity: 2, size: 'small' },
// ...
// ]
Adicione uma propriedade a todos os objetos de uma matriz - Array.forEach
Mas e se quisermos o objeto carro também? Nesse caso, podemos aprimorar o objeto para uma nova propriedade size. Este é um bom caso de uso para o Array.forEach função.
cars.forEach(car => {
car['size'] = "large";
if (car.capacity <= 5){
car['size'] = "medium";
}
if (car.capacity <= 3){
car['size'] = "small";
}
});
Classificar uma matriz por uma propriedade - Array.sort
Quando terminamos de transformar os objetos, geralmente precisamos classificá-los de uma maneira ou de outra.
Normalmente, a classificação é baseada no valor de uma propriedade que todo objeto possui. Nós podemos usar o Array.sort , mas precisamos fornecer uma função que defina o mecanismo de classificação.
Digamos que queremos classificar os carros com base em sua capacidade em ordem decrescente.
let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
// {
// color: 'purple',
// type: 'minivan',
// registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
// capacity: 7
// },
// {
// color: 'red',
// type: 'station wagon',
// registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
// capacity: 5
// },
// ...
// ]
o Array.sort compara dois objetos e coloca o primeiro objeto em segundo lugar, se o resultado da função de classificação for positivo. Assim, você pode olhar para a função de classificação como se fosse uma pergunta: o primeiro objeto deve ser colocado em segundo lugar?
Sempre inclua o caso de zero sempre que o valor comparado de ambos os objetos for o mesmo para evitar trocas desnecessárias.
Verificando se os objetos na matriz atendem a uma condição - Array.every, Array.includes
Array.every e Array.some é útil quando precisamos verificar cada objeto para uma condição específica.
Temos um cabrio vermelho na lista de carros? Todos os carros são capazes de transportar pelo menos 4 pessoas? Ou mais centrada na web: existe um produto específico no carrinho de compras?
cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true
cars.every(car => car.capacity >= 4);
// output: false
Você pode se lembrar da função Array.includes que é semelhante a Array.some, mas funciona apenas para tipos primitivos.
Sumário
Neste artigo, examinamos as funções básicas que ajudam a criar, manipular, transformar e fazer loop em matrizes de objetos. Eles devem cobrir a maioria dos casos que você encontrará.
Se você tiver um caso de uso que exija funcionalidade mais avançada, consulte este guia detalhado para matrizes ou visite o Referência das escolas W3.
Ou Entre em contato comigo e vou preparar outro artigo 🙂