Средно работя с 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 :-)