Υποενότητα 8.1: Λίστες JavaScript

Site:	ΕΛ/ΛΑΚ Moodle
Course:	Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book:	Υποενότητα 8.1: Λίστες JavaScript

Printed by:	Guest user
Date:	Thursday, 21 November 2024, 4:51 PM

Description

Τι είναι μια Λίστα - στοιχειοσειρά JavaScript
Διατρέχοντας μια λίστα JavaScript - array
Μέθοδοι στις λίστες JavaScript - Array methods

Υποενότητα 8.1: Λίστες JavaScript

Ορισμοί
Πώς μπορώ να αποκτήσω πρόσβαση σε μια λίστα JavaScript;
Array methods

Ορισμοί

Τι είναι μια Λίστα - στοιχειοσειρά JavaScript;

Οι λίστες JavaScript -arrays είναι ο απλούστερος τρόπος συλλογής δεδομένων. Χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών σε μία μόνο μεταβλητή.

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

Array

Δημιουργία λίστας

Έτσι μπορείτε να δημιουργήσετε μια νέα λίστα που περιέχει 5 "κουτιά":

var colors = ["red", "green", "blue", "cyan" , "black"];

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

var myArray = [];
myArray[0] = "cat";
myArray[1] = 1;
myArray[2] = true;
myArray[3] = ["a", "b"];

Οι λίστες μπορούν να περιέχουν οτιδήποτε! Αυτό σημαίνει ότι μπορούν να περιέχουν οποιονδήποτε τύπο δεδομένων (συμβολοσειρά, αριθμό, boolean), ακόμη και μια άλλη λίστα!

265/5000

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

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

Πώς μπορώ να αποκτήσω πρόσβαση σε μια λίστα JavaScript;

Πρόσβαση σε όλη τη λίστα

Με τη JavaScript, μπορούμε να έχουμε πρόσβαση σε μια λίστα με αναφορά στο όνομά της:

<!DOCTYPE html>
<html lang="en">
  <head>
       <title>Accessing an array </title>
  </head>
  <body>
        <h3>Accessing an array </h3>
        <div id="thearray"></div>
        <script>
              var myArray = [];
               myArray[0] = "cat";
               myArray[1] = 1;
               myArray[2] = true;
               myArray[3] = ["a", "b"];
               alert (myArray);
               document.getElementById("thearray").innerHTML = myArray;
               console.log (myArray);
        </script>
  </body>
</html>

Πρόσβαση στα στοιχεία μιας λίστας

Επίσης, μπορούμε να έχουμε πρόσβαση στα στοιχεία λίστας με αναφορά στον δείκτη του στοιχείου - index:

console.log (myArray[2]) /*true*/

Άσκηση

Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice08.1.02.html στον φάκελο "Exercises".
Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
Αποθηκεύστε το αρχείο και προεπισκοπήστε το στον επεξεργαστή ή στο πρόγραμμα περιήγησής σας. Φαίνονται τα πάντα σωστά;

Array methods

Ας μελετήσουμε ορισμένες από τις διαθέσιμες μεθόδους για τις λίστες:

JOIN()

Χρησιμοποήστε array.join(separator) για να μετατρέψετε λίστα σε μια συμβολοσειρά:

Ο διαχωριστής - separator είναι από προεπιλογή ",". Ωστόσο, μπορείτε να αλλάξετε την προεπιλεγμένη τιμή, εισάγοντας μια διαφορετική τιμή.

var color = ["red", "green", "blue"];
console.log(color.join(" and "));
/* This shows : red and green and blue*/
var color = ["red", "green", "blue"];
console.log(color.join());
/* This shows : red,green,blue*/

ΑΛΛΑΓΕΣ ΣΤΟΙΧΕΙΩΝ

Στη λίστα:var color = ["red", "green", "blue"];
μπορείτε να αλλάξετε κάτι αποθηκευμένο ως εξής:

color[2] = "magenta";
/* Now color is : ["red", "green", "magenta"]*/

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

ΜΕΓΕΘΟΣ ΛΙΣΤΑΣ

Μπορείτε να μάθετε το μέγεθος μιας λίστας (δηλ. Πόσες θέσεις έχει) χρησιμοποιώντας: array.length:

var color = ["red", "green", "blue"];
alert(color.length); /* This shows 3 */

ΠΡΟΣΘΗΚΗ ΣΤΟ ΤΕΛΟΣ

Προσθέστε ένα νέο στοιχείο στο τέλος μιας λίστας με: array.push():
Ο δείκτης ενημερώνεται αυτόματα

var color = ["red", "green", "blue"];
color.push("magenta");
/* Now color is : ["red", "green", "blue", "magenta"] */

ΠΡΟΣΘΗΚΗ ΣΤΗΝ ΑΡΧΗ

Προσθέστε ένα νέο στοιχείο στην αρχή μιας λίστας με: array.unshift():
Ο δείκτης ενημερώνεται αυτόματα

var color = ["red", "green", "blue"];
color.unshift("magenta");
/* Now color is : ["magenta","red", "green", "blue"] */

ΚΑΤΑΡΓΗΣΗ ΑΠΟ ΤΟ ΤΕΛΟΣ

Για να καταργήσετε ένα στοιχείο από το τέλος, χρησιμοποιήστε: array.pop():

var color = ["red", "green", "blue"];
var result = color.pop();
alert(color); /* Now color is : ["red", "green"] */
alert(result); /*pop() returns the removed element, so result is : blue*/

ΚΑΤΑΡΓΗΣΗ ΑΠΟ ΤΗΝ ΑΡΧΗ

array.shift() καταργεί το στοιχείο της αρχής

var color = ["red", "green", "blue"];
var result = color.shift();
alert(color); /* Now color is : ["green", "blue"] */
alert(result); /*shift() returns the removed element, so result is : red*/

Ο δείκτης ενημερώνεται αυτόματα

ΣΥΝΔΕΣΗ ΔΥΟ ΛΙΣΤΩΝ

Χρησιμοποήστε array1.concat(array2) για να συνδέσετε δύ λίστες σε μία:

var color = ["red", "green", "blue"];
var primes = [2, 3, 5, 7, 11];
var result = color.concat(primes);
alert(result); /*shift() returns the removed element, so result is : red, green, blue, 2, 3, 5, 7, 11*/