Νοημοσύνη δεδομένων Πλάτωνα.
Κάθετη Αναζήτηση & Αι.

Ανεβάστε το Javascript σας – Μέρος 1

Ημερομηνία:

Γεια σας Codementor!
Ξεκινάω αυτή τη σειρά όπου σε κάθε άρθρο θα μοιράζομαι μικρά κομμάτια από την εκπληκτική κωδικοποίηση Javascript για να κάνω τα αποθετήρια σας πιο καθαρά και πιο όμορφα. Απολαμβάνω!

Είναι απλό όπως αυτό:

const array = [1, 2, null, '', 4, 6, 22];
const fullArray = array.filter((a) => a);

Αυτό θα απαλλαγεί από το null και '' στοιχεία.
Αλλά η (a) => a μυρίζει λίγο. Ωστόσο, μπορείτε να κάνετε μόνο αυτό:

const fullArray = array.filter(Boolean);

Και κάνει το ίδιο πράγμα!
Προσοχή, 0 είναι μια ψευδής τιμή και θα αφαιρεθεί, δυστυχώς. Χρησιμοποιήστε το μόνο εάν γνωρίζετε ότι η πηγή δεδομένων σας δεν θα σας δώσει αυτά τα ζητήματα.

Αν δεν ξέρετε τι είναι η Αποδομή Πίνακας, τότε πραγματικά κάντε, ειδικά αν χρησιμοποιείτε React Hooks, επειδή είναι ενσωματωμένο:

const [state, setState] = useState();

Αυτό καταστρέφει την επιστρεφόμενη τιμή του useState, που είναι ένας πίνακας με το πρώτο στοιχείο να είναι μια μεταβλητή και το δεύτερο μια συνάρτηση. Είναι η συνοπτική εκδοχή του λέγειν:

const stateArray = useState();
const state = stateArray[0];
const setState = stateArray[1];

Και μπορείτε να δείτε πόσο πιο εύκολο είναι να κωδικοποιήσετε. Είναι επίσης αισθητικά πιο ελκυστικό κατά τη γνώμη μου.
Αλλά ας πάμε αυτή τη δύναμη στο επόμενο επίπεδο. Ας υποθέσουμε ότι πρέπει να ορίσετε μια δέσμη μεταβλητών στην αρχή του πεδίου εφαρμογής σας, όπως:

let principalValue = 0;
let term = 20;
let interestRate = 12.5;
let monthlyPayment = 5000;

Και ούτω καθεξής. Ναι, μπορείτε να το συντομογραφήσετε ως εξής:

let principalValue = 0,
  term = 20,
  interestRate = 12.5,
  monthlyPayment = 5000;

Αλλά μπορείτε επίσης να κάνετε αυτό:

let [principalValue, term, interestRate, monthlyPayment] = [0, 20, 12.5, 5000];

Το οποίο θεωρώ ότι είναι πολύ πιο συνοπτικό και συνοδεύεται από μερικά έξυπνα χαρακτηριστικά, όπως αν χρειαστεί να μετατρέψετε κάθε τιμή με κάποιο τρόπο, δεν θα χρειαστεί να το κάνετε αυτό:

let principalValue = transform(0),
  term = transform(20),
  interestRate = transform(12.5),
  monthlyPayment = transform(5000);

Μπορείτε απλώς να κάνετε αυτό:

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map(transform);

και η προσθήκη περισσότερων μεταβλητών δεν διογκώνει τον κώδικά σας! Τι γίνεται αν θέλετε μια διαφορετική συνάρτηση μετασχηματισμού για κάθε τιμή; απλός:

const transformMap = {
  0: transform,
  1: transform1,
  2: transform2,
  3: transform3,
};

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map((value, index) => transformMap[index](value));

Εδώ αξιοποιούμε το index όρισμα της μεθόδου χάρτη για να συνδέσετε την τιμή στη σωστή συνάρτηση μετασχηματισμού της.

Η αποδιάρθρωση αντικειμένων είναι εξίσου ισχυρή, ειδικά αν αναζητάτε ένθετες τιμές:

const {
  user: {
    firstName,
    lastName,
    mainInterest: {
      type,
      description,
      category: { name },
    },
  },
} = data;

Τώρα κάθε μεταβλητή name, type, description, firstName, lastName είναι προσβάσιμο. Σίγουρα beats:

const name = user.mainInterest.category.name;
const description = user.mainInterest.description;

Συνοψίζοντας, μου αρέσει πολύ η δύναμη της καταστροφής και θέλω να τη μοιραστώ μαζί σας!

Οπότε το χρησιμοποιώ συνέχεια. Ας πούμε ότι θέλω να διαμορφώσω έναν πίνακα, αλλά θέλω επίσης να λάβω μεταδεδομένα από αυτόν τον πίνακα. Ένας τρόπος για να γίνει κάτι τέτοιο είναι:

const shapedUsers = users.map((user) => shape(user));
const activeUserCount = shapedUsers.filter((user) => user.isActive).length;
const underageUserCount = shapedUsers.filter((user) => user.age < 18).length;
const userDetails = shapedUsers.reduce(
  (details, user) => [...details, user.details],
  [],
);

Αυτό είναι ωραίο, αλλά αν έχω 100 χρήστες, χαρτογραφώ τον πίνακα 000 φορές και αυτό μπορεί να γίνει πολύ αργό. Ένας καλύτερος τρόπος για να το κάνετε (χρησιμοποιώντας την αποδιάρθρωση πίνακα όπως είδαμε παραπάνω!) είναι:

let [activeUserCount, underageUserCount, userDetails] = [0, 0, []];

const shapedUsers = users.map((user) => {
  activeUserCount += user.isActive ? 1 : 0;
  underageUserCount += user.age < 18 ? 1 : 0;
  userDetails.push(user.details);

  return shape(user);
});

Περνάω από τον πίνακα μία φορά και δημιουργώ κάθε μεταβλητή που χρειάζομαι. Στη συνέχεια, μπορώ εύκολα να προσθέσω στον αρχικό πίνακα τιμών και να προσαρμόσω ανάλογα με τις ανάγκες μου.

Μάθαμε μερικά ωραία πράγματα όταν εργαζόμασταν με πίνακες. Ελπίζω να μπορείτε να τα εφαρμόσετε στον δικό σας κώδικα και να εντυπωσιάσετε πραγματικά αυτούς που χρειάζεστε!

Μέχρι την επόμενη φορά, καλή κωδικοποίηση!

~ Σον

spot_img

Τελευταία Νοημοσύνη

spot_img