Tutorial Array of Objects - Πώς να δημιουργήσετε, να ενημερώσετε και να κάνετε Loop Through Objects χρησιμοποιώντας μεθόδους JS Array

Κατά μέσο όρο εργάζομαι με δεδομένα JSON 18 φορές την εβδομάδα. Και πρέπει να κάνω google για συγκεκριμένους τρόπους για να τα χειρίζομαι σχεδόν κάθε φορά. Τι γίνεται αν υπήρχε ένας απόλυτος οδηγός που θα μπορούσε πάντα να σας δώσει την απάντηση;

Σε αυτό το άρθρο, θα σας δείξω τα βασικά στοιχεία της εργασίας με πίνακες αντικειμένων σε JavaScript.

Εάν έχετε εργαστεί ποτέ με μια δομή JSON, έχετε εργαστεί με αντικείμενα JavaScript. Κυριολεκτικά. Το JSON σημαίνει συμβολισμό αντικειμένων JavaScript.

Η δημιουργία ενός αντικειμένου είναι τόσο απλή όσο αυτή:

{ "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

Τι γίνεται όμως αν θέλουμε και το αντικείμενο του αυτοκινήτου; Σε αυτήν την περίπτωση μπορούμε να βελτιώσουμε το αντικείμενο για μια νέα ιδιότητα 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 : 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συγκρίνει δύο αντικείμενα και να βάζει το πρώτο αντικείμενο στο δεύτερο μέρος, αν το αποτέλεσμα της λειτουργίας διαλογής είναι θετική. Έτσι μπορείτε να δείτε τη λειτουργία ταξινόμησης σαν να ήταν μια ερώτηση: Πρέπει το πρώτο αντικείμενο να τοποθετηθεί στη δεύτερη θέση;

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.

Εάν έχετε μια θήκη χρήσης που απαιτεί πιο προηγμένη λειτουργικότητα, ρίξτε μια ματιά σε αυτόν τον λεπτομερή οδηγό για συστοιχίες ή επισκεφθείτε την αναφορά W3 σχολεία

Ή επικοινωνήστε μαζί μου και θα ετοιμάσω ένα άλλο άρθρο :-)