JavaΜέθοδοι πίνακα σεναρίων: Δημιουργία με Παράδειγμα

Τι είναι ένας πίνακας στο JavaΓραφή;

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

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

Πώς να δημιουργήσετε έναν πίνακα σε JavaΓραφή

Μπορείτε να δημιουργήσετε έναν πίνακα σε JavaΓραφή όπως δίνεται παρακάτω.

var students = ["John", "Ann", "Kevin"];

Εδώ, αρχικοποιείτε τον πίνακα σας όπως και όταν δημιουργείται με τις τιμές "John", "Ann" και "Kevin". Ο δείκτης των «John», «Ann» και «Kevin» είναι 0, 1 και 2 αντίστοιχα. Εάν θέλετε να προσθέσετε περισσότερα στοιχεία στον πίνακα μαθητών, μπορείτε να το κάνετε ως εξής:

students[3] = "Emma";
students[4] = "Rose";

Μπορείτε επίσης να δημιουργήσετε έναν πίνακα χρησιμοποιώντας τον κατασκευαστή πίνακα ως εξής:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

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

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

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaΜέθοδοι πίνακα σεναρίων

Το αντικείμενο Array έχει πολλές ιδιότητες και μεθόδους που βοηθούν τους προγραμματιστές να χειρίζονται τους πίνακες εύκολα και αποτελεσματικά. Μπορείτε να λάβετε την τιμή μιας ιδιότητας καθορίζοντας το arrayname.property και την έξοδο μιας μεθόδου προσδιορίζοντας το arrayname.method().

1. ιδιότητα μήκους –> Εάν θέλετε να μάθετε τον αριθμό των στοιχείων σε έναν πίνακα, μπορείτε να χρησιμοποιήσετε την ιδιότητα μήκος.
2. πρωτότυπη ιδιοκτησία –> Εάν θέλετε να προσθέσετε νέες ιδιότητες και μεθόδους, μπορείτε να χρησιμοποιήσετε την ιδιότητα πρωτότυπου.
3. αντίστροφη μέθοδος –> Μπορείτε να αντιστρέψετε τη σειρά των στοιχείων σε έναν πίνακα χρησιμοποιώντας μια αντίστροφη μέθοδο.
4. μέθοδος ταξινόμησης –> Μπορείτε να ταξινομήσετε τα στοιχεία σε έναν πίνακα χρησιμοποιώντας τη μέθοδο ταξινόμησης.
5. ποπ μέθοδος –> Μπορείτε να αφαιρέσετε το τελευταίο στοιχείο ενός πίνακα χρησιμοποιώντας μια μέθοδο pop.
6. μέθοδος βάρδιας –> Μπορείτε να αφαιρέσετε το πρώτο στοιχείο ενός πίνακα χρησιμοποιώντας τη μέθοδο shift.
7. μέθοδος ώθησης –> Μπορείτε να προσθέσετε μια τιμή ως το τελευταίο στοιχείο του πίνακα.

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

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

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Αναζήτηση, αντιγραφή και συμμετοχή

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Μέθοδοι επανάληψης: forEach, map, filter και reduce

ΜΟΝΤΕΡΝΑ JavaΤο σενάριο ευνοεί τις μεθόδους που βασίζονται σε επανάκληση (callback-driven) έναντι των χειροκίνητων βρόχων ευρετηρίου, επειδή η πρόθεση της λειτουργίας δηλώνεται απευθείας στο όνομα της μεθόδου.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaΠαράδειγμα πίνακα σεναρίου με πηγαίο κώδικα Code

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

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Αναμενόμενη παραγωγή:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

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

Πώς να κάνετε επανάληψη σε ένα JavaΠίνακας σεναρίων

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

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

Μια βαθύτερη επεξεργασία της σύνταξης βρόχου, συμπεριλαμβανομένων των while και do…while, εμφανίζεται στο άρθρο σχετικά με πώς να χρησιμοποιήσετε βρόχους σε JavaΓραφή.

Πολυδιάστατοι πίνακες σε JavaΓραφή

JavaΤο σενάριο δεν έχει ειδικό τύπο πίνακα. Ένα πλέγμα είναι απλώς ένας πίνακας του οποίου τα στοιχεία είναι τα ίδια πίνακες και χρησιμοποιούνται δύο εκφράσεις ευρετηρίου για την προσέγγιση ενός μόνο κελιού.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Παραγωγή:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

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

Συχνές Ερωτήσεις