JavaScript Array Insert - Πώς να προσθέσετε σε μια σειρά με τις λειτουργίες Push, Unshift και Concat

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

Ωστόσο, όσο περισσότερες επιλογές έχετε τόσο πιο συγκεχυμένη μπορεί να είναι να αποφασίσετε ποια θα πρέπει να χρησιμοποιήσετε.

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

Η μέθοδος ώθησης

Η πρώτη και πιθανώς η πιο συνηθισμένη μέθοδος πίνακα JavaScript που θα συναντήσετε είναι το push () . Η μέθοδος push () χρησιμοποιείται για την προσθήκη ενός στοιχείου στο τέλος ενός πίνακα.

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

Ας δούμε το παράδειγμα σε μορφή κώδικα:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Εντάξει, έτσι το push μας έδωσε μια ωραία και απλή σύνταξη για την προσθήκη ενός αντικειμένου στο τέλος του πίνακα μας.

Ας πούμε ότι θέλαμε να προσθέσουμε δύο ή τρία στοιχεία κάθε φορά στη λίστα μας, τι θα κάναμε τότε; Όπως αποδεικνύεται, το push () μπορεί να δεχτεί πολλαπλά στοιχεία για προσθήκη ταυτόχρονα

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

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

Ευτυχώς, το push () έχει τιμή επιστροφής με το μήκος του πίνακα μετά την προσθήκη των στοιχείων μας.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Η μέθοδος Unshift

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

Ήρθε η ώρα να παρουσιάσουμε τον φίλο μας unshift () που μας επιτρέπει να προσθέσουμε στοιχεία στην αρχή του πίνακα μας.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Ίσως παρατηρήσετε στο παραπάνω παράδειγμα ότι, όπως και η μέθοδος push () , το unshift () επιστρέφει το νέο μήκος πίνακα για να το χρησιμοποιήσουμε. Μας δίνει επίσης τη δυνατότητα να προσθέτουμε περισσότερα από ένα στοιχεία κάθε φορά.

Η μέθοδος Concat

Σύντομη για συνένωση (για σύνδεση μαζί), η μέθοδος concat () χρησιμοποιείται για τη σύνδεση δύο (ή περισσότερων) συστοιχιών.

Αν θυμάστε από ψηλά, οι μέθοδοι unshift () και push () επιστρέφουν το μήκος του νέου πίνακα. concat () , από την άλλη πλευρά,θα επιστρέψει έναν εντελώς νέο πίνακα.

Αυτή είναι μια πολύ σημαντική διάκριση και καθιστά το συμπύκνωμα () εξαιρετικά χρήσιμο όταν ασχολείστε με συστοιχίες που δεν θέλετε να κάνετε μετάλλαξη (όπως συστοιχίες αποθηκευμένες σε κατάσταση React).

Εδώ είναι μια αρκετά βασική και απλή περίπτωση:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Ας υποθέσουμε ότι έχετε πολλές συστοιχίες που θέλετε να ενώσετε. Μην ανησυχείτε, υπάρχει η συμπύκνωση () για να σώσετε την ημέρα!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Κλωνοποίηση με Concat

Θυμηθείτε πώς είπα ότι το concat () μπορεί να είναι χρήσιμο όταν δεν θέλετε να μεταλλάξετε τον υπάρχοντα πίνακα σας; Ας ρίξουμε μια ματιά στο πώς μπορούμε να αξιοποιήσουμε αυτήν την ιδέα για να αντιγράψουμε τα περιεχόμενα ενός πίνακα σε έναν νέο πίνακα.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Φοβερός! Μπορούμε ουσιαστικά να "κλωνοποιήσουμε" έναν πίνακα χρησιμοποιώντας το concat () .

Αλλά υπάρχει ένα μικρό «gotcha» σε αυτή τη διαδικασία κλωνοποίησης. Ο νέος πίνακας είναι ένα "ρηχό αντίγραφο" του αντιγραμμένου πίνακα. Αυτό σημαίνει ότι οποιοδήποτε αντικείμενο αντιγράφεται με αναφορά και όχι το πραγματικό αντικείμενο.

Ας ρίξουμε μια ματιά σε ένα παράδειγμα για να εξηγήσουμε πιο καθαρά αυτήν την ιδέα

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Παρόλο που δεν κάναμε απευθείας αλλαγές στον αρχικό μας πίνακα, ο πίνακας επηρεάστηκε τελικά από τις αλλαγές που κάναμε στον κλωνοποιημένο πίνακα μας!

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

TL; Δρ

Όταν θέλετε να προσθέσετε ένα στοιχείο στο τέλος του πίνακα σας, χρησιμοποιήστε το push (). Εάν πρέπει να προσθέσετε ένα στοιχείο στην αρχή του πίνακα σας, δοκιμάστε να καταργήσετε τη μετατόπιση (). Και μπορείςπροσθέστε πίνακες μαζί χρησιμοποιώντας το concat ().

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

Μη διστάσετε να επικοινωνήσετε μαζί μου στο Twitter και να με ενημερώσετε για την αγαπημένη σας μέθοδο συστοιχίας για την προσθήκη στοιχείων σε έναν πίνακα.