Ας ξεκαθαρίσουμε τη σύγχυση γύρω από τις μεθόδους slice (), splice () και split () σε JavaScript

Οι ενσωματωμένες μέθοδοι JavaScript μας βοηθούν πολύ κατά τον προγραμματισμό, αφού τις κατανοήσουμε σωστά. Θα ήθελα να εξηγήσω τρία από αυτά σε αυτό το άρθρο: τα slice(), splice()και τις split()μεθόδους. Ίσως επειδή η ονομασία τους είναι τόσο παρόμοια, συχνά συγχέονται, ακόμη και μεταξύ έμπειρων προγραμματιστών.

Συμβουλεύω τους μαθητές και τους νεότερους προγραμματιστές να διαβάσουν αυτό το άρθρο προσεκτικά, γιατί αυτές οι τρεις μέθοδοι μπορούν επίσης να ζητηθούν στις ΕΡΓΑΣΙΕΣ ΣΥΝΕΝΤΕΥΞΕΙΣ.

Μπορείτε να βρείτε μια σύνοψη κάθε μεθόδου στο τέλος. Αν προτιμάτε, μπορείτε επίσης να παρακολουθήσετε την παρακάτω έκδοση βίντεο:

Ας ξεκινήσουμε λοιπόν…

Πίνακες JavaScript

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

Μερικές φορές πρέπει να κάνουμε λειτουργίες σε αυτές τις συστοιχίες. Στη συνέχεια, χρησιμοποιούμε ορισμένες μεθόδους JS όπως slice () & splice () . Μπορείτε να δείτε παρακάτω πώς να δηλώσετε έναν πίνακα σε JavaScript:

let arrayDefinition = [];   // Array declaration in JS

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

let array = [1, 2, 3, "hello world", 4.12, true];

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

Φέτα ()

Η μέθοδος slice () αντιγράφει ένα δεδομένο μέρος ενός πίνακα και επιστρέφει το αντιγραμμένο μέρος ως νέο πίνακα. Δεν αλλάζει τον αρχικό πίνακα.

array.slice(from, until);

  • Από: Κόψτε τον πίνακα ξεκινώντας από ένα ευρετήριο στοιχείων
  • Μέχρι: Κόψτε τον πίνακα μέχρι ένα άλλο στοιχείο ευρετηρίου

Για παράδειγμα, θέλω να κόψω τα πρώτα τρία στοιχεία από τον παραπάνω πίνακα. Δεδομένου ότι το πρώτο στοιχείο ενός πίνακα είναι πάντα ευρετηριασμένο στο 0, αρχίζω να κόβω "από" 0.

array.slice(0, until);

Τώρα εδώ είναι το δύσκολο μέρος. Όταν θέλω να κόψω τα τρία πρώτα στοιχεία, πρέπει να δώσω την παράμετρο μέχρι το 3. Η μέθοδος slice () δεν περιλαμβάνει το τελευταίο δεδομένο στοιχείο.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Αυτό μπορεί να δημιουργήσει κάποια σύγχυση. Γι 'αυτό λέω τη δεύτερη παράμετρο «μέχρι».

let newArray = array.slice(0, 3);   // Return value is also an array

Τέλος, αποδίδω το κομμένο Array στη μεταβλητή newArray . Τώρα ας δούμε το αποτέλεσμα:

Σημαντική σημείωση: η μέθοδος Slice () μπορεί επίσης να χρησιμοποιηθεί για χορδές.

Σύνδεση ()

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

Κατάργηση στοιχείων

Για την κατάργηση στοιχείων, πρέπει να δώσουμε την παράμετρο ευρετηρίου και τον αριθμό των στοιχείων που πρέπει να αφαιρεθούν:

array.splice(index, number of elements);

Το ευρετήριο είναι το σημείο εκκίνησης για την αφαίρεση στοιχείων. Τα στοιχεία που έχουν μικρότερο αριθμό ευρετηρίου από το δεδομένο ευρετήριο δεν θα καταργηθούν:

array.splice(2);  // Every element starting from index 2, will be removed

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

Ως δεύτερο παράδειγμα, δίνω τη δεύτερη παράμετρο ως 1, έτσι τα στοιχεία που ξεκινούν από το ευρετήριο 2 θα αφαιρούνται ένα προς ένα κάθε φορά που καλούμε τη μέθοδο splice () :

array.splice(2, 1);

Μετά την 1η κλήση:

Μετά τη 2η κλήση:

Αυτό μπορεί να συνεχιστεί έως ότου δεν υπάρχει πλέον ευρετήριο 2.

Προσθήκη στοιχείων

Για την προσθήκη στοιχείων, πρέπει να τα δώσουμε ως την 3η, 4η, 5η παράμετρο (εξαρτάται από τον αριθμό που πρέπει να προσθέσετε) στη μέθοδο splice () :

array.splice (ευρετήριο, αριθμός στοιχείων, στοιχείο, στοιχείο);

Για παράδειγμα, προσθέτω a και b στην αρχή του πίνακα και δεν καταργώ τίποτα:

array.splice(0, 0, 'a', 'b');

Διαίρεση ( )

Οι μέθοδοι Slice () και splice () είναι για συστοιχίες. Ημέθοδος split () χρησιμοποιείται για συμβολοσειρές . Χωρίζει μια συμβολοσειρά σε υποστρώματα και τις επιστρέφει ως πίνακα. Χρειάζονται 2 παράμετροι και οι δύο είναι προαιρετικές.

string.split(separator, limit);

  • Διαχωριστής: Ορίζει τον τρόπο διαχωρισμού μιας συμβολοσειράς… με κόμμα, χαρακτήρα κ.λπ.
  • Όριο: Περιορίζει τον αριθμό των διαχωρισμών με έναν δεδομένο αριθμό

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

Ας δούμε πώς λειτουργεί.

Πρώτον, μετατρέπουμε τον πίνακα μας σε συμβολοσειρά με τη μέθοδο toString () :

let myString = array.toString();

Τώρα ας χωρίσουμε το myString με κόμματα, να τα περιορίσουμε σε τρία υποστρώματα και να τα επιστρέψουμε ως πίνακα:

let newArray = myString.split(",", 3);

Όπως μπορούμε να δούμε, το myString χωρίζεται με κόμματα. Δεδομένου ότι περιορίζουμε το split σε 3, επιστρέφονται μόνο τα πρώτα 3 στοιχεία.

ΣΗΜΕΙΩΣΗ: Εάν έχουμε μια τέτοια χρήση:array.split("");τότε κάθε χαρακτήρας της συμβολοσειράς θα χωριστεί ως υποστρώματα:

Περίληψη:

Φέτα ()

  • Αντιγράφει στοιχεία από έναν πίνακα
  • Επιστρέφει ως νέο πίνακα
  • Δεν αλλάζει τον αρχικό πίνακα
  • Ξεκινά τον τεμαχισμό από… έως το δεδομένο ευρετήριο: array.slice (από, έως)
  • Το Slice δεν περιλαμβάνει την παράμετρο ευρετηρίου «μέχρι»
  • Μπορεί να χρησιμοποιηθεί τόσο για συστοιχίες όσο και για χορδές

Σύνδεση ()

  • Χρησιμοποιείται για την προσθήκη / αφαίρεση στοιχείων από πίνακα
  • Επιστρέφει έναν πίνακα αφαιρεθέντων στοιχείων
  • Αλλάζει τον πίνακα
  • Για την προσθήκη στοιχείων: array.splice (ευρετήριο, αριθμός στοιχείων, στοιχείο)
  • Για την αφαίρεση στοιχείων: array.splice (ευρετήριο, αριθμός στοιχείων)
  • Μπορεί να χρησιμοποιηθεί μόνο για συστοιχίες

Διαίρεση ( )

  • Χωρίζει μια συμβολοσειρά σε υποστρώματα
  • Επιστρέφει σε έναν πίνακα
  • Παίρνει 2 παραμέτρους, και οι δύο είναι προαιρετικές: string.split (διαχωριστικό, όριο)
  • Δεν αλλάζει την αρχική συμβολοσειρά
  • Μπορεί να χρησιμοποιηθεί μόνο για χορδές

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

Αν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, μη διστάσετε να με ακολουθήσετε στο Youtube !

Ευχαριστούμε που το διαβάσατε!