Tutorial de array de objetos JavaScript - Como criar, atualizar e fazer loop através de objetos usando métodos de array JS

Em média, trabalho com dados JSON 18 vezes por semana. E ainda preciso pesquisar no Google maneiras específicas de manipulá-los quase sempre. E se houvesse um guia definitivo que sempre pudesse lhe dar a resposta?

Neste artigo, mostrarei os fundamentos do trabalho com matrizes de objetos em JavaScript.

Se você já trabalhou com uma estrutura JSON, já trabalhou com objetos JavaScript. Literalmente. JSON significa JavaScript Object Notation.

Criar um objeto é tão simples quanto isto:

{ "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 como esse de um serviço externo. Mas às vezes você precisa criar objetos e seus arrays manualmente. Como eu fiz quando estava criando este e-shop:

Considerando que cada item da lista de categorias se parece com isto em HTML:

Eu não queria que esse código fosse repetido 12 vezes, o que o tornaria impossível de manter.

Criação de uma série de objetos

Mas vamos voltar aos carros. Vamos dar uma olhada neste conjunto de carros:

Podemos representá-lo como um array desta forma:

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 um array já existente.

Adicione 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); 

Adicione 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} ); 

Portanto, se quisermos adicionar o Volkswagen Cabrio vermelho na quinta posição, usaremos:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

Looping por uma série 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 causa primária do que queremos alcançar.

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. 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 pesquisar vários valores:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

Nesse caso, obteremos o último carro da lista.

Obtenha vários itens de uma matriz que corresponda a uma condição - Array.filter

A Array.findfunção retorna apenas um objeto. Se queremos 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 //  } // ] 

Transforme objetos de uma matriz - Array.map

Isso é algo de que precisamos com frequência. Transforme uma série de objetos em uma série de objetos diferentes. Esse é um trabalho para Array.map. Digamos que desejamos classificar nossos carros em três grupos com base em seus tamanhos.

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 cada objeto de uma matriz - Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (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 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

Se você tiver um caso de uso que requeira funcionalidade mais avançada, dê uma olhada neste guia detalhado para arrays ou visite a referência de escolas W3.

Ou entre em contato comigo e prepararei outro artigo :-)