Ας εξερευνήσουμε το Slice (), το Splice () & το Spread Syntax (…) σε JavaScript

Συνάντησα αυτήν την πρόκληση του FreeCodeCamp και έμεινα για λίγο καιρό σκέφτοντας πώς θα μπορούσα να βρω έναν τρόπο να το λύσω. Ανέφεραν ήδη την επίλυση χρησιμοποιώντας το Slice & Splice. Ήμουν μπερδεμένος εκείνη τη στιγμή πότε να χρησιμοποιήσω το Slice και πότε να χρησιμοποιήσω το Splice.

Εδώ, θα μοιραστώ πώς το έλυσα με αυτές τις μεθόδους.

Τόσο το Slice όσο και το Splice χρησιμοποιούνται για τον χειρισμό συστοιχιών. Ας δούμε πώς το κάνουν.

Φέτα:

Η μέθοδος Slice παίρνει 2 ορίσματα.

1ο επιχείρημα : Καθορίζει από πού πρέπει να ξεκινήσει η επιλογή.

Για παράδειγμα:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

Από το πρώτο ευρετήριο (5) θα επιστρέψει τα στοιχεία.

2ο επιχείρημα : Καθορίζει σε ποιο επίπεδο πρέπει να είναι το τελικό σημείο. Εάν δεν το βάλατε στην παρένθεση ενώ καλείτε τη μέθοδο slice, θα επιστρέψει τα στοιχεία από το ευρετήριο εκκίνησης στο τέλος του πίνακα.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

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

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Σημείωση: Το Slice επιστρέφει πάντα τα επιλεγμένα στοιχεία από τον πίνακα.

Το Slice δεν θα αλλάξει τον πίνακα. Ο πίνακας παραμένει άθικτος. Δείτε το παρακάτω παράδειγμα:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

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

Συνδέω:

Μπορεί να πάρει πολλά επιχειρήματα.

Αυτό σημαίνει,

1ο επιχείρημα : Καθορίζει σε ποια θέση θα πρέπει να προστεθεί / αφαιρεθεί ένα νέο στοιχείο ή ένα υπάρχον στοιχείο. Εάν η τιμή είναι αρνητική, η θέση θα μετρηθεί από το τέλος του πίνακα.

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

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3rd Argument -> nth Argum ent: Η τιμή των στοιχείων που θέλετε να προσθέσετε στον πίνακα.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Μπορεί να πιστεύετε ότι έχουμε προσθέσει «Γεια», «Μεσαίο» στον πίνακα αλλά δεν εμφανίζεται εδώ…. Σωστά?

Ναι, έχουμε παρηγορήσει το arr1.splice (1,2, "Hi", "Medium").

Σημείωση:

  • Το Splice θα επιστρέψει τα αφαιρεθέντα στοιχεία μόνο από τον πίνακα.
  • Το Splice θα αλλάξει τον αρχικό πίνακα
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Σύνταξη Spread:

Ορισμός : Επιτρέπει την επέκταση μιας επανάληψης, όπως μια έκφραση πίνακα ή μια συμβολοσειρά σε μέρη όπου αναμένονται μηδενικά ή περισσότερα ορίσματα (για κλήσεις συνάρτησης) ή στοιχεία (για κυριολεκτικά γράμματα) ή μια έκφραση αντικειμένου να επεκταθεί σε μέρη όπου μηδέν ή περισσότερα αναμένεται ζεύγη κλειδιού-τιμής (για κυριολεκτικά αντικείμενα)

Ας έχουμε ένα παράδειγμα για αυτό:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Θέλω αυτό να βρίσκεται σε έναν ενιαίο πίνακα όπως [5, 1, 3, 6, 7, 8, 9].

Μπορώ να χρησιμοποιήσω αυτό το Spread Syntax για να το λύσω:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

Μια άλλη κύρια χρήση του Spread Syntax είναι κατά την αντιγραφή ενός πίνακα:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

Πρόσθεσα το " 4 " μόνο στο arr2 . Αλλά έκανε και την αλλαγή σε arr.

Μπορούμε να το λύσουμε χρησιμοποιώντας το Spread Syntax ως εξής ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Μπορείτε να ανατρέξετε στην τεκμηρίωση MDN για περισσότερες πληροφορίες σχετικά με το Spread Syntax.

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

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

Η κύρια προϋπόθεση αυτής της πρόκλησης είναι «δεν πρέπει να αλλάξει το arr1 / arr2 μετά την εκτέλεση της λειτουργίας».

Έτσι, δημιούργησε έναν πίνακα αντιγράφων του arr2 και χρησιμοποιώντας τη μέθοδο συναρμολόγησης προσθέστε το arr1 μέσα στο αντίγραφο του arr2 που ονομάζεται array2Copy.

Τελικό συμπέρασμα:

-> Η μέθοδος Slice θα

  • επιστρέψτε τα επιλεγμένα στοιχεία από τον πίνακα
  • πάρτε 2 επιχειρήματα
  • να μην αλλάξει τον αρχικό πίνακα

-> Η μέθοδος συναρμολόγησης θα

  • επιστρέψτε τα αφαιρεθέντα στοιχεία του πίνακα
  • πάρτε πολλά επιχειρήματα
  • τροποποιεί τον αρχικό πίνακα

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

Καλή κωδικοποίηση…!

Συνδεθείτε μαζί μου μέσω Twitter