JavaScript ES5

Πίνακας περιεχομένων

Το ECMAScript 2009, γνωστό και ως ES5, ήταν η πρώτη σημαντική αναθεώρηση της JavaScript.

Αυτό το κεφάλαιο περιγράφει τα πιο σημαντικά χαρακτηριστικά του ES5.

Χαρακτηριστικά ES5

"χρησιμοποιήστε αυστηρά"
Πρόσβαση συμβολοσειράς[αριθμός]
Χορδές πολλαπλών γραμμών
String.trim()
Array.isArray()
Array forEach()
Χάρτης πίνακα()
Φίλτρο πίνακα()
Μείωση πίνακα()
Πίνακας reduceRight()
Πίνακας κάθε()
Array some()
Πίνακας indexOf()
Πίνακας lastIndexOf()
JSON.parse()
JSON.stringify()
Date.now()
Ημερομηνία toISOSstring()
Ημερομηνία σε JSON()
Κατόχους και ρυθμιστές ακινήτων
Δεσμευμένες λέξεις ως ονόματα ιδιοκτησίας
Μέθοδοι αντικειμένων
Αντικείμενο defineProperty()
Συνάρτηση bind()
Ακολουθούν κόμματα

Υποστήριξη προγράμματος περιήγησης

Το ES5 υποστηρίζεται πλήρως σε όλα τα σύγχρονα προγράμματα περιήγησης:


Chrome	IE	Edge	Firefox	Safari	Opera
Yes	9.0	Yes	Yes	Yes	Yes

Η Οδηγία «αυστηρή χρήση».

Το "χρήση αυστηρής" ορίζει ότι ο κώδικας JavaScript πρέπει να εκτελείται σε "αυστηρή λειτουργία".

Με την αυστηρή λειτουργία μπορείτε, για παράδειγμα, να μην χρησιμοποιήσετε μη δηλωμένες μεταβλητές.

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

Η "χρήση αυστηρής" είναι απλώς μια έκφραση συμβολοσειράς. Τα παλιά προγράμματα περιήγησης δεν θα κάνουν λάθος εάν δεν το καταλαβαίνουν.

Διαβάστε περισσότερα στο JS Strict Mode.

Πρόσβαση ιδιοκτησίας σε συμβολοσειρές

Η μέθοδος charAt() επιστρέφει τον χαρακτήρα σε καθορισμένο ευρετήριο (θέση) σε μια συμβολοσειρά:

Παράδειγμα

var str = "HELLO WORLD";
str.charAt(0);            // returns H

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

Το ES5 επιτρέπει την πρόσβαση στην ιδιοκτησία σε συμβολοσειρές:

Παράδειγμα

var str = "HELLO WORLD";
str[0];                   // returns H

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property acces on strings:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

Η πρόσβαση στην ιδιότητα στη συμβολοσειρά μπορεί να είναι λίγο απρόβλεπτη.

Διαβάστε περισσότερα στο JS String Methods.

Χορδές σε πολλές γραμμές

Παράδειγμα

 "Hello \
Dolly!";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

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

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

Παράδειγμα

 "Hello " + 
"Dolly!";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Δεσμευμένες λέξεις ως ονόματα ιδιοκτησίας

Το ES5 επιτρέπει δεσμευμένες λέξεις ως ονόματα ιδιοκτησίας:

Παράδειγμα αντικειμένου

 var obj = {name: "John", new: "yes"}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>

<p>ECMAScript 5 allows reserved words as property names.</p>
<p id="demo"></p>

<script>
var obj = {name: "John", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>

</body>
</html>

Συμβολοσειρά `trim()`

Η μέθοδος trim() αφαιρεί το κενό διάστημα και από τις δύο πλευρές μιας συμβολοσειράς.

Παράδειγμα

var str = "       Hello World!        ";
alert(str.trim());

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

Διαβάστε περισσότερα στο JS String Methods.

`Array.isArray()`

Η μέθοδος isArray() ελέγχει εάν ένα αντικείμενο είναι πίνακας.

Παράδειγμα

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
    x.innerHTML = Array.isArray(fruits);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>

<p>Click the button to check if "fruits" is an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
</script>

</body>
</html>

Διαβάστε περισσότερα στο JS Arrays.

Πίνακας `forEach()`

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

Παράδειγμα

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
   
txt = txt + value + "<br>"; 
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `map()`

Αυτό το παράδειγμα πολλαπλασιάζει κάθε τιμή πίνακα επί 2:

Παράδειγμα

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
  
function myFunction(value) {
  return value * 2;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `filter()`

Αυτό το παράδειγμα δημιουργεί έναν νέο πίνακα από στοιχεία με τιμή μεγαλύτερη από 18:

Παράδειγμα

 var numbers = [45, 4, 9, 16, 25];
var over18 = 
  numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById("demo").innerHTML = over18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `reduce()`

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

Παράδειγμα

 var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
  
function myFunction(total, value) {
  
  return total + value;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `reduceRight()`

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

Παράδειγμα

 var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
  
function myFunction(total, value) {
  return total + value;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById("demo").innerHTML = "The sum is " + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `κάθε()`

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

Παράδειγμα

 var numbers = [45, 4, 9, 16, 25];
var allOver18 = 
  numbers.every(myFunction);
function myFunction(value) {
  return 
  value > 18;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `some()`

Αυτό το παράδειγμα ελέγχει εάν ορισμένες τιμές είναι πάνω από 18:

Παράδειγμα

 var numbers = [45, 4, 9, 16, 25];
var allOver18 = 
  numbers.some(myFunction);
function myFunction(value) {
  return 
  value > 18;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;

function myFunction(value) {
  return value > 18;
}
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `indexOf()`

Αναζητήστε έναν πίνακα για μια τιμή στοιχείου και επιστρέφει τη θέση του.

Παράδειγμα

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

Πίνακας `lastIndexOf()`

Το lastIndexOf() είναι το ίδιο με το indexOf(), αλλά πραγματοποιεί αναζήτηση από το τέλος του πίνακα.

Παράδειγμα

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>

<p id="demo"></p>

<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>

</body>
</html>

Μάθετε περισσότερα στο JS Array Iteration Methods.

`JSON.parse()`

Μια κοινή χρήση του JSON είναι η λήψη δεδομένων από έναν διακομιστή ιστού.

Φανταστείτε ότι λάβατε αυτήν τη συμβολοσειρά κειμένου από έναν διακομιστή ιστού:

'{"name":"John", "age":30, "city":"New York"}'

Η συνάρτηση JavaScript JSON.parse() χρησιμοποιείται για τη μετατροπή του κειμένου σε αντικείμενο JavaScript:

var obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

Διαβάστε περισσότερα στον οδηγό JSON.

`JSON.stringify()`

Μια κοινή χρήση του JSON είναι η αποστολή δεδομένων σε έναν διακομιστή ιστού.

Κατά την αποστολή δεδομένων σε διακομιστή web, τα δεδομένα πρέπει να είναι μια χορδή.

Φανταστείτε ότι έχουμε αυτό το αντικείμενο σε JavaScript:

var obj = {name:"John", age:30, city:"New York"};

Χρησιμοποιήστε τη συνάρτηση JavaScript JSON.stringify() για να τη μετατρέψετε σε συμβολοσειρά.

var myJSON = JSON.stringify(obj);

Το αποτέλεσμα θα είναι μια συμβολοσειρά που ακολουθεί τη σημείωση JSON.

Το myJSON είναι τώρα μια συμβολοσειρά και είναι έτοιμη για αποστολή σε διακομιστή:

Παράδειγμα

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Διαβάστε περισσότερα στο εκπαιδευτικό μας πρόγραμμα JSON.

`Date.now()`

Το Date.now() επιστρέφει τον αριθμό των χιλιοστών του δευτερολέπτου από την ημερομηνία μηδέν (1 Ιανουαρίου. 1970 00:00:00 UTC).

Παράδειγμα

var timInMSs = Date.now();

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.now()</h2>

<p>Date.now() is new in ECMAScript 5 (2009):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

Το Date.now() επιστρέφει το ίδιο με το getTime() που εκτελέστηκε σε ένα αντικείμενο Ημερομηνία.

Μάθετε περισσότερα στο JS Dates.

Ημερομηνία `toISOSstring()`

Η μέθοδος toISOString() μετατρέπει ένα αντικείμενο Date σε συμβολοσειρά, χρησιμοποιώντας την τυπική μορφή ISO:

Παράδειγμα

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>

</body>
</html>

Ημερομηνία `toJSON()`

Το toJSON() μετατρέπει ένα αντικείμενο Date σε συμβολοσειρά, μορφοποιημένο ως ημερομηνία JSON.

Οι ημερομηνίες JSON έχουν την ίδια μορφή με το πρότυπο ISO-8601: ΕΕΕΕ-ΜΜ-ΗΗΗΗΗ:λλ:δδ.δδσΖ:

Παράδειγμα

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date.toJSON()</h2>

<p id="demo"></p>

<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
</script>

</body>
</html>

Property Getters και Setters

Το ES5 σάς επιτρέπει να ορίσετε μεθόδους αντικειμένων με μια σύνταξη που μοιάζει με λήψη ή ρύθμιση ένα ακίνητο.

Αυτό το παράδειγμα δημιουργεί ένα getter για μια ιδιότητα που ονομάζεται fullName:

Παράδειγμα

 // Create an object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  get 
  fullName() {
    
  return this.firstName + " " + this.lastName;
  }
};
// Display data from the 
  object using a getter:
document.getElementById("demo").innerHTML = 
  person.fullName;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a getter for a property called fullName.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

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

Παράδειγμα

 var person = {
  firstName: "John",
  
  lastName : "Doe",
  language : "NO",
  
  get lang() {
    return this.language;
  },
  set lang(value) {
    
  this.language = value;
  }
};
// Set an object 
  property using a setter:
person.lang = "en";
// Display data from the 
  object using a getter:
document.getElementById("demo").innerHTML = 
  person.lang;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example creates a setter and a getter for the language property.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

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

Παράδειγμα

 var person = {
  firstName: "John",
  
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    
  this.language = value.toUpperCase();
  }
};
// Set an object 
  property using a setter:
person.lang = "en";
// Display data from the 
  object:
document.getElementById("demo").innerHTML = 
  person.language;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example has a modified setter to secure upper case uppdates of language.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(value) {
     this.language = value.toUpperCase();
  }
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Μάθετε περισσότερα για τα Gettes και τα Setter στο JS Object Accessors

`Object.defineProperty()`

Το Object.defineProperty() είναι μια νέα μέθοδος Αντικειμένου στο ES5.

Σας επιτρέπει να ορίσετε μια ιδιότητα αντικειμένου ή/και να αλλάξετε την τιμή ή/και μια ιδιότητα μεταδεδομένα.

Παράδειγμα

 // Create an Object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  language : "NO", 
};

  // Change a Property:
Object.defineProperty(person, "language", {
    
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 
  Enumerate Properties
var txt = "";
for (var x in person) {
    
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = 
  txt;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>

<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Το επόμενο παράδειγμα είναι ο ίδιος κώδικας, με τη διαφορά ότι αποκρύπτει την ιδιότητα γλώσσας από την απαρίθμηση:

Παράδειγμα

 // Create an Object:
var person = {
  firstName: 
  "John",
  lastName : "Doe",
  language : "NO", 
};

  // Change a Property:
Object.defineProperty(person, "language", {
    
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 
  Enumerate Properties
var txt = "";
for (var x in person) {
    
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = 
  txt;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

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

Παράδειγμα

 // Create an Object:
var person = {
  firstName: "John",
    lastName : 
  "Doe",
  language : "NO"
};
// Change a Property:
  Object.defineProperty(person, "language", {
  get : function() { return 
  language },
  set : function(value) { language = value.toUpperCase()}
});

  // Change Language
person.language = "en";
// Display Language
  document.getElementById("demo").innerHTML = person.language;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript defineProperty()</h2>

<p id="demo"></p>

<script>
// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Change language
person.language = "en";
// Display language
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Ε5 Μέθοδοι αντικειμένου

Το ES5 πρόσθεσε πολλές νέες μεθόδους αντικειμένων στο JavaScript:

Διαχείριση Αντικειμένων

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Προστασία αντικειμένων

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Μάθετε περισσότερα στο Object ECMAScript5.

Συνάρτηση `Bind()`

Με τη μέθοδο bind(), ένα αντικείμενο μπορεί να δανειστεί μια μέθοδο από άλλο αντικείμενο.

Αυτό το παράδειγμα δημιουργεί 2 αντικείμενα (άτομο και μέλος).

Το αντικείμενο μέλος δανείζεται τη μέθοδο fullname από το αντικείμενο person:

Παράδειγμα

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

Μάθετε περισσότερα στο Function bind().

Ύστερα κόμματα

Το ES5 επιτρέπει το τέλος των κομμάτων σε ορισμούς αντικειμένων και πινάκων:

Παράδειγμα αντικειμένου

person = {
  firstName: "John",
  lastName: "
Doe",
	age: 46,
}

Παράδειγμα πίνακα

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

ΠΡΟΕΙΔΟΠΟΙΗΣΗ!!!

Το JSON δεν επιτρέπει ακραία κόμματα.

Αντικείμενα JSON:

 //
  Allowed:
var person = '{"firstName":"John", "lastName":"Doe", 
  "age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John", 
  "lastName":"Doe", "age":46,}'
JSON.parse(person)

Πίνακες JSON:

   //
    Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points = 
    [40, 100, 1, 5, 25, 10,]

JavaScript ES5

Πίνακας περιεχομένων

Χαρακτηριστικά ES5

Υποστήριξη προγράμματος περιήγησης

Η Οδηγία «αυστηρή χρήση».

Πρόσβαση ιδιοκτησίας σε συμβολοσειρές

Παράδειγμα

Παράδειγμα

Χορδές σε πολλές γραμμές

Παράδειγμα

Παράδειγμα

Δεσμευμένες λέξεις ως ονόματα ιδιοκτησίας

Παράδειγμα αντικειμένου

Συμβολοσειρά trim()

Παράδειγμα

Array.isArray()

Παράδειγμα

Πίνακας forEach()

Παράδειγμα

Πίνακας map()

Παράδειγμα

Πίνακας filter()

Παράδειγμα

Πίνακας reduce()

Παράδειγμα

Πίνακας reduceRight()

Παράδειγμα

Πίνακας κάθε()

Παράδειγμα

Πίνακας some()

Παράδειγμα

Πίνακας indexOf()

Παράδειγμα

Πίνακας lastIndexOf()

Παράδειγμα

JSON.parse()

JSON.stringify()

Παράδειγμα

Date.now()

Παράδειγμα

Ημερομηνία toISOSstring()

Παράδειγμα

Ημερομηνία toJSON()

Παράδειγμα

Property Getters και Setters

Παράδειγμα

Παράδειγμα

Παράδειγμα

Object.defineProperty()

Παράδειγμα

Παράδειγμα

Παράδειγμα

Ε5 Μέθοδοι αντικειμένου

Διαχείριση Αντικειμένων

Προστασία αντικειμένων

Συνάρτηση Bind()

Παράδειγμα

Ύστερα κόμματα

Παράδειγμα αντικειμένου

Παράδειγμα πίνακα

Αντικείμενα JSON:

Πίνακες JSON:

Συμβολοσειρά `trim()`

`Array.isArray()`

Πίνακας `forEach()`

Πίνακας `map()`

Πίνακας `filter()`

Πίνακας `reduce()`

Πίνακας `reduceRight()`

Πίνακας `κάθε()`

Πίνακας `some()`

Πίνακας `indexOf()`

Πίνακας `lastIndexOf()`

`JSON.parse()`

`JSON.stringify()`

`Date.now()`

Ημερομηνία `toISOSstring()`

Ημερομηνία `toJSON()`

`Object.defineProperty()`

Συνάρτηση `Bind()`