10 Σημαντικές λειτουργίες Lodash για προγραμματιστές JavaScript

Για προγραμματιστές JavaScript, το Lodash δεν χρειάζεται συστάσεις. Ωστόσο, η βιβλιοθήκη είναι τεράστια και συχνά αισθάνεται συντριπτική. Οχι πια!

Lodash, Lodash, Lodash. . . απο που να αρχισω! 🤔

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

Επειτα Lodash μπήκε στη σκηνή και ένιωθε σαν μια πλημμύρα που βύθισε τα πάντα. Από τις απλές καθημερινές ανάγκες, όπως η ταξινόμηση έως τους σύνθετους μετασχηματισμούς δομών δεδομένων, το Lodash ήρθε φορτωμένο (υπερφορτωμένο, ακόμη και!) με λειτουργικότητα που μετέτρεψε τη ζωή των προγραμματιστών JS σε απόλυτη ευδαιμονία.

Γεια σου, Lodash!

Και πού είναι σήμερα ο Lodash; Λοιπόν, εξακολουθεί να έχει όλα τα καλούδια που πρόσφερε αρχικά, και στη συνέχεια μερικά, αλλά φαίνεται ότι έχει χάσει το μερίδιο του μυαλού στην κοινότητα JavaScript. Γιατί; Μπορώ να σκεφτώ μερικούς λόγους:

• Ορισμένες λειτουργίες στη βιβλιοθήκη Lodash ήταν (και εξακολουθούν να είναι) αργές όταν εφαρμόζονταν σε μεγάλες λίστες. Αν και αυτό δεν θα επηρέαζε ποτέ το 95% των έργων εκεί έξω, σημαντικοί προγραμματιστές από το υπόλοιπο 5% έδωσαν στον Lodash κακό τύπο και το αποτέλεσμα κατέβηκε στη βάση.
• Υπάρχει μια τάση στο οικοσύστημα JS (μπορεί να πει το ίδιο πράγμα για τους ανθρώπους του Golang) όπου η ύβρις είναι πιο κοινή από όσο χρειάζεται. Έτσι, το να βασίζεσαι σε κάτι σαν το Lodash θεωρείται ανόητο και καταρρίπτεται σε φόρουμ όπως το StackOverflow όταν οι άνθρωποι προτείνουν τέτοιες λύσεις (“Τι; Χρησιμοποιήστε μια ολόκληρη βιβλιοθήκη για κάτι τέτοιο; Μπορώ να συνδυάσω το filter() με το reduce() για να επιτύχω το ίδιο πράγμα σε μια απλή συνάρτηση!»).
• Ο Lodash είναι παλιός. Τουλάχιστον με τα πρότυπα JS. Κυκλοφόρησε το 2012, οπότε μέχρι να γραφτεί, έχουν περάσει σχεδόν δέκα χρόνια. Το API ήταν σταθερό και δεν μπορούν να προστεθούν πολλά συναρπαστικά πράγματα κάθε χρόνο (απλά επειδή δεν χρειάζεται), κάτι που προκαλεί πλήξη στον μέσο προγραμματιστή JS που είναι υπερβολικά ενθουσιασμένος.

Κατά τη γνώμη μου, η μη χρήση του Lodash είναι σημαντική απώλεια για τις βάσεις κώδικα JavaScript. Έχει αποδεδειγμένα λύσεις χωρίς σφάλματα και κομψές για καθημερινά προβλήματα που αντιμετωπίζουμε στη δουλειά και η χρήση του θα κάνει τον κώδικά μας πιο ευανάγνωστο και διατηρήσιμο.

Με αυτά τα λόγια, ας βουτήξουμε σε μερικές από τις κοινές (ή όχι!) λειτουργίες του Lodash και ας δούμε πόσο απίστευτα χρήσιμη και όμορφη είναι αυτή η βιβλιοθήκη.

Κλώνος . . . κατα ΒΑΘΟΣ!

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

let people = [
  {
    name: 'Arnold',
    specialization: 'C++',
  },
  {
    name: 'Phil',
    specialization: 'Python',
  },
  {
    name: 'Percy',
    specialization: 'JS',
  },
];

// Find people writing in C++
let folksDoingCpp = people.filter((person) => person.specialization == 'C++');

// Convert them to JS!
for (person of folksDoingCpp) {
  person.specialization = 'JS';
}

console.log(folksDoingCpp);
// [ { name: 'Arnold', specialization: 'JS' } ]

console.log(people);
/*
[
  { name: 'Arnold', specialization: 'JS' },
  { name: 'Phil', specialization: 'Python' },
  { name: 'Percy', specialization: 'JS' }
]
*/

Παρατηρήστε πώς στην καθαρή μας αθωότητα και παρά τις καλές μας προθέσεις, η αρχική συστοιχία ανθρώπων μεταλλάχθηκε στη διαδικασία (η εξειδίκευση του Arnold άλλαξε από C++ σε JS) — ένα σημαντικό πλήγμα για την ακεραιότητα του υποκείμενου συστήματος λογισμικού! Πράγματι, χρειαζόμαστε έναν τρόπο για να δημιουργήσουμε ένα αληθινό (βαθύ) αντίγραφο του αρχικού πίνακα.

Γεια σου Dave, γνώρισε τον Dave!

Μπορείτε ίσως να υποστηρίξετε ότι αυτός είναι ένας «ανόητος» τρόπος κωδικοποίησης στο JS. Ωστόσο, η πραγματικότητα είναι λίγο περίπλοκη. Ναι, έχουμε διαθέσιμο τον υπέροχο χειριστή αποδομής, αλλά όποιος έχει προσπαθήσει να καταστρέψει πολύπλοκα αντικείμενα και συστοιχίες γνωρίζει τον πόνο. Έπειτα, υπάρχει η ιδέα να χρησιμοποιήσετε τη σειριοποίηση και την αποσειριοποίηση (ίσως JSON) για να επιτύχετε βαθιά αντιγραφή, αλλά αυτό κάνει τον κώδικά σας πιο ακατάστατο για τον αναγνώστη.

Αντίθετα, δείτε πόσο εκπληκτικά κομψή και συνοπτική είναι η λύση όταν το Lodash συνηθίσει:

const _ = require('lodash');

let people = [
  {
    name: 'Arnold',
    specialization: 'C++',
  },
  {
    name: 'Phil',
    specialization: 'Python',
  },
  {
    name: 'Percy',
    specialization: 'JS',
  },
];

let peopleCopy = _.cloneDeep(people);

// Find people writing in C++
let folksDoingCpp = peopleCopy.filter(
  (person) => person.specialization == 'C++'
);

// Convert them to JS!
for (person of folksDoingCpp) {
  person.specialization = 'JS';
}

console.log(folksDoingCpp);
// [ { name: 'Arnold', specialization: 'JS' } ]

console.log(people);
/*
[
  { name: 'Arnold', specialization: 'C++' },
  { name: 'Phil', specialization: 'Python' },
  { name: 'Percy', specialization: 'JS' }
]
*/

Παρατηρήστε πώς η συστοιχία ανθρώπων παραμένει ανέγγιχτη μετά από βαθιά κλωνοποίηση (ο Arnold εξακολουθεί να ειδικεύεται στη C++ σε αυτήν την περίπτωση). Αλλά το πιο σημαντικό, ο κώδικας είναι απλός στην κατανόηση.

Αφαιρέστε τα διπλότυπα από έναν πίνακα

Η κατάργηση των διπλότυπων από έναν πίνακα ακούγεται σαν ένα εξαιρετικό πρόβλημα συνέντευξης/διαγραφής λευκού πίνακα (θυμηθείτε, όταν έχετε αμφιβολίες, ρίξτε ένα hashmap στο πρόβλημα!). Και, φυσικά, μπορείτε πάντα να γράψετε μια προσαρμοσμένη συνάρτηση για να το κάνετε αυτό, αλλά τι γίνεται αν συναντήσετε πολλά διαφορετικά σενάρια για να κάνετε τους πίνακες σας μοναδικούς; Θα μπορούσατε να γράψετε πολλές άλλες λειτουργίες για αυτό (και κινδυνεύετε να αντιμετωπίσετε ανεπαίσθητα σφάλματα), ή θα μπορούσατε απλώς να χρησιμοποιήσετε το Lodash!

Το πρώτο μας παράδειγμα μοναδικών συστοιχιών είναι μάλλον ασήμαντο, αλλά εξακολουθεί να αντιπροσωπεύει την ταχύτητα και την αξιοπιστία που φέρνει το Lodash στο τραπέζι. Φανταστείτε να το κάνετε αυτό γράφοντας μόνοι σας όλη την προσαρμοσμένη λογική!

const _ = require('lodash');

const userIds = [12, 13, 14, 12, 5, 34, 11, 12];
const uniqueUserIds = _.uniq(userIds);
console.log(uniqueUserIds);
// [ 12, 13, 14, 5, 34, 11 ]

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

const _ = require('lodash');

const users = [
  { id: 10, name: 'Phil', age: 32 },
  { id: 8, name: 'Jason', age: 44 },
  { id: 11, name: 'Rye', age: 28 },
  { id: 10, name: 'Phil', age: 32 },
];

const uniqueUsers = _.uniqBy(users, 'id');
console.log(uniqueUsers);
/*
[
  { id: 10, name: 'Phil', age: 32 },
  { id: 8, name: 'Jason', age: 44 },
  { id: 11, name: 'Rye', age: 28 }
]
*/

Σε αυτό το παράδειγμα, χρησιμοποιήσαμε τη μέθοδο uniqBy() για να πούμε στον Lodash ότι θέλουμε τα αντικείμενα να είναι μοναδικά στην ιδιότητα id. Σε μια γραμμή, εκφράσαμε αυτό που θα μπορούσε να χρειαζόταν 10-20 γραμμές και εισαγάγαμε περισσότερα περιθώρια για σφάλματα!

Υπάρχουν πολλά περισσότερα διαθέσιμα πράγματα για να κάνετε τα πράγματα μοναδικά στο Lodash και σας ενθαρρύνω να ρίξετε μια ματιά σε αυτό έγγραφα.

Διαφορά δύο συστοιχιών

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

Γεια σου, Α. Αντίο, Β!

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

const _ = require('lodash');

const allUserIds = [1, 3, 4, 2, 10, 22, 11, 8];
const activeUserIds = [1, 4, 22, 11, 8];

const inactiveUserIds = _.difference(allUserIds, activeUserIds);
console.log(inactiveUserIds);
// [ 3, 2, 10 ]

Και τι γίνεται αν, όπως συμβαίνει σε ένα πιο ρεαλιστικό περιβάλλον, πρέπει να εργαστείτε με μια σειρά αντικειμένων αντί για απλά πρωτόγονα; Λοιπόν, το Lodash έχει μια ωραία μέθοδο differentBy() για αυτό!

const allUsers = [
  { id: 1, name: 'Phil' },
  { id: 2, name: 'John' },
  { id: 3, name: 'Rogg' },
];
const activeUsers = [
  { id: 1, name: 'Phil' },
  { id: 2, name: 'John' },
];
const inactiveUsers = _.differenceBy(allUsers, activeUsers, 'id');
console.log(inactiveUsers);
// [ { id: 3, name: 'Rogg' } ]

Προσεγμένο, σωστά;!

Όπως και η διαφορά, υπάρχουν και άλλες μέθοδοι στο Lodash για κοινές πράξεις συνόλου: ένωση, διασταύρωση κ.λπ.

Πίνακες ισοπέδωσης

Η ανάγκη ισοπέδωσης των συστοιχιών προκύπτει αρκετά συχνά. Μια περίπτωση χρήσης είναι ότι λάβατε μια απάντηση API και πρέπει να εφαρμόσετε κάποιο συνδυασμό map() και filter() σε μια σύνθετη λίστα ένθετων αντικειμένων/συστοιχιών για να αφαιρέσετε, ας πούμε, αναγνωριστικά χρήστη, και τώρα σας μένει συστοιχίες συστοιχιών. Ακολουθεί ένα απόσπασμα κώδικα που απεικονίζει αυτήν την κατάσταση:

const orderData = {
  internal: [
    { userId: 1, date: '2021-09-09', amount: 230.0, type: 'prepaid' },
    { userId: 2, date: '2021-07-07', amount: 130.0, type: 'prepaid' },
  ],
  external: [
    { userId: 3, date: '2021-08-08', amount: 30.0, type: 'postpaid' },
    { userId: 4, date: '2021-06-06', amount: 330.0, type: 'postpaid' },
  ],
};

// find user ids that placed postpaid orders (internal or external)
const postpaidUserIds = [];

for (const [orderType, orders] of Object.entries(orderData)) {
  postpaidUserIds.push(orders.filter((order) => order.type === 'postpaid'));
}
console.log(postpaidUserIds);

Μπορείτε να μαντέψετε πώς μοιάζουν τώρα τα postPaidUserIds; Υπόδειξη: είναι αηδιαστικό!

[
  [],
  [
    { userId: 3, date: '2021-08-08', amount: 30, type: 'postpaid' },
    { userId: 4, date: '2021-06-06', amount: 330, type: 'postpaid' }
  ]
]

Τώρα, εάν είστε λογικό άτομο, δεν θέλετε να γράψετε προσαρμοσμένη λογική για να εξαγάγετε τα αντικείμενα παραγγελίας και να τα απλώσετε όμορφα σε μια σειρά μέσα σε έναν πίνακα. Απλώς χρησιμοποιήστε τη μέθοδο flatten() και απολαύστε τα σταφύλια:

const flatUserIds = _.flatten(postpaidUserIds);
console.log(flatUserIds);
/*
[
  { userId: 3, date: '2021-08-08', amount: 30, type: 'postpaid' },
  { userId: 4, date: '2021-06-06', amount: 330, type: 'postpaid' }
]
*/

Σημειώστε ότι το flatten() πηγαίνει μόνο ένα επίπεδο βαθιά. Αυτό σημαίνει ότι εάν τα αντικείμενά σας έχουν κολλήσει δύο, τρία ή περισσότερα επίπεδα βαθιά, ισοπεδώστε() θα σας απογοητεύσουν. Σε αυτές τις περιπτώσεις, το Lodash έχει τη μέθοδο flattenDeep(), αλλά λάβετε προειδοποίηση ότι η εφαρμογή αυτής της μεθόδου σε πολύ μεγάλες δομές μπορεί να επιβραδύνει τα πράγματα (καθώς στα παρασκήνια, υπάρχει μια αναδρομική λειτουργία στη δουλειά).

Είναι το αντικείμενο/πίνακας κενό;

Χάρη στο πώς λειτουργούν οι “ψευδείς” τιμές και τύποι στο JavaScript, μερικές φορές κάτι τόσο απλό όπως ο έλεγχος για το κενό οδηγεί σε υπαρξιακό τρόμο.

Πώς ελέγχετε εάν ένας πίνακας είναι κενός; Μπορείτε να ελέγξετε αν το μήκος του είναι 0 ή όχι. Τώρα, πώς μπορείτε να ελέγξετε εάν ένα αντικείμενο είναι κενό; Λοιπόν… περίμενε ένα λεπτό! Εδώ εμφανίζεται αυτό το δυσάρεστο συναίσθημα και εκείνα τα παραδείγματα JavaScript που περιέχουν πράγματα όπως [] == false και {} == false ξεκινήστε να κυκλώνετε τα κεφάλια μας. Όταν βρίσκονται υπό πίεση να παραδώσουν ένα χαρακτηριστικό, νάρκες σαν αυτές είναι το τελευταίο πράγμα που χρειάζεστε — θα κάνουν τον κώδικά σας δυσνόητο και θα εισάγουν αβεβαιότητα στη σουίτα δοκιμών σας.

Εργασία με δεδομένα που λείπουν

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

Ας υποθέσουμε ότι λάβαμε το ακόλουθο αντικείμενο ως απόκριση API:

const apiResponse = {
  id: 33467,
  paymentRefernce: 'AEE3356T68',
  // `order` object missing
  processedAt: `2021-10-10 00:00:00`,
};

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

if (
  apiResponse.order &&
  apiResponse.order.payee &&
  apiResponse.order.payee.address
) {
  console.log(
    'The order was sent to the zip code: ' +
      apiResponse.order.payee.address.zipCode
  );
}

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

const zipCode = _.get(apiResponse, 'order.payee.address.zipCode');
console.log('The order was sent to the zip code: ' + zipCode);
// The order was sent to the zip code: undefined

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

const zipCode2 = _.get(apiResponse, 'order.payee.address.zipCode', 'NA');
console.log('The order was sent to the zip code: ' + zipCode2);
// The order was sent to the zip code: NA

Δεν ξέρω για εσάς, αλλά το get() είναι ένα από εκείνα τα πράγματα που φέρνουν δάκρυα ευτυχίας στα μάτια μου. Δεν είναι κάτι φανταχτερό. Δεν υπάρχει σύνταξη ή επιλογές για απομνημόνευση, αλλά κοιτάξτε τον όγκο της συλλογικής ταλαιπωρίας που μπορεί να ανακουφίσει! 😇

Αναπήδηση

Σε περίπτωση που δεν είστε εξοικειωμένοι, το debouncing είναι ένα κοινό θέμα στην ανάπτυξη του frontend. Η ιδέα είναι ότι μερικές φορές είναι ωφέλιμο να ξεκινήσει μια δράση όχι αμέσως αλλά μετά από κάποιο χρονικό διάστημα (γενικά, μερικά χιλιοστά του δευτερολέπτου). Τι σημαίνει αυτό? Εδώ είναι ένα παράδειγμα.

Φανταστείτε έναν ιστότοπο ηλεκτρονικού εμπορίου με μια γραμμή αναζήτησης (καλά, οποιοσδήποτε ιστότοπος/εφαρμογή ιστού αυτές τις μέρες!). Για καλύτερο UX, δεν θέλουμε ο χρήστης να χρειάζεται να πατήσει enter (ή χειρότερα, να πατήσει το κουμπί «αναζήτηση») για να εμφανίσει προτάσεις/προεπισκοπήσεις με βάση τον όρο αναζήτησής του. Αλλά η προφανής απάντηση είναι λίγο φορτωμένη: αν προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων στο onChange() για τη γραμμή αναζήτησης και ενεργοποιήσουμε μια κλήση API για κάθε πάτημα πλήκτρων, θα είχαμε δημιουργήσει έναν εφιάλτη για το backend μας. θα υπάρξουν πάρα πολλές περιττές κλήσεις (για παράδειγμα, αν γίνει αναζήτηση “white carpet brush”, θα υπάρξουν συνολικά 18 αιτήματα!) και σχεδόν όλα αυτά θα είναι άσχετα επειδή η εισαγωγή του χρήστη δεν έχει ολοκληρωθεί.

Η απάντηση βρίσκεται στο debouncing, και η ιδέα είναι η εξής: μην στέλνετε μια κλήση API μόλις αλλάξει το κείμενο. Περιμένετε για κάποιο χρονικό διάστημα (ας πούμε, 200 χιλιοστά του δευτερολέπτου) και εάν μέχρι εκείνη τη στιγμή έχει γίνει άλλο ένα πάτημα πλήκτρων, ακυρώστε την προηγούμενη μέτρηση χρόνου και ξεκινήστε ξανά την αναμονή. Ως αποτέλεσμα, μόνο όταν ο χρήστης κάνει παύση (είτε επειδή σκέφτεται είτε επειδή έχει τελειώσει και περιμένει κάποια απάντηση) στέλνουμε ένα αίτημα API στο backend.

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

const _ = require('lodash');
const axios = require('axios');

// This is a real dogs' API, by the way!
const fetchDogBreeds = () =>
  axios
    .get('https://dog.ceo/api/breeds/list/all')
    .then((res) => console.log(res.data));

const debouncedFetchDogBreeds = _.debounce(fetchDogBreeds, 1000); // after one second
debouncedFetchDogBreeds(); // shows data after some time

Αν σκέφτεστε τη setTimeout() θα έκανα την ίδια δουλειά, λοιπόν, υπάρχουν κι άλλα! Το debounce του Lodash έρχεται με πολλά ισχυρά χαρακτηριστικά. για παράδειγμα, μπορεί να θέλετε να διασφαλίσετε ότι η αναπήδηση δεν είναι αόριστη. Δηλαδή, ακόμα κι αν υπάρχει ένα πάτημα πλήκτρων κάθε φορά που η λειτουργία πρόκειται να ενεργοποιηθεί (ακυρώνοντας έτσι τη συνολική διαδικασία), ίσως θέλετε να βεβαιωθείτε ότι η κλήση API πραγματοποιείται ούτως ή άλλως μετά από, για παράδειγμα, δύο δευτερόλεπτα. Για αυτό, η Lodash debounce() έχει την επιλογή maxWait:

const debouncedFetchDogBreeds = _.debounce(fetchDogBreeds, 150, { maxWait: 2000 }); // debounce for 250ms, but send the API request after 2 seconds anyway

Ρίξτε μια ματιά στον επίσημο έγγραφα για μια βαθύτερη κατάδυση. Είναι γεμάτα από εξαιρετικά σημαντικά πράγματα!

Αφαιρέστε τιμές από έναν πίνακα

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

const greetings = ['hello', 'hi', 'hey', 'wave', 'hi'];
_.pull(greetings, 'wave', 'hi');
console.log(greetings);
// [ 'hello', 'hey' ]

Παρακαλώ σημειώστε δύο πράγματα:

Ο αρχικός πίνακας άλλαξε κατά τη διαδικασία.

Η μέθοδος pull() καταργεί όλες τις παρουσίες, ακόμη και αν υπάρχουν διπλότυπα.

Υπάρχει μια άλλη σχετική μέθοδος που ονομάζεται pullAll() που δέχεται έναν πίνακα ως δεύτερη παράμετρο, καθιστώντας ευκολότερη την αφαίρεση πολλών στοιχείων ταυτόχρονα. Είναι δεδομένο ότι μπορούσαμε απλώς να χρησιμοποιήσουμε το pull() με έναν τελεστή spread, αλλά να θυμάστε ότι το Lodash ήρθε σε μια εποχή που ο τελεστής spread δεν ήταν καν πρόταση στη γλώσσα!

const greetings2 = ['hello', 'hi', 'hey', 'wave', 'hi'];
_.pullAll(greetings2, ['wave', 'hi']);
console.log(greetings2);
// [ 'hello', 'hey' ]

Τελευταίο ευρετήριο ενός στοιχείου

Η εγγενής μέθοδος indexOf() του JavsScript είναι καλή, εκτός από τις περιπτώσεις που σας ενδιαφέρει να σαρώσετε τον πίνακα από την αντίθετη κατεύθυνση! Και πάλι, ναι, θα μπορούσατε απλώς να γράψετε έναν βρόχο μείωσης και να βρείτε το στοιχείο, αλλά γιατί να μην χρησιμοποιήσετε πολύ πιο κομψή τεχνική;

Ακολουθεί μια γρήγορη λύση Lodash που χρησιμοποιεί τη μέθοδο lastIndexOf():

const integers = [2, 4, 1, 6, -1, 10, 3, -1, 7];
const index = _.lastIndexOf(integers, -1);
console.log(index); // 7

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

Φερμουάρ. Ανοίγω φερμουάρ!

Αν δεν έχετε εργαστεί στην Python, το zip/unzip είναι ένα βοηθητικό πρόγραμμα που μπορεί να μην παρατηρήσετε ή να φανταστείτε ποτέ σε ολόκληρη την καριέρα σας ως προγραμματιστής JavaScript. Και ίσως για έναν καλό λόγο: σπάνια υπάρχει τέτοια απελπισμένη ανάγκη για zip/unzip όπως υπάρχει για filter(), κ.λπ. Ωστόσο, είναι ένα από τα καλύτερα λιγότερο γνωστά βοηθητικά προγράμματα και μπορεί να σας βοηθήσει να δημιουργήσετε συνοπτικό κώδικα σε ορισμένες περιπτώσεις .

Σε αντίθεση με ό,τι ακούγεται, το zip/unzip δεν έχει καμία σχέση με τη συμπίεση. Αντίθετα, είναι μια λειτουργία ομαδοποίησης όπου πίνακες του ίδιου μήκους μπορούν να μετατραπούν σε έναν ενιαίο πίνακα πινάκων με στοιχεία στην ίδια θέση συσκευασμένα μαζί (zip()) και πίσω (unzip()). Ναι, ξέρω, είναι θολό να προσπαθείς να αρκεστείς με λέξεις, οπότε ας δούμε έναν κώδικα:

const animals = ['duck', 'sheep'];
const sizes = ['small', 'large'];
const weight = ['less', 'more'];

const groupedAnimals = _.zip(animals, sizes, weight);
console.log(groupedAnimals);
// [ [ 'duck', 'small', 'less' ], [ 'sheep', 'large', 'more' ] ]

Οι αρχικοί τρεις πίνακες μετατράπηκαν σε έναν με δύο μόνο πίνακες. Και κάθε μία από αυτές τις νέες συστοιχίες αντιπροσωπεύει ένα μόνο ζώο με όλα σε ένα μέρος. Έτσι, ο δείκτης 0 μας λέει τι είδους ζώο είναι, ο δείκτης 1 μας λέει το μέγεθός του και ο δείκτης 2 μας λέει το βάρος του. Ως αποτέλεσμα, η εργασία με τα δεδομένα είναι πλέον ευκολότερη. Αφού εφαρμόσετε όποιες λειτουργίες χρειάζεστε στα δεδομένα, μπορείτε να τα χωρίσετε ξανά χρησιμοποιώντας το unzip() και να το στείλετε πίσω στην αρχική πηγή:

const animalData = _.unzip(groupedAnimals);
console.log(animalData);
// [ [ 'duck', 'sheep' ], [ 'small', 'large' ], [ 'less', 'more' ] ]

Το βοηθητικό πρόγραμμα zip/unzip δεν είναι κάτι που θα αλλάξει τη ζωή σας από τη μια μέρα στην άλλη, αλλά θα αλλάξει τη ζωή σας μια μέρα!

Συμπέρασμα 👨‍🏫

(Έβαλα όλο τον πηγαίο κώδικα που χρησιμοποιήθηκε σε αυτό το άρθρο εδώ για να δοκιμάσετε απευθείας από το πρόγραμμα περιήγησης!)

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