Tutorial JavaScript Array of Objects – Como criar, atualizar e fazer loop através de objetos usando métodos JS Array

{  "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: truecars.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 🙂