Оригінальна публікація: JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods
В середньому я працюю з даними JSON 18 разів на тиждень. І мені досі потрібно майже кожного разу гуглити конкретні способи маніпулювання ними. Лише уявіть, якби був путівник з усіма відповідями.
У цій публікації я покажу основи роботи з масивами об’єктів у JavaScript.
Якщо ви коли-небудь працювали зі структурою JSON, ви працювали з об’єктами JavaScript. Буквально. JSON розшифровується як JavaScript Object Notation.
Створити об’єкт JSON так само просто:
{
"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.
Додавання нового об’єкту в кінець масиву — 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
А якщо нам також потрібен розмір автомобіля? У цьому випадку ми можемо використати в об’єкті властивість size. Це хороший варіант використання для функції Array.forEach.
cars.forEach(car => {
car['size'] = "large";
if (car.capacity <= 5){
car['size'] = "medium";
}
if (car.capacity <= 3){
car['size'] = "small";
}
});Сортування масиву за властивістю — Array.sort
Коли ми закінчили з перетворенням об’єктів, нам зазвичай потрібно відсортувати їх тим чи іншим способом.
Як правило, сортування базується на значенні властивості кожного об’єкта. Ми можемо використовувати функцію Array.sort , але нам також потрібно надати іншу функцію, яка визначає механізм сортування.
Скажімо, ми хочемо відсортувати автомобілі за їхньою містивністю в порядку спадання.
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
// },
// ...
// ]
Функція Array.sort порівнює два об’єкти і ставить перший об’єкт на друге місце, якщо результат функції сортування позитивний. Таким чином, ви можете дивитися на функцію сортування так, ніби це було питання: чи варто розмістити перший об’єкт на другому місці?
Обов’язково враховуйте випадок для нуля, коли порівнювані значення обох об’єктів однакові, щоб уникнути непотрібних замін.
Перевірка відповідності умови об’єктів у масиві — Array.every, Array.includes
Array.every та Array.some стають в нагоді, коли нам просто потрібно перевірити кожен об’єкт на певну умову.
Чи є у нас червоний кабріолет у списку машин? Чи всі автомобілі здатні перевозити щонайменше 4 людини? Або випадок, більш орієнтований на інтернет: чи є певний продукт у кошику?
cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true
cars.every(car => car.capacity >= 4);
// output: false
Ви можете пам’ятати функцію Array.includes, яка схожа до Array.some,
але працює лише для примітивних типів.
Підсумок
У цій статті ми ознайомилися з основними функціями, які допомагають створювати, маніпулювати, перетворювати та переглядати масиви об’єктів. Вони мають охоплювати більшість випадків, на які ви натрапите.
Якщо у вас є потреба у більш розширеній функціональності, перегляньте цей детальний посібник із масивів або відвідайте W3Schools.
Або зв’яжіться зі мною, і я підготую іншу публікацію :-)