Водич за ЈаваСцрипт низове објеката - Како створити, ажурирати и прегледати објекте помоћу метода ЈС низа

У просеку радим са ЈСОН подацима 18 пута недељно. И још увек морам скоро сваки пут да потражим одређене начине како да њима манипулишем. Шта ако постоји врхунски водич који би увек могао да вам да одговор?

У овом чланку ћу вам показати основе рада са низовима објеката у ЈаваСцрипт-у.

Ако сте икада радили са ЈСОН структуром, радили сте са ЈаваСцрипт објектима. Прилично дословно. ЈСОН је скраћеница од ЈаваСцрипт Објецт Нотатион.

Стварање објекта је једноставно као ово:

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

Овај објекат представља аутомобил. Аутомобила може бити много врста и боја, сваки предмет тада представља одређени аутомобил.

Сад већину времена овакве податке добијате од спољне услуге. Али понекад је потребно ручно креирати објекте и њихове низове. Као и када сам стварао ову е-продавницу:

Узимајући у обзир да свака ставка листе категорија изгледа овако у ХТМЛ-у:

Нисам желео да се овај код понавља 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.

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

На крају додајте нови објекат - Арраи.пусх

Да бисте додали објекат на последњој позицији, користите Array.push.

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

У средину додајте нови објекат - Арраи.сплице

Да бисте додали објекат у средини, користите Array.splice. Ова функција је врло згодна јер може уклонити и ставке. Пазите на његове параметре:

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

Дакле, ако желимо да додамо црвени Волксваген Цабрио на пету позицију, користићемо:

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

Прелиставање низа објеката

Дозволите ми да вам поставим питање овде: Зашто желите да петљате кроз низ објеката? Разлог који питам је тај што петља готово никада није примарни узрок онога што желимо постићи.

ЈаваСцрипт нуди многе функције које могу решити ваш проблем без стварне примене логике у општем циклусу. Хајде да погледамо.

Пронађите објект у низу према његовим вредностима - Арраи.финд

Рецимо да желимо да пронађемо аутомобил који је црвен. Можемо користити функцију 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.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. Рецимо да желимо да класификујемо своје аутомобиле у три групе на основу њихове величине.

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

Додајте својство сваком објекту низа - Арраи.форЕацх

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.

Ако имате случај употребе који захтева напреднију функционалност, погледајте овај детаљан водич за низове или посетите В3 школску референцу.

Или ступите у контакт са мном и припремићу још један чланак :-)