JavaScript ES5

Τι είναι το ECMAScript 5;

ECMAScript 5 είναι επίσης γνωστό ως ES5 και ECMAScript 2009.

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

Λειτουργίες ECMAScript 5

Αυτές είναι οι νέες λειτουργίες που κυκλοφόρησαν το 2009:

  • "use strict" οδηγία
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now();
  • 属性 Getter 和 Setter
  • 新的对象属性和方法

Αλλαγές γλώσσας ECMAScript 5

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

"use strict" οδηγία

"use strict"

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

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

"use strict” Είναι απλώς μια έκφραση αλφαριθμητικής αλληλουχίας. Οι παλιές περιηγητές που δεν κατανοούν αυτές δεν θα πετάξουν σφάλμα.

Παρακαλώ διαβάστε JS Σφιχτή Μόδα για περισσότερες πληροφορίες.

String.trim()

String.trim() Διαγράφει τα κενά στα άκρα της αλφαριθμητικής αλληλουχίας.

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι αλφαβητικής συμβολοσειράς JS για περισσότερες πληροφορίες.

Array.isArray()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο JS Πίνακες για περισσότερες πληροφορίες.

Array.forEach()

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

Παράδειγμα

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.map()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.filter()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.reduce()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.reduceRight()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.every()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.some()

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

Array.indexOf()

Αναζητεί μια τιμή στο πίνακα και επιστρέφει τη θέση της:

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JSμαθαίνετε περισσότερα.

Array.lastIndexOf()

Array.lastIndexOf() με Array.indexOf() Παρόμοια, αλλά ξεκινά από το τέλος του πίνακα.

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Παρακαλώ στο Μέθοδοι ανασκόπησης του JS μαθαίνετε περισσότερα.

JSON.parse()

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

Προσπαθήστε να φανταστείτε ότι λαμβάνετε αυτό το κείμενο ως αλφαβητική ακολουθία χαρακτήρων από τον διακομιστή Web:

'{"name":"Bill", "age":62, "city":"Seatle"}'

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

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

Προσπαθήστε το προσωπικά

请在我们的 JSON 教程 μαθαίνετε περισσότερα.

JSON.stringify()

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

Κατά την αποστολή δεδομένων στον διακομιστή Web, τα δεδομένα πρέπει να είναι αλφαβητική ακολουθία χαρακτήρων.

Προσπαθήστε να φανταστείτε ότι έχουμε αυτό το αντικείμενο στο JavaScript:

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

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

var myJSON = JSON.stringify(obj);

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

myJSON τώρα είναι μια αλφαβητική ακολουθία χαρακτήρων, έτοιμη για αποστολή στο διακομιστή:

Παράδειγμα

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

Προσπαθήστε το προσωπικά

请在我们的 JSON 教程 μαθαίνετε περισσότερα.

Date.now();

Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数。

Παράδειγμα

var timInMSs = Date.now();

Προσπαθήστε το προσωπικά

Date.now(); 的返回与在 Date 对象上执行 getTime() 的结果相同。

Παρακαλώ στο JS 日期 中学习更多。

属性 Getter 和 Setter

ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。

此例为名为 fullName 的属性创建一个 getter:

Παράδειγμα

// Δημιουργία αντικειμένου:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

Προσπαθήστε το προσωπικά

此例为语言属性创建一个 setter 和 getter:

Παράδειγμα

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// 使用 setter 设置对象属性：
person.lang = "en";
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

Προσπαθήστε το προσωπικά

此例使用 setter 来确保语言的大写更新：

Παράδειγμα

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// 使用 setter 设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

Προσπαθήστε το προσωπικά

Παρακαλώ στο JS 对象访问器 中学习更多有关 Getter 和 Setter 的知识。

新的对象属性和方法

Object.defineProperty(); 是 ES5 中的新对象方法。

允许您定义对象属性和/或更改属性的值和/或元数据。

Παράδειγμα

// Δημιουργία αντικειμένου:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Αλλαγή ιδιοτήτων:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true;
  configurable : true
});
// Ενεργοποίηση ιδιοτήτων
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Προσπαθήστε το προσωπικά

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

Παράδειγμα

// Δημιουργία αντικειμένου:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Αλλαγή ιδιοτήτων:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Ενεργοποίηση ιδιοτήτων
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Προσπαθήστε το προσωπικά

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

Παράδειγμα

// Δημιουργία αντικειμένου:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Αλλαγή ιδιοτήτων:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Αλλαγή γλώσσας
person.language = "en";
// Εμφάνιση γλώσσας
document.getElementById("demo").innerHTML = person.language;

Προσπαθήστε το προσωπικά

Νέοι αντικειμενικοί μέθοδοι του ES5

Το ECMAScript 5 προσέθεσε πολλά νέα αντικειμενικά μέθοδους στο JavaScript:

// Προσθήκη ή τροποποίηση ιδιοτήτων αντικειμένων
Ανακάλυψη της ιδιοτήτων του αντικειμένου
// Προσθήκη ή τροποποίηση πολλαπλών ιδιοτήτων αντικειμένων
Ανακάλυψη των ιδιοτήτων του αντικειμένου
// Εξερεύνηση της ιδιοτήτων
Ανακάλυψη της περιγραφής της ιδιοτήτων του αντικειμένου
// Επιστροφή όλων των ιδιοτήτων ως ακολουθία
Ανακάλυψη των ονομάτων των ιδιοτήτων του αντικειμένου
// Επιστροφή των αναγνωριστικών ιδιοτήτων ως ακολουθία
Ανακάλυψη των κλειδιών του αντικειμένου
// Εξερεύνηση του προτύπου
Ανακάλυψη του προτύπου του αντικειμένου
// Προστατεύει την προσθήκη ιδιοτήτων στο αντικείμενο
Object.preventExtensions(object)
// Αν μπορεί να προσστείται ιδιότητες στο αντικείμενο, επιστρέφει true
Object.isExtensible(object)
// Προστατεύει τις ιδιότητες του αντικειμένου από αλλαγές (μην τις τιμές)
Object.seal(object)
// Αν το αντικείμενο έχει σφραγιστεί, επιστρέφει true
Object.isSealed(object)
// Προστατεύει το αντικείμενο από οποιεσδήποτε αλλαγές
Object.freeze(object)
// Αν το αντικείμενο έχει 冻结, επιστρέφει true
Object.isFrozen(object)

Παρακαλώ στο αντικείμενα ECMAScript5 μαθαίνετε περισσότερα.

πρόσβαση στις ιδιότητες της αλφαβητικής συμβολοσειράς

charAt() Η μέθοδος επιστρέφει το γράμμα που βρίσκεται στην καθορισμένη索引 (θέση):

Παράδειγμα

var str = "HELLO WORLD";
str.charAt(0);            // επιστρέφει H

Προσπαθήστε το προσωπικά

Το ECMAScript 5 επιτρέπει την πρόσβαση στις ιδιότητες των αλφαβητικών συμβολοσειρών:

Παράδειγμα

var str = "HELLO WORLD";
str[0];                   // επιστρέφει H

Προσπαθήστε το προσωπικά

η πρόσβαση στις ιδιότητες της αλφαβητικής συμβολοσειράς μπορεί να είναι κάπως απρόβλεπτη.

Παρακαλώ στο Μέθοδοι αλφαβητικής συμβολοσειράς JS μαθαίνετε περισσότερα.

Τελικοί κόμματα (Trailing Commas)

Το ECMAScript 5 επιτρέπει τη χρήση τελικών κόμματων στις οριστικές περιγραφές αντικειμένων και διανυσμάτων:

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

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Παράδειγμα διανύσματος

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

Προειδοποίηση!!!

O Internet Explorer 8 θα υποκύψει.

Το JSON δεν επιτρέπει τη χρήση τελικών κόμματων.

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

// επιτρέπεται:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// δέν επιτρέπεται:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON διανύσματα:

// επιτρέπεται:
points = [40, 100, 1, 5, 25, 10]
// δέν επιτρέπεται:
points = [40, 100, 1, 5, 25, 10,]

Πολυγραμμικές συμβολοσειρές

Αν χρησιμοποιηθεί η απόδοση χαρακτήρα '\', το ECMAScript 5 επιτρέπει τις πολυγραμμικές συμβολοσειρές (λαβές):

Παράδειγμα

"Hello \
Kitty!";

Προσπαθήστε το προσωπικά

Η μέθοδος '\' μπορεί να μην έχει ευρεία υποστήριξη.

Παλαιότεροι περιηγητές μπορεί να χειρίζονται διαφορετικά τα κενά γύρω από τον χαρακτήρα '\'.

Παλαιότεροι περιηγητές δεν επιτρέπουν κενά μετά από το χαρακτήρα '\'.

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

Παράδειγμα

"Hello " + 
"Kitty!";

Προσπαθήστε το προσωπικά

Λέξεις-κλειδιά ως ονόματα ιδιοτήτων

Το ECMAScript 5 επιτρέπει τη χρήση λέξεων-κλειδιών ως ονόματα ιδιοτήτων:

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

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

Προσπαθήστε το προσωπικά

Υποστήριξη ECMAScript 5 (ES5) από περιηγητές

Chrome 23, IE 10 και Safari 6 είναι οι πρώτοι περιηγητές που υποστηρίζουν πλήρως το ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Σεπτέμβριος 2012 Σεπτέμβριος 2012 Απρίλιος 2013 Ιούλιος 2012 Ιούλιος 2013