JavaScripti objektide massiivi õpetus - kuidas luua, värskendada ja sirvida objekte JS massiivi meetodite abil

Keskmiselt töötan JSON-i andmetega 18 korda nädalas. Ja mul on ikkagi vaja peaaegu iga kord konkreetseid viise nendega manipuleerida. Mis oleks, kui oleks olemas ülim juhend, mis võiks alati teile vastuse anda?

Selles artiklis näitan teile JavaScripti objektimassiividega töötamise põhitõdesid.

Kui olete kunagi töötanud JSON-i struktuuriga, olete töötanud JavaScripti objektidega. Päris sõna otseses mõttes. JSON tähistab JavaScripti objektide märkimist.

Objekti loomine on sama lihtne:

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

See objekt tähistab autot. Autosid võib olla palju ja erinevaid värve, iga objekt tähistab siis konkreetset autot.

Nüüd saate enamasti selliseid andmeid väliselt teenuselt. Kuid mõnikord peate objektid ja nende massiivid looma käsitsi. Nagu ma tegin seda e-poodi luues:

Arvestades, et iga kategooria loendi üksus näeb HTML-is välja selline:

Ma ei tahtnud, et seda koodi 12 korda korratakse, mis muudaks selle jätkusuutmatuks.

Objektide massiivi loomine

Kuid tuleme tagasi autode juurde. Vaatame seda autokomplekti:

Saame seda massiivina esitada nii:

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

Objektide massiivid ei jää kogu aeg samaks. Peame peaaegu alati nendega manipuleerima. Nii et vaatame, kuidas saaksime objekte lisada juba olemasolevale massiivile.

Lisage alguses uus objekt - Array.unshift

Esimesele kohale objekti lisamiseks kasutage Array.unshift.

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

Lisage lõppu uus objekt - Array.push

Objekti lisamiseks viimasele positsioonile kasutage Array.push.

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

Lisage keskele uus objekt - Array.splice

Objekti keskele lisamiseks kasutage Array.splice. See funktsioon on väga mugav, kuna see võib ka üksusi eemaldada. Olge selle parameetrite suhtes:

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

Nii et kui me tahame lisada punase Volkswagen Cabrio viiendale positsioonile, kasutaksime järgmist:

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

Loopimine läbi hulga objekte

Lubage mul esitada teile küsimus siin: Miks soovite vaadata hulgaliselt objekte? Põhjus, miks ma küsin, on see, et silmus ei ole peaaegu kunagi peamine põhjus, mida me tahame saavutada.

JavaScript pakub paljusid funktsioone, mis suudavad teie probleemi lahendada ilma loogikat üldises tsüklis tegelikult juurutamata. Vaatame järele.

Leidke massiivist objekt selle väärtuste järgi - Array.find

Oletame, et tahame leida punast värvi auto. Saame funktsiooni kasutada Array.find.

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

See funktsioon tagastab esimese sobiva elemendi:

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

Samuti on võimalik otsida mitut väärtust:

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

Sel juhul saame nimekirja viimase auto.

Hankige massiivist mitu tingimust, mis vastavad tingimusele - Array.filter

Array.findTagastab ainult üks objekt. Kui tahame saada kõik punased autod, peame kasutama 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 //  } // ] 

Massiivi objektide teisendamine - Array.map

Seda vajame väga sageli. Teisendage objektide massiiv erinevate objektide massiiviks. See on töö Array.map. Oletame, et soovime oma autod nende suuruse põhjal kolme rühma liigitada.

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

Samuti on võimalik luua uus objekt, kui vajame rohkem väärtusi:

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

Lisage massiivi igale objektile atribuut - 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.

Kui teil on kasutusjuhtum, mis nõuab täpsemat funktsionaalsust, vaadake seda massiivi üksikasjalikku juhendit või külastage W3 koolide juhendit.

Või võtke minuga ühendust ja ma valmistan veel ühe artikli :-)