Підручник з масиву об’єктів JavaScript - Як створювати, оновлювати та перебирати об’єкти за допомогою методів масиву JS

В середньому я працюю з даними JSON 18 разів на тиждень. І мені все одно потрібно шукати в Google конкретні способи маніпулювання ними майже щоразу. Що, якби існував остаточний путівник, який завжди міг дати вам відповідь?

У цій статті я покажу вам основи роботи з масивами об’єктів у JavaScript.

Якщо ви коли-небудь працювали зі структурою JSON, ви працювали з об’єктами JavaScript. Цілком буквально. JSON розшифровується як JavaScript Object Notation.

Створення об’єкта просте, як це:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

Цей об’єкт являє собою автомобіль. Типів та кольорів автомобілів може бути багато, кожен об'єкт тоді представляє конкретний автомобіль.

Зараз більшу частину часу ви отримуєте подібні дані із зовнішньої служби. Але іноді потрібно створювати об'єкти та їх масиви вручну. Як і коли я створював цей електронний магазин:

Враховуючи, що кожен елемент списку категорій виглядає так у HTML:

Я не хотів, щоб цей код повторювався 12 разів, що зробило б його неможливим.

Створення масиву об'єктів

Але повернемось до автомобілів. Давайте подивимось на цей набір автомобілів:

Ми можемо представити його як масив таким чином:

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 }, { ... }, ... ] 

Масиви об’єктів не залишаються незмінними постійно. Нам майже завжди потрібно ними маніпулювати. Тож давайте подивимось, як ми можемо додавати об’єкти до вже існуючого масиву.

Додайте новий об’єкт на початку - Array.unshift

Щоб додати об’єкт у першій позиції, використовуйте Array.unshift.

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

В кінці додайте новий об’єкт - Array.push

Щоб додати об’єкт в останню позицію, використовуйте Array.push.

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

Додайте новий об’єкт посередині - Array.splice

Щоб додати об’єкт посередині, використовуйте Array.splice. Ця функція дуже зручна, оскільки вона також може видаляти елементи. Слідкуйте за його параметрами:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

Отже, якщо ми хочемо додати червоний Volkswagen Cabrio на п’яту позицію, ми б використали:

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

Цикл перебору масиву об'єктів

Дозвольте мені задати вам запитання тут: Чому ви хочете прокручувати масив об’єктів? Причиною, яку я запитую, є те, що цикл майже ніколи не є основною причиною того, чого ми хочемо досягти.

JavaScript надає безліч функцій, які можуть вирішити вашу проблему без фактичного впровадження логіки в загальний цикл. Давайте подивимось.

Знайдіть об’єкт у масиві за його значеннями - Array.find

Скажімо, ми хочемо знайти машину червоного кольору. Ми можемо використовувати функцію Array.find.

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

Ця функція повертає перший відповідний елемент:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

Також можна шукати кілька значень:

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

У такому випадку ми отримаємо останню машину у списку.

Отримати з масиву кілька елементів, які відповідають умові - Array.filter

Array.findФункція повертає тільки один об'єкт. Якщо ми хочемо отримати всі червоні машини, нам потрібно скористатися 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 //  } // ] 

Перетворення об'єктів масиву - Array.map

Це те, що нам дуже часто потрібно. Перетворіть масив об’єктів у масив різних об’єктів. Це робота для Array.map. Скажімо, ми хочемо класифікувати наші машини на три групи залежно від їх розміру.

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'] 

Також можливо створити новий об’єкт, якщо нам потрібно більше значень:

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' }, // ... // ] 

Додайте властивість до кожного об’єкта масиву - 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.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)