Πώς να δημιουργήσετε πολυδιάστατο πίνακα javascript. Αφαίρεση λεπτομερειών πίνακα. Προσθήκη προσαρμοσμένων ιδιοτήτων σε πίνακες

Στη JavaScript, καθώς και σε άλλες γλώσσες προγραμματισμού, χρησιμοποιούνται διαφορετικές μέθοδοι για την εργασία με πίνακες.

Οι μέθοδοι διευκολύνουν τη δημιουργία λογικής και την εφαρμογή της σε ένα σενάριο.

Παρακάτω είναι βασικές μεθόδουςγια εργασία με πίνακες σε JS.

Σπρώξτε

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

Έστω arr = ; arr.push(312); αρχείο καταγραφής κονσόλας (arr); // →

κρότος

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

Έστω arr = ; arr.pop(); αρχείο καταγραφής κονσόλας (arr); // →

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

Έστω img = "https://example.com/img/name.png"; let format = img.split(".").pop(); αρχείο καταγραφής κονσόλας (μορφή); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

μη μετατόπιση

Η μέθοδος unshift() προσθέτει ένα στοιχείο στην αρχή του πίνακα.

Έστω arr = ; arr.unshift(312); αρχείο καταγραφής κονσόλας (arr); // →

βάρδια

Η μέθοδος shift() αφαιρεί το πρώτο στοιχείο από τον πίνακα.

Έστω arr = ; arr.shift(); αρχείο καταγραφής κονσόλας (arr); // → ;

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

διαίρεση

Η μέθοδος split() χρησιμοποιείται για τη μετατροπή μιας συμβολοσειράς σε πίνακα. Το Split διαχωρίζει μια συμβολοσειρά (string) κατά την καθορισμένη παράμετρο.

Έστω str = "Anya, Masha, Sasha, Dasha"; // αυτή είναι μια συμβολοσειρά let arr = str.split(", "); αρχείο καταγραφής κονσόλας (arr); // → ["Anya", "Masha", "Sasha", "Dasha"] είναι ένας πίνακας

Συμμετοχή

Η μέθοδος join() συνδυάζει τα στοιχεία ενός πίνακα σε μια συμβολοσειρά χρησιμοποιώντας τον οριοθέτη που καθορίζεται στην παράμετρο.

Let arr = ["Notpad++", "Sublime", "VSCode"]; // αυτός είναι ένας πίνακας έστω str = arr.join(", "); console.log("Επεξεργαστές κώδικα: " + str); // → "Επεξεργαστές κώδικα: Notpad++, Sublime, VSCode"

φέτα

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

Για παράδειγμα: το slice(3, 7) θα επιστρέψει στοιχεία με δείκτες 3, 4, 5, 6. Το στοιχείο με ευρετήριο 7 δεν θα συμπεριληφθεί στον πίνακα.

Εάν μια παράμετρος με αρνητική τιμή περάσει στο slice(), τότε επιστρέφει έναν νέο πίνακα με τον αριθμό των στοιχείων που καθορίζονται στην παράμετρο, αλλά έχουν ήδη ληφθεί από το τέλος του αρχικού πίνακα.

Η μέθοδος slice δεν τροποποιεί τον αρχικό πίνακα.

Ακολουθούν μερικά παραδείγματα για το πώς λειτουργεί η μέθοδος slice():

Έστω arr = ["A", "B", "C", "D", "E", "F", "G"]; // Επιστρέφει έναν πίνακα που περιέχει στοιχεία με δείκτες από 2 έως 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Επιστρέφει έναν νέο πίνακα που περιέχει στοιχεία με δείκτες από το 3 στο arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Επιστροφή ενός αντιγράφου του αρχικού πίνακα console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Επιστρέφει έναν νέο πίνακα που αποτελείται από τρία τελευταίαστοιχεία της αρχικής console.log(arr.slice(-3)); // → ["E", "F", "G"]

συνδέω

Η μέθοδος splice() τροποποιεί τα περιεχόμενα ενός πίνακα αφαιρώντας υπάρχοντα στοιχεία ή/και προσθέτοντας νέα.

Σύνταξη:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Παράμετροι:

• αρχή- Ευρετήριο από το οποίο θα ξεκινήσει η τροποποίηση του πίνακα. Εάν είναι μεγαλύτερο από το μήκος του πίνακα, ο πραγματικός δείκτης θα οριστεί στο μήκος του πίνακα. Εάν είναι αρνητικό, καθορίζει τον δείκτη του στοιχείου από το τέλος.
• deleteCount- Ένας ακέραιος αριθμός που υποδεικνύει τον αριθμό των παλαιών στοιχείων που πρέπει να αφαιρεθούν από τον πίνακα. Εάν το deleteCount είναι 0, κανένα στοιχείο δεν διαγράφεται. Σε αυτήν την περίπτωση, πρέπει να καθορίσετε τουλάχιστον ένα νέο στοιχείο. Εάν διαγράψετε τον αριθμό περισσότερη ποσότηταστοιχεία που παραμένουν στον πίνακα ξεκινώντας από την αρχή του ευρετηρίου, τότε όλα τα στοιχεία μέχρι το τέλος του πίνακα θα αφαιρεθούν.
• στοιχείο Ν- Προαιρετικές παράμετροι. Στοιχεία για προσθήκη στον πίνακα. Εάν δεν καθορίσετε κανένα στοιχείο, η splice() απλώς θα αφαιρέσει τα στοιχεία από τον πίνακα.

Επιστρεφόμενη αξία

Περιγραφή

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

Let arr = [Μπάρτσα, Σαχτάρ, Μάντσεστερ Γιουνάιτεντ, Μίλαν, Ρεάλ Μαδρίτης, Άγιαξ, Γιουβέντους]; ας nax = arr.splice(2, 3); arr.splice(2, 3); αρχείο καταγραφής κονσόλας (nax); // → ["Man Utd", "Milan", "Real"] console.log(arr); // → ["Bars", "Shakhtar"] arr.splice(1, 0, "Zenith", "CSKA", "Spartak"); αρχείο καταγραφής κονσόλας (arr); // → [Μπάρτσα, Ζενίτ, ΤΣΣΚΑ, Σπαρτάκ, Σαχτάρ]

ΑΝΤΙΣΤΡΟΦΗ

Η μέθοδος reverse() αντιστρέφει τη σειρά των στοιχείων του πίνακα. Ως αποτέλεσμα, το πρώτο στοιχείο του πίνακα γίνεται το τελευταίο και το τελευταίο στοιχείο γίνεται το πρώτο.

Έστω arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

χάρτης

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

Στο παρακάτω παράδειγμα, για κάθε στοιχείο του πίνακα, προσθέστε την τιμή του δείκτη αυτού του στοιχείου (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Έστω arr = ; ας testMap = arr.map((στοιχείο, ευρετήριο) => στοιχείο + ευρετήριο); console.log(testMap); //

ή πολλαπλασιάστε κάθε τιμή του πίνακα, για παράδειγμα, επί 12

Έστω arr = ; ας testMap = arr.map(a => a * 12); console.log(testMap); // →

φίλτρο

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

Για παράδειγμα, φιλτράρουμε τις τιμές του πίνακα από αριθμούς αφήνοντας μόνο αυτούς που είναι μεγαλύτεροι από 21

Έστω arr = ; ας testFilter = arr.filter(στοιχείο => στοιχείο > 21); console.log(testFilter); // →

Λάβετε υπόψη ότι το 21 δεν συμπεριλήφθηκε στο αποτέλεσμα του πίνακα, καθώς η προϋπόθεση ήταν να επιστρέψει κάτι που είναι μεγαλύτερο από 21. Για να συμπεριληφθεί το 21 στον πίνακα, τότε η συνθήκη ορίζεται ως μεγαλύτερη ή ίση με: στοιχείο >= 21

περιορίζω

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

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

Έστω arr = ; έστω summa = arr.reduce((acc, στοιχείο) => acc + στοιχείο); αρχείο καταγραφής κονσόλας (summa); // → 370

είδος

Η μέθοδος sort() χρησιμοποιείται για την ταξινόμηση των στοιχείων ενός πίνακα σύμφωνα με τις δεδομένες παραμέτρους.

Παράδειγμα - πάρτε έναν πίνακα αριθμών και ταξινομήστε τους με αύξουσα σειρά:

Έστω arr = ; έστω testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

περιλαμβάνει

Η μέθοδος include() καθορίζει εάν ένας πίνακας περιέχει ένα συγκεκριμένο στοιχείο, επιστρέφοντας true ή false ανάλογα με αυτό.

Ένα παράδειγμα χρήσης περιλαμβάνει() .

Εδώ είναι μια λογική έκφραση:

Let animal = "σκύλος"? αν (ζώο == "γάτα" || ζώο == "σκύλος" || ζώο == "λιοντάρι" || ζώο == "άλογο") ( // ........ )

χρησιμοποιώντας τη μέθοδο περιλαμβάνει, μπορείτε να το γράψετε ως εξής:

Let animal = "σκύλος"? const animals = ["γάτα", "σκύλος", "λιοντάρι", "άλογο"]; αν (ζώα.περιλαμβάνει(ζώο)) ( // ........... )

Μαθαίνοντας να ευρετηριάζετε πίνακες σε js, να αφαιρείτε και να προσθέτετε τα στοιχεία τους.

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

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

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

Ένα στοιχείο μέσα σε έναν πίνακα μπορεί να είναι οποιουδήποτε τύπου. Επιπλέον, τα στοιχεία ενός πίνακα μπορούν να είναι ΔΙΑΦΟΡΕΤΙΚΟΙ ΤΥΠΟΙ: αριθμοί, συμβολοσειρές, booleans, ακόμη και αντικείμενα ή άλλοι πίνακες.

Η σειρά των στοιχείων του πίνακα βασίζεται στο 0. Αποδεικνύεται ότι ο πίνακας θα έχει πάντα έναν δείκτη μετατόπισης κατά ένα: το πρώτο στοιχείο θα έχει δείκτη 0 , το δεύτερο θα έχει δείκτη 1 και ούτω καθεξής.

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

Δημιουργία (Δήλωση) Πίνακα

Οι πίνακες είναι πολύ βολικοί γιατί μπορείτε να αποθηκεύσετε όσα δεδομένα χρειάζεστε σε αυτούς. Το μέγιστο δυνατό μέγεθος του πίνακα js είναι 2 32 στοιχεία.

Πρέπει να πούμε στη JavaScript ότι θέλουμε να δημιουργήσουμε έναν πίνακα. Υπάρχουν δύο επιλογές για αυτό: η τιμή σε αγκύλες ή λέξη-κλειδίνέος.

Συντομογραφία: χρήση αγκύλων

Μια λίστα τιμών διαχωρισμένη με κόμματα που περικλείεται σε αγκύλες.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Το περιεχόμενο του πίνακα καθορίζεται από το τι βρίσκεται ανάμεσα στις αγκύλες. Κάθε τιμή διαχωρίζεται με κόμμα.

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

Για να δηλώσετε έναν κενό πίνακα, αφήστε κενές τις παρενθέσεις:

var myArray = ;

Εκτενής Σημείωση: Χρησιμοποιώντας τον Κατασκευαστή Array().

var lostArray = νέος πίνακας ("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = νέος πίνακας ("Laura", 2, ["Bob", "Leland", "Dale"]);

Η νέα λέξη-κλειδί λέει στη JavaScript να δημιουργήσει έναν νέο πίνακα οι τιμές του οποίου μεταβιβάζονται ως παράμετροι.

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

var myArray = νέος πίνακας(80);

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

Δήλωση κενού πίνακα:

var myArray = new Array();

Πρόσβαση σε στοιχεία πίνακα

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

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; αρχείο καταγραφής κονσόλας (myArray); // Εκτυπώνει το "Jack" console.log(myArray); // Εκτυπώνει "Desmond"

Ένας πίνακας μπορεί να έχει πολλαπλά επίπεδα, που σημαίνει ότι κάθε στοιχείο μπορεί να είναι από μόνο του ένας πίνακας. Το αποτέλεσμα είναι ένας δισδιάστατος πίνακας js. Πώς να αναφερθείτε σε αυτές τις συστοιχίες, οι οποίες βρίσκονται μέσα σε άλλες - " πολυδιάστατους πίνακες»?

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

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Μπορεί να αναπαρασταθεί ως εξής:

Για να ανατρέξετε στην τιμή "Lisa":

varlisa = FamilyArray; αρχείο καταγραφής κονσόλας (lisa); // εκτυπώνει "Lisa"

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

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

Καταλάβαμε πώς να αποκτήσουμε πρόσβαση στα στοιχεία ενός πίνακα χρησιμοποιώντας τους αντίστοιχους δείκτες τους. Ομοίως, μπορείτε να προσθέσετε (ή να αλλάξετε) στοιχεία δηλώνοντας, για παράδειγμα:

var myArray = [ "Kate", "Sun"]; myArray = "Ιουλιέτα"; αρχείο καταγραφής κονσόλας (myArray); // Εκτυπώνει "Kate, Sun, Juliet"

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

var myArray = ["Kate", "Sun"]; myArray = "Ιουλιέτα"; console.log(myArray.length); // Εκτυπώνει το "6" console.log(myArray); // Εκτυπώνει ["Kate", "Sun", undefined, undefined, undefined, "Juliet"]

Μπορείτε να μάθετε πόσο μήκος είναι ένας πίνακας js χρησιμοποιώντας την ιδιότητα length. Στο παραπάνω παράδειγμα, υπάρχουν έξι στοιχεία στον πίνακα και σε τρία από αυτά δεν έχει δοθεί τιμή - επισημαίνονται ως μη καθορισμένα .

μέθοδος push().

Χρησιμοποιώντας τη μέθοδο push(), μπορείτε να προσθέσετε ένα ή περισσότερα στοιχεία στον πίνακα js. Η Push() δέχεται απεριόριστο αριθμό παραμέτρων, όλες θα προστεθούν στο τέλος του πίνακα.

var myArray = [ "Kate", "Sut"]; myArray.push("Ιουλιέτα"); // Προσθέτει το στοιχείο "Juliet" στο τέλος του πίνακα myArray.push("Libby", "Shannon");// Προσθέτει τα στοιχεία "Libby" και "Shannon" στο τέλος του πίνακα console.log(myaArray ) // Εκτυπώνει ["Kate", "Sun", "Juliet", "Libby", "Shannon"]

μέθοδος unshift().

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

var myArray = [ "Kate", "Sun"]; myArray.unshift("Ιουλιέτα"); // Προσθέτει το στοιχείο "Juliet" στην αρχή του πίνακα myArray.unshift("Libby", "Shannon"); // Προσθέτει τα στοιχεία "Libby" και "Shannon" στην αρχή του πίνακα console.log(myArray); // Έξοδοι ["Libby", "Shannon", "Juliet", "Kate", "Sun"]

Αφαίρεση στοιχείων πίνακα

μεθόδους pop() και shift().

Οι μέθοδοι pop() και shift() αφαιρούν το τελευταίο και το πρώτο στοιχείο ενός πίνακα, αντίστοιχα:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Αφαιρεί το στοιχείο "Kate" myArray.shift(); // Καταργεί το στοιχείο "Jack" console.log(myArray); // Έξοδοι ["Sawyer", "John", "Desmond"]

μέθοδος splice().

Χρησιμοποιώντας τη μέθοδο splice(), μπορείτε να αφαιρέσετε ή να προσθέσετε στοιχεία σε έναν πίνακα, ενώ προσδιορίζετε τον ακριβή δείκτη των στοιχείων.

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

var fruitArray = ["μήλο", "ροδάκινο", "πορτοκάλι", "λεμόνι", "λάιμ", "κεράσι"]; fruitArray.splice(2, 0, "melon", "banana"); console.log(fruitArray); // Έξοδοι ["μήλο", "ροδάκινο", "πεπόνι", "μπανάνα", "πορτοκάλι", "λεμόνι", "λάιμ", "κεράσι"]

Η πρώτη παράμετρος της μεθόδου splice() είναι ένας δείκτης. Καθορίζει σε ποια θέση να προσθέσετε/αφαιρέσετε στοιχεία. Στο παράδειγμά μας, επιλέξαμε ευρετήριο 2 ( σημαίνει "πορτοκαλί").

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

Οι παρακάτω παράμετροι είναι προαιρετικές. Προσθέτουν νέες τιμές στον πίνακα. Στην περίπτωσή μας, πρέπει να προσθέσουμε "πεπόνι" και "μπανάνα", ξεκινώντας από τον δείκτη 2.

Οι πίνακες μπορούν να χειριστούν με διάφορες μεθόδουςπαρέχεται από τον κατασκευαστή Array.

μεθόδους pop/push και shift/unshift

Εξετάστε τις μεθόδους pop() και push(). Αυτές οι μέθοδοι επιτρέπουν στους πίνακες να αντιμετωπίζονται σαν στοίβες. Μια στοίβα είναι μια δομή δεδομένων στην οποία η πρόσβαση σε στοιχεία οργανώνεται σύμφωνα με την αρχή LIFO (Αγγλικά last in - first out, "last in - first out"). Η αρχή της στοίβας μπορεί να συγκριθεί με μια στοίβα πιάτων: για να βγάλετε τη δεύτερη από την κορυφή, πρέπει να αφαιρέσετε την επάνω. Πώς λειτουργεί φαίνεται στο σχήμα:

Ας επιστρέψουμε λοιπόν στις μεθόδους push() και pop(). Η μέθοδος push() προσθέτει ένα ή περισσότερα νέα στοιχεία στο τέλος του πίνακα και επιστρέφει το νέο του μήκος. Η μέθοδος pop() αφαιρεί το τελευταίο στοιχείο του πίνακα, μειώνει το μήκος του πίνακα και επιστρέφει την τιμή που αφαίρεσε. Σημειώστε ότι και οι δύο αυτές μέθοδοι τροποποιούν τον πίνακα στη θέση του αντί να δημιουργούν ένα τροποποιημένο αντίγραφό του.

var foo = ; // foo: foo.push(1,2); // foo: Επιστρέφει 2 foo.pop(); // foo: Επιστρέφει 2 foo.push(3); // foo: Επιστρέφει 2 foo.pop(); // foo: Επιστρέφει 3 foo.push(); // foo: ] Επιστρέφει 2 foo.pop() // foo: Επιστρέφει το foo.pop(); // foo: Επιστρέφει 1 var fruits = ["pears", "bananas", "apples"]; var picked = fruits.pop(); document.write("Μα μάπησες " + διάλεξε); Προσπαθήστε "

Οι μέθοδοι shift() και unshift() συμπεριφέρονται σαν pop() και push(), εκτός από το ότι εισάγουν και αφαιρούν στοιχεία στην αρχή του πίνακα. Η μέθοδος unshift() μετατοπίζει τα υπάρχοντα στοιχεία προς υψηλότερους δείκτες για να δημιουργήσει χώρο για νέα στοιχεία, προσθέτει ένα ή περισσότερα στοιχεία στην αρχή του πίνακα και επιστρέφει το νέο μήκος του πίνακα. Η μέθοδος shift() αφαιρεί το πρώτο στοιχείο ενός πίνακα και επιστρέφει την τιμή του, μετατοπίζοντας όλα τα επόμενα στοιχεία σε κατάληψη ελεύθερος χώροςστην αρχή του πίνακα.

Var f = ; // f: f.unshift(1); // f: Επιστρέφει: 1 f.unshift(22); // f: Επιστρέφει: 2 f.shift(); // f: Επιστροφές: 22 f.unshift(3,); // f:,1] Επιστρέφει: 3 f.shift(); // f:[,1] Επιστρέφει: 3 f.shift(); // f: Επιστρέφει: f.shift(); // στ: Επιστροφές: 1

μέθοδος ένωσης

Η μέθοδος Array.join() χρησιμοποιείται για τη σύνδεση στοιχείων πίνακα σε μία συμβολοσειρά. Μπορείτε να περάσετε ένα προαιρετικό όρισμα συμβολοσειράς στη μέθοδο, το οποίο θα χρησιμοποιηθεί για τον διαχωρισμό των στοιχείων στη συμβολοσειρά. Εάν ο διαχωριστής δεν έχει καθοριστεί, τότε ο προεπιλεγμένος χαρακτήρας οριοθέτησης θα είναι κόμμα όταν καλείται η μέθοδος.

Var a = ["Άνεμος","Βροχή","Φωτιά"]; var myVar1 = a.join(); //"Wind,Rain,Fire" var myVar2 = a.join(", "); //"Άνεμος, Βροχή, Φωτιά" var myVar3 = a.join(" + "); //"Wind + Rain + Fire" document.write(myVar1 + "
" + myVar2 + "
" + myVar3); Δοκιμάστε »

Η μέθοδος Array.join() είναι το αντίστροφο της μεθόδου String.split(), η οποία δημιουργεί έναν πίνακα χωρίζοντας μια συμβολοσειρά σε κομμάτια.

αντίστροφη μέθοδος

Η μέθοδος Array.reverse() αντιστρέφει τη σειρά των στοιχείων σε έναν πίνακα και επιστρέφει έναν πίνακα με τα στοιχεία αναδιαταγμένα. Αυτή η μέθοδος δεν δημιουργεί έναν νέο πίνακα με αναδιατεταγμένα στοιχεία, αλλά τα αναδιατάσσει σε έναν ήδη υπάρχοντα πίνακα.

Var myArr = ["ένα", "δύο", "τρία"]; document.write(myArr.reverse()); Προσπαθήστε "

μέθοδος συνένωσης

Η μέθοδος Array.concat() δημιουργεί και επιστρέφει έναν νέο πίνακα που περιέχει τα στοιχεία του αρχικού πίνακα στον οποίο κλήθηκε η μέθοδος concat(), συμπληρώνεται διαδοχικά με τις τιμές όλων των ορισμάτων που μεταβιβάζονται στη μέθοδο concat(). Εάν κάποιο από αυτά τα ορίσματα είναι το ίδιο ένας πίνακας, τότε όλα τα στοιχεία του θα προστεθούν. Τα ονόματα των πινάκων χρησιμοποιούνται ως ορίσματα και καθορίζονται με τη σειρά με την οποία τα στοιχεία τους πρέπει να συνενωθούν.

Var a = ; a.concat(4, 5) //Επιστρέφει a.concat(); //same - επιστρέφει a.concat(,) //Επιστρέφει

μέθοδος ταξινόμησης

Η μέθοδος Array.sort() ταξινομεί τα στοιχεία ενός πίνακα στη θέση τους και επιστρέφει τον ταξινομημένο πίνακα. Εάν η μέθοδος sort() καλείται χωρίς όρισμα, ταξινομεί τα στοιχεία του πίνακα αλφαβητικά (μετατρέποντάς τα προσωρινά σε συμβολοσειρές για λόγους σύγκρισης). Ως όρισμα, η μέθοδος sort() μπορεί να λάβει μια συνάρτηση σύγκρισης που καθορίζει τη σειρά ταξινόμησης των στοιχείων.

Var a = ["Ακτινίδια", "Πορτοκάλια", "Αχλάδια"]; a.sort(); vars = a.join(", "); //Πορτοκάλια, Αχλάδια, Ακτινίδια document.write(s); //παράδειγμα με αριθμούς var myArr = ; myArr.sort(); document.write(myArr); //1,10,2 Δοκιμάστε »

Πιθανότατα περιμένατε να δείτε ένα ελαφρώς διαφορετικό αποτέλεσμα από την ταξινόμηση των αριθμών. Αυτή η ταξινόμηση συμβαίνει επειδή η μέθοδος sort() ταξινομεί τα στοιχεία μετατρέποντάς τα σε συμβολοσειρές. Επομένως, η σειρά που παίρνουν είναι συμβολοσειρά - τελικά, "10"

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

• Εάν το πρώτο όρισμα πρέπει να προηγείται του δεύτερου, η συνάρτηση σύγκρισης επιστρέφει έναν αρνητικό αριθμό (αν α
• Εάν το πρώτο όρισμα πρέπει να ακολουθεί το δεύτερο, τότε η συνάρτηση σύγκρισης επιστρέφει έναν θετικό αριθμό (αν a > b)
• Εάν δύο τιμές είναι ισοδύναμες (δηλαδή, η σειρά τους δεν είναι σημαντική), η συνάρτηση σύγκρισης επιστρέφει 0 (αν a == b)

Για σύγκριση, η συνάρτηση χρησιμοποιεί στοιχεία πίνακα ως ορίσματά της:

Η συνάρτηση foo(a,b) ( //καθορίζει τη συνάρτηση δοκιμής εάν (a β) επιστρέφει 1, επιστρέφει 0; //αν a == b ) var a = ; a.sort(foo); //μόνο το όνομα της συνάρτησης μεταβιβάζεται ως όρισμα document.write(a.join(", ")); //συντόμευση το ίδιο var a = ; a.sort(function(a,b) ( //χρησιμοποιήστε ανώνυμη συνάρτηση return a - b; //function επιστρέφει 0 )); document.write(a); //1,2,5,10 Δοκιμάστε »

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

Σημείωση: Εάν υπάρχουν απροσδιόριστα στοιχεία στον πίνακα, αυτά μετακινούνται στο τέλος του πίνακα.

μέθοδος φέτας

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

Σύνταξη μεθόδου:

array_name.slice(αρχή, τέλος);

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

Var arr = ; arr slice(0,3); //Επιστρέφει arr.slice(3); //Επιστρέφει arr.slice(1,-1); //Επιστρέφει arr.slice(-3,-2); //Επιστροφές

μέθοδος συναρμογής

Η μέθοδος Array.splice() είναι μια γενική μέθοδος για εργασία με πίνακες. Τροποποιεί τον πίνακα στη θέση του αντί να επιστρέφει έναν νέο τροποποιημένο πίνακα όπως κάνουν οι μέθοδοι slice() και concat(). Η μέθοδος splice μπορεί να αφαιρέσει στοιχεία από έναν πίνακα, να εισαγάγει νέα στοιχεία, να αντικαταστήσει στοιχεία - ένα κάθε φορά και ταυτόχρονα. Επιστρέφει έναν πίνακα που αποτελείται από τα στοιχεία που αφαιρέθηκαν, εάν κανένα από τα στοιχεία δεν αφαιρέθηκε, θα επιστρέψει έναν κενό πίνακα.

Σύνταξη μεθόδου:

array_name.splice(index , count, elem1, ..., elemN);

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

Var φρούτα = ["πορτοκάλια", "μήλα", "αχλάδια", "σταφύλια"]; var deleted = fruits.splice(2,2); //επιστρέφει ["αχλάδια", "σταφύλια"] document.write(deleted); var arr = ; arr.splice(4); // Επιστροφές ; ο πίνακας έγινε: arr.splice(1,2); // Επιστροφές ; ο πίνακας έγινε: arr.splice(1,1); // Επιστροφές ; ο πίνακας έγινε: Δοκιμάστε »

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

Var φρούτα = ["πορτοκάλια", "μήλα"]; fruits.splice(2,0, "καρπούζια"); //επιστρέφει το document.write(fruits); //έγινε ["πορτοκάλια", "μήλα", "καρπούζια"] var arr = ; arr.splice(2,0"a","b"); // Επιστροφές ; έγινε arr.splice(2,2,); //Επιστρέφει ["a","b"]; έγινε ,3,4,5] Δοκιμάστε »

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

μέθοδος toString

Η μέθοδος toString() μετατρέπει τα στοιχεία ενός πίνακα σε συμβολοσειρά χρησιμοποιώντας κόμμα ως χαρακτήρα οριοθέτησης.

Var arr = ["Γάλα","Ψωμί","Μπισκότα"]; var food = arr.toString(); document.write(food); //Δοκιμάστε γάλα, ψωμί, μπισκότο »

Σημειώστε ότι η μέθοδος επιστρέφει την ίδια συμβολοσειρά με τη μέθοδο join() όταν καλείται χωρίς ορίσματα.

indexOf και lastIndexOf

Η μέθοδος indexOf επιστρέφει τον δείκτη του στοιχείου του οποίου η τιμή είναι ίση με την τιμή που μεταβιβάστηκε στη μέθοδο ως όρισμα.

Σύνταξη των μεθόδων indexOf() και lastIndexOf():

array_name.indexOf(search_element, index) array_name.lastIndexOf(search_element, index)

Το πρώτο όρισμα της μεθόδου καθορίζει την τιμή του στοιχείου του οποίου το ευρετήριο πρέπει να βρεθεί, το δεύτερο όρισμα (προαιρετικό) υποδεικνύει το ευρετήριο από το οποίο θα ξεκινήσει η αναζήτηση. Εάν υπάρχουν πολλές ίδιες εμφανίσεις, επιλέγεται ο μικρότερος (πρώτος) δείκτης. Εάν το στοιχείο με την επιθυμητή τιμή δεν βρεθεί, η μέθοδος θα επιστρέψει -1. Μέσα στη μέθοδο, χρησιμοποιείται μια αυστηρή σύγκριση (===) για την αναζήτηση.

Var a = ; a.indexOf(3); //επιστρέφει 2 a.indexOf(3,4); //επιστρέφει 6 a.indexOf(35); //επιστρέφει -1: κανένα στοιχείο με αυτήν την τιμή a.indexOf(2); // ένας

Η μέθοδος lastIndexOf() επιστρέφει επίσης το ευρετήριο του στοιχείου του οποίου η τιμή είναι ίση με την τιμή που μεταβιβάστηκε στη μέθοδο ως όρισμα. Η μόνη διαφορά είναι ότι η μέθοδος lastIndexOf() επιλέγει τον υψηλότερο (τελευταίο) δείκτη.

Var a = ; a.lastIndexOf(3); //επιστρέφει 7 a.lastIndexOf(35); //επιστρέφει -1: κανένα στοιχείο με αυτήν την τιμή a.lastIndexOf(2); // 6

Μέθοδοι Iterator

Οι μέθοδοι που περιγράφονται παρακάτω είναι επαναληπτικές. Σε όλα σύγχρονα προγράμματα περιήγησηςγια να εργαστείτε με πίνακες, υπάρχουν μέθοδοι που έχουν σχεδιαστεί για να επαναλαμβάνονται πάνω από στοιχεία και να εκτελούν διάφορες ενέργειες σε αυτά. Αυτές είναι οι μέθοδοι forEach(), map(), filter(), every(), some, reduce() και reduceRight().

Επαναλαμβάνουν τα στοιχεία του πίνακα από το 0 στο μήκος - 1 και, εάν το στοιχείο υπάρχει, το μεταβιβάζουν στη συνάρτηση χειριστή επανάκλησης.

για κάθε

Σύνταξη μεθόδου:

array_name.forEach(callback, thisArg)

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

Var arr = ; συνάρτηση foo(value) (var sum = τιμή * this; return document.write(sum + "
"); ) arr.forEach(foo, 5); //δεύτερο όρισμα θα μεταβιβαστεί ως τιμή αυτού του //παραδείγματος με τρεις παραμέτρους var a = ; a.forEach(function(el, idx, a) ( document. write( "a["+idx+"] = "+el+" στο ["+a+"]
"); )); Προσπαθήστε "

φίλτρο

Σύνταξη μεθόδου:

array_name.filter (επιστροφή κλήσης, αυτό το αντικείμενο)

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

Η συνάρτηση isBig(στοιχείο, δείκτης, πίνακας) ( //επιστρέφει αριθμούς που είναι μεγαλύτεροι ή ίσοι με 10 επιστρέφει (στοιχείο >= 10); //αν η τιμή του στοιχείου είναι μεγαλύτερη ή ίση με 10, η παράσταση θα επιστρέψει true ) var filtered = .filter(isBig) ; //φιλτραρισμένο

χάρτης

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

Var a = ; var b = a.map(function(item, idx, arr) ( return item * item; )); // β =

κάθε και μερικά

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

Η μέθοδος some() επιστρέφει true εάν, κατά τη δοκιμή στην καθορισμένη συνάρτηση, ένα ή περισσότερα στοιχεία επιστρέψουν true.

Var a = ; a.every(function(x) ( return x 10; )) //true: one number > 10

μείωση και μείωσηΔικαίωμα

Σύνταξη μεθόδου:

array_name.reduce(callback, initialValue) array_name.reduceRight(callback, initialValue)

Η μέθοδος reduce() εφαρμόζει την καθορισμένη συνάρτηση (επανάκληση) σε δύο τιμές του πίνακα ταυτόχρονα, κυκλώνοντας τα στοιχεία από αριστερά προς τα δεξιά, διατηρώντας παράλληλα το ενδιάμεσο αποτέλεσμα.

Ορίσματα συνάρτησης επανάκλησης: (previousValue, currentItem, index, array)

• previousValue - το αποτέλεσμα επιστροφής της συνάρτησης επανάκλησης (γνωστό και ως ενδιάμεσο αποτέλεσμα)
• currentItem - το τρέχον στοιχείο του πίνακα (τα στοιχεία ταξινομούνται με τη σειρά από αριστερά προς τα δεξιά)
• δείκτης - ο δείκτης του τρέχοντος στοιχείου
• πίνακας - ο πίνακας προς επεξεργασία

αρχικήΤιμή (τιμή αρχικοποίησης) - το αντικείμενο που χρησιμοποιείται ως το πρώτο όρισμα της πρώτης κλήσης στη συνάρτηση επανάκλησης. Με απλά λόγια, η τιμή του previousValue στην πρώτη κλήση είναι ίση με την αρχικήΤιμή. Εάν δεν υπάρχει αρχικήΤιμή, τότε ισούται με το πρώτο στοιχείο του πίνακα και η επανάληψη ξεκινά από το δεύτερο:

Var a = ; συνάρτηση foo(prevNum,curNum) ( sum = prevNum + curNum; alert(sum); return sum; ) var result = a.reduce(foo, 0); document.write(result); Προσπαθήστε "

Ας δούμε πώς λειτουργεί αυτό το παράδειγμα. Τα πρώτα ορίσματα της συνάρτησης foo είναι:

• prevNum = 0 (καθώς η αρχική τιμή είναι 0)
• curNum = 1 (το τρέχον στοιχείο είναι το 1ο στοιχείο του πίνακα)

Το 1 προστίθεται στον αριθμό 0. Αυτό το αποτέλεσμα (άθροισμα: 1) θα μεταβιβαστεί ως prevNum την επόμενη φορά που θα εκτελεστεί η συνάρτηση. Και ούτω καθεξής μέχρι να φτάσει το τελευταίο στοιχείο. Το αποτέλεσμα που επιστρέφεται είναι το άθροισμα από την τελευταία εκτέλεση, το οποίο είναι 15 (1+2+3+4+5).

Η μέθοδος reduceRight λειτουργεί παρόμοια με τη μέθοδο μείωσης, αλλά επαναλαμβάνεται πάνω από τον πίνακα από δεξιά προς τα αριστερά:

Var a = ["h", "o", "m", "e"]; γραμμή συνάρτησης(prevStr, curItem) (επιστροφή prevStr + curItem; ) document.write(a.reduceRight(bar)); //emoh

• Μετάφραση

• I. Επανάληψη σε πραγματικούς πίνακες
  1. για κάθε μέθοδο και σχετικές μεθόδους
  2. για βρόχο
  3. Σωστή χρήσηγια...σε βρόχο
  4. for...of loop (σιωπηρή χρήση επαναλήπτη)
  5. Ρητή χρήση επαναληπτικού
• 1. Χρήση μεθόδων επανάληψης πραγματικού πίνακα
  2. Μετατροπή σε πραγματικό πίνακα
  3. Σημείωση για αντικείμενα χρόνου εκτέλεσης

I. Επανάληψη σε πραγματικούς πίνακες

Υπάρχουν επί του παρόντος τρεις τρόποι επανάληψης πάνω από τα στοιχεία ενός πραγματικού πίνακα:

1. μέθοδος Array.prototype.forEach ;
2. κλασικό για βρόχο?
3. Ένα «καλοσχηματισμένο» for...in loop.

Επιπλέον, σύντομα, με την έλευση του νέου προτύπου ECMAScript 6 (ES 6), αναμένονται δύο ακόμη μέθοδοι:

1. for...of loop (σιωπηρή χρήση του επαναλήπτη);
2. ρητή χρήση επαναληπτικού.

1. Η μέθοδος forEach και οι σχετικές μέθοδοι

Εάν το έργο σας έχει σχεδιαστεί για να υποστηρίζει τις δυνατότητες του προτύπου ECMAScript 5 (ES5), μπορείτε να χρησιμοποιήσετε μία από τις καινοτομίες του - τη μέθοδο forEach.

Παράδειγμα χρήσης:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Γενικά, η χρήση του forEach απαιτεί τη συμπερίληψη της βιβλιοθήκης εξομοίωσης es5-shim για προγράμματα περιήγησης που δεν διαθέτουν εγγενή υποστήριξη για αυτήν τη μέθοδο. Αυτά περιλαμβάνουν IE 8 και νεότερη έκδοση πρώιμες εκδόσειςπου χρησιμοποιούνται ακόμη και σήμερα.

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

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

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

• Κάθε - επιστρέφει true εάν για κάθε στοιχείο του πίνακα, η επανάκληση επιστρέφει μια τιμή που υπολογίζεται σε true.
• some - επιστρέφει true εάν για τουλάχιστον ένα στοιχείο του πίνακα, η επανάκληση επιστρέφει μια τιμή που υπολογίζεται σε true.
• φίλτρο - δημιουργεί έναν νέο πίνακα που περιέχει εκείνα τα στοιχεία του αρχικού πίνακα για τα οποία η επανάκληση επιστρέφει true.
• χάρτης - δημιουργεί έναν νέο πίνακα που αποτελείται από τις τιμές που επιστρέφονται από την επιστροφή κλήσης.
• μείωση - Μειώνει έναν πίνακα σε μία μόνο τιμή εφαρμόζοντας μια επιστροφή κλήσης σε κάθε στοιχείο του πίνακα με τη σειρά του, ξεκινώντας από το πρώτο (μπορεί να είναι χρήσιμο για τον υπολογισμό του αθροίσματος των στοιχείων του πίνακα και άλλων συναρτήσεων σύνοψης).
• reduceRight - λειτουργεί παρόμοια με τη μείωση, αλλά επαναλαμβάνεται πάνω από τα στοιχεία με αντίστροφη σειρά.

2. Ο βρόχος for

Παλιό καλό για βράχους:

Var a = ["a", "b", "c"]; δείκτης var; για (δείκτης = 0, ευρετήριο< a.length; ++index) { console.log(a); }
Εάν το μήκος του πίνακα δεν αλλάζει σε όλο τον βρόχο και ο ίδιος ο βρόχος ανήκει σε ένα κομμάτι κώδικα που είναι κρίσιμο για την απόδοση (κάτι που είναι απίθανο), τότε μπορείτε να χρησιμοποιήσετε την "πιο βέλτιστη" έκδοση του for με αποθήκευση μήκους πίνακα:

Var a = ["a", "b", "c"]; δείκτης var, len; για (δείκτης = 0, len = α.μήκος, δείκτης< len; ++index) { console.log(a); }
Θεωρητικά, αυτός ο κώδικας θα πρέπει να τρέχει λίγο πιο γρήγορα από τον προηγούμενο.

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

Var a = ["a", "b", "c"]; δείκτης var; για (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Ωστόσο, στις σύγχρονες μηχανές JavaScript, τέτοια παιχνίδια με βελτιστοποίηση συνήθως δεν σημαίνουν τίποτα.

3. Σωστή χρήση του βρόχου for...in

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

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

// a - αραιός πίνακας var a = ; a = "a"; a = "b"; a = "c"; for (κλειδί var στο a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
Σε αυτό το παράδειγμα, εκτελούνται δύο έλεγχοι σε κάθε επανάληψη του βρόχου:

1. ότι ο πίνακας έχει τη δική του ιδιότητα με το όνομα κλειδί (δεν έχει κληρονομηθεί από το πρωτότυπό του).
2. αυτό το κλειδί είναι μια συμβολοσειρά που περιέχει τον δεκαδικό συμβολισμό ενός ακέραιου του οποίου η τιμή είναι μικρότερη από 4294967294. Από πού προέρχεται ο τελευταίος αριθμός; Από τον ορισμό ενός δείκτη πίνακα στο ES5, που σημαίνει ότι ο υψηλότερος δείκτης που μπορεί να έχει ένα στοιχείο σε έναν πίνακα είναι (2^32 - 2) = 4294967294 .

Φυσικά, τέτοιοι έλεγχοι θα χρειαστούν επιπλέον χρόνο κατά την εκτέλεση του βρόχου. Αλλά στην περίπτωση ενός αραιού πίνακα, αυτή η μέθοδος είναι πιο αποτελεσματική από τον βρόχο for, αφού σε αυτήν την περίπτωση μόνο εκείνα τα στοιχεία που ορίζονται ρητά στον πίνακα επαναλαμβάνονται. Έτσι, στο παραπάνω παράδειγμα, θα εκτελεστούν μόνο 3 επαναλήψεις (για τους δείκτες 0, 10 και 10000) - έναντι 10001 στον βρόχο for.

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

Συνάρτηση arrayHasOwnIndex(πίνακας, κλειδί) (επιστροφή array.hasOwnProperty(κλειδί) && /^0$|^\d*$/.test(κλειδί) && κλειδί<= 4294967294; }
Στη συνέχεια, το σώμα του βρόχου από το παράδειγμα θα μειωθεί σημαντικά:

Για (κλειδί σε α) ( if (arrayHasOwnIndex(a, κλειδί)) ( console.log(a); ) )
Ο κωδικός των ελέγχων που εξετάστηκε παραπάνω είναι καθολικός, κατάλληλος για όλες τις περιπτώσεις. Αλλά αντί για αυτό, μπορείτε να χρησιμοποιήσετε μια συντομότερη έκδοση, αν και τυπικά δεν είναι αρκετά σωστή, αλλά, ωστόσο, κατάλληλη για τις περισσότερες περιπτώσεις:

Για (κλειδί σε α) ( if (a.hasOwnProperty(κλειδί) && String(parseInt(key, 10)) === κλειδί) ( console.log(a); ) )

4. Ο βρόχος for...of (σιωπηρή χρήση επαναληπτικού)

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

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

1. έγινε (boolean) - true αν ο επαναλήπτης έχει φτάσει στο τέλος της επαναλαμβανόμενης ακολουθίας. Διαφορετικά, είναι ψευδές.
2. τιμή - ορίζει την τιμή που επιστρέφεται από τον επαναλήπτη. Ενδέχεται να είναι απροσδιόριστο (λείπει) εάν η ιδιότητα που έγινε έχει οριστεί σε true .

Πολλά ενσωματωμένα αντικείμενα, συμ. Οι πραγματικοί πίνακες έχουν επαναλήπτες από προεπιλογή. Ο απλούστερος τρόπος να χρησιμοποιήσετε έναν επαναλήπτη σε πραγματικούς πίνακες είναι να χρησιμοποιήσετε το νέο για...της κατασκευής.

Ένα παράδειγμα χρήσης για...των:

Varval; var a = ["a", "b", "c"]; για (val of a) ( console.log(val); )
Στο παραπάνω παράδειγμα, ο βρόχος for...of καλεί σιωπηρά έναν επαναλήπτη του αντικειμένου Array για να πάρει κάθε τιμή στον πίνακα.

5. Ρητή χρήση επαναληπτικού

Οι επαναληπτικοί μπορούν επίσης να χρησιμοποιηθούν ρητά, αν και σε αυτή την περίπτωση ο κώδικας γίνεται πολύ πιο περίπλοκος σε σύγκριση με τον βρόχο for...of. Μοιάζει κάπως έτσι:

Var a = ["a", "b", "c"]; var it = a.entries(); var καταχώρηση? ενώ (!(entry = it.next()).done) ( console.log(entry.value); )
Σε αυτό το παράδειγμα, η μέθοδος Array.prototype.entries επιστρέφει έναν επαναλήπτη που χρησιμοποιείται για την εμφάνιση των τιμών του πίνακα. Σε κάθε επανάληψη, το entry.value περιέχει έναν πίνακα της μορφής [key, value] .

II. Επανάληψη σε αντικείμενα που μοιάζουν με πίνακα

Εκτός από πραγματικούς πίνακες, έχει και η JavaScript αντικείμενα που μοιάζουν με πίνακα . Αυτό που έχουν κοινό με τους πραγματικούς πίνακες είναι ότι έχουν μια ιδιότητα μήκους και ιδιότητες με ονόματα σε μορφή αριθμών που αντιστοιχούν στα στοιχεία του πίνακα. Τα παραδείγματα περιλαμβάνουν το DOM της συλλογής NodeList και τα ορίσματα ψευδοσυστοιχίας που είναι διαθέσιμα σε οποιαδήποτε συνάρτηση/μέθοδο.

1. Χρήση μεθόδων επανάληψης σε πραγματικούς πίνακες

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

Οι κατασκευές for και for...in μπορούν να εφαρμοστούν σε αντικείμενα που μοιάζουν με πίνακα με τον ίδιο ακριβώς τρόπο όπως οι πραγματικοί πίνακες.

ForEach και άλλες μέθοδοι Array.prototype ισχύουν επίσης για αντικείμενα που μοιάζουν με πίνακα. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε μια κλήση Function.call ή Function.apply.

Για παράδειγμα, εάν θέλετε να εφαρμόσετε το forEach στην ιδιότητα childNodes ενός αντικειμένου Node, θα το κάνετε ως εξής:

Array.prototype.forEach.call(node.childNodes, function(child) ( // κάντε κάτι με το θυγατρικό αντικείμενο));
Για τη διευκόλυνση της επαναχρησιμοποίησης αυτής της τεχνικής, μπορείτε να δηλώσετε μια αναφορά στη μέθοδο Array.prototype.forEach σε μια ξεχωριστή μεταβλητή και να τη χρησιμοποιήσετε ως συντομογραφία:

// (Υποθέτοντας ότι όλος ο παρακάτω κώδικας βρίσκεται στο ίδιο πεδίο εφαρμογής) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // κάντε κάτι με το θυγατρικό αντικείμενο));
Εάν ένα αντικείμενο που μοιάζει με πίνακα έχει έναν επαναλήπτη, τότε μπορεί να χρησιμοποιηθεί ρητά ή σιωπηρά για επανάληψη πάνω από το αντικείμενο με τον ίδιο τρόπο όπως για πραγματικούς πίνακες.

2. Μετατροπή σε πραγματικό πίνακα

Υπάρχει επίσης ένας άλλος, πολύ απλός, τρόπος επανάληψης σε ένα αντικείμενο που μοιάζει με πίνακα: μετατρέψτε τον σε πραγματικό πίνακα και χρησιμοποιήστε οποιαδήποτε από τις μεθόδους που αναφέρθηκαν παραπάνω για επανάληψη σε πραγματικούς πίνακες. Για τη μετατροπή, μπορείτε να χρησιμοποιήσετε τη γενική μέθοδο Array.prototype.slice , η οποία μπορεί να εφαρμοστεί σε οποιοδήποτε αντικείμενο που μοιάζει με πίνακα. Αυτό γίνεται πολύ απλά, όπως φαίνεται στο παρακάτω παράδειγμα:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Για παράδειγμα, εάν θέλετε να μετατρέψετε μια συλλογή NodeList σε έναν πραγματικό πίνακα, θα χρειαστείτε κώδικα όπως αυτός:

Vardivs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
εκσυγχρονίζω: Όπως σημειώνεται στα σχόλια

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

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

1. Προσθήκη προσαρμοσμένων ιδιοτήτων σε πίνακες

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

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

2. Πρόσβαση σε στοιχεία πίνακα εντός βρόχου

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

Το ECMAScript6 εισήγαγε έναν τρόπο βρόχου μέσω ενός πίνακα χωρίς τη χρήση ευρετηρίων, αλλά μέσω ενός νέου βρόχου for...of.

Ο βρόχος for...of έχει σχεδιαστεί για να επαναλαμβάνεται μέσω των στοιχείων ενός πίνακα χωρίς να επηρεάζει το δείκτη του στοιχείου.

var ary = ["πορτοκάλι", "μήλο", "λίτσι"]; for (έστω στοιχείο του ary)( console.log(item); ) // "πορτοκαλί", "μήλο", "λίτσι" Για σύγκριση: εμφάνιση ευρετηρίων στοιχείων σε έναν βρόχο for. var ary = ["πορτοκάλι", "μήλο", "λίτσι"]; για (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Ο αριθμός των στοιχείων δεν είναι η διάσταση του πίνακα

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

Η ιδιότητα μήκους είναι πολύ διφορούμενη. Για να το επαληθεύσετε, απλώς δείτε τους παρακάτω χειρισμούς:

Μεταβλητή = ; αρ.μήκος = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

Στο τελευταίο παράδειγμα, αρκούσε να τεθεί το στοιχείο στην πέμπτη θέση, με αποτέλεσμα το μήκος του πίνακα να γίνει ίσο με 6. Αν πιστεύετε ότι οι δείκτες από το 0 έως το 4 θα δημιουργηθούν αυτόματα, θα κάνετε λάθος . Αυτό μπορεί να ελεγχθεί χρησιμοποιώντας τον τελεστή in.

Μεταβλητή = ; αρ.μήκος = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 σε αρύ); // ψευδής

Σε αυτή την περίπτωση, είναι δίκαιο να ονομάσουμε τον πίνακα ary "αραιός".

Μπορούμε επίσης να χειριστούμε την ιδιότητα length για να περικόψουμε πίνακες. Το παρακάτω παράδειγμα δείχνει την "απώλεια" του στοιχείου στον δείκτη 5 μειώνοντας την τιμή της ιδιότητας μήκους του πίνακα ary.

Μεταβλητή = ; αρ.μήκος = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // απροσδιόριστο