JavaScript-ES5

Was ist 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()
  • Eigenschaft Getter und Setter
  • Neue Objektattribute und Methoden

ECMAScript 5 语法更改

  • 对字符串的属性访问 [ ]
  • 数组和对象字面量中的尾随逗号
  • 多行字符串字面量
  • 作为属性名称的保留字

"use strict" 指令

"use strict" 定义 JavaScript 代码应该以“严格模式”执行。

例如，使用严格模式，不能使用未声明的变量。

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码，例如阻止您使用未声明的变量。

"use strict” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。

请阅读 JS 严格模式 中的更多内容。

String.trim()

String.trim() 删除字符串两端的空白字符。

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Stringmethoden 中阅读更多内容。

Array.isArray()

isArray() 方法检查对象是否为数组。

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS 数组 中阅读更多内容。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数。

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.map()

这个例子给每个数组值乘以 2：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.filter()

此例用值大于 18 的元素创建一个新数组：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.reduce()

这个例子确定数组中所有数的总和：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.reduceRight()

Dieser Beispiel ist ebenfalls dazu bestimmt, den Gesamtwert aller Zahlen im Array zu bestimmen：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.every()

Dieser Beispiel überprüft, ob alle Werte über 18 hinausgehen：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.some()

Dieser Beispiel überprüft, ob einige Werte über 18 hinausgehen：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

Array.indexOf()

Suchen Sie den Wert eines bestimmten Elements im Array und geben Sie seine Position zurück：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-IterationsmethodenLernen Sie mehr darüber.

Array.lastIndexOf()

Array.lastIndexOf() und Array.indexOf() Ähnlich, aber die Suche beginnt am Ende des Arrays.

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie JS-Array-Iterationsmethoden Lernen Sie mehr darüber.

JSON.parse()

Eine häufige Anwendung von JSON ist das Empfangen von Daten von einem Webserver。

Stellen Sie sich vor, Sie erhalten diesen Textstring von einem Webserver：

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

JavaScript-Funktion JSON.parse() Verwendet, um Text in ein JavaScript-Objekt zu konvertieren：

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

Versuchen Sie es selbst

Bitte besuchen Sie unsere JSON-Tutorial Lernen Sie mehr darüber.

JSON.stringify()

Eine häufige Anwendung von JSON ist das Senden von Daten an einen Webserver。

Wenn Daten an einen Webserver gesendet werden, müssen sie ein String sein。

Stellen Sie sich vor, wir haben in JavaScript dieses Objekt：

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

Verwenden Sie die JavaScript-Funktion JSON.stringify(), um ihn in einen String zu konvertieren。

var myJSON = JSON.stringify(obj);

Das Ergebnis wird ein String sein, der der JSON-Abbildung folgt。

myJSON ist jetzt ein String, bereit, an den Server gesendet zu werden：

Beispiel

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

Versuchen Sie es selbst

Bitte besuchen Sie unsere JSON-Tutorial Lernen Sie mehr darüber.

Date.now()

Date.now() gibt die Anzahl der Millisekunden seit dem Null-Datum (1. Januar 1970 00:00:00:00) zurück.

Beispiel

var timInMSs = Date.now();

Versuchen Sie es selbst

Date.now() gibt das gleiche Ergebnis zurück wie die Ausführung von getTime() auf dem Date-Objekt.

Bitte besuchen Sie JS-Datum mehr zu erfahren.

Eigenschaft Getter und Setter

ES5 ermöglicht es Ihnen, Objektmethoden mit einer Syntax zu definieren, die ähnlich ist wie das Abrufen oder Setzen von Eigenschaften.

Dieser Beispiel erstellt für die Eigenschaft fullName eine getter:

Beispiel

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Verwende Getter, um Daten aus dem Objekt anzuzeigen:
document.getElementById("demo").innerHTML = person.fullName;

Versuchen Sie es selbst

Dieser Beispiel erstellt für die Eigenschaft Sprache eine setter und getter:

Beispiel

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Verwende Setter, um Objekteigenschaften zu setzen:
person.lang = "en";
// Verwende Getter, um Daten aus dem Objekt anzuzeigen:
document.getElementById("demo").innerHTML = person.lang;

Versuchen Sie es selbst

Dieser Beispiel verwendet Setter, um sicherzustellen, dass die Großbuchstaben-Update des Sprachwertes aktualisiert wird:

Beispiel

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Verwende Setter, um Objekteigenschaften zu setzen:
person.lang = "en";
// Zeige Daten aus dem Objekt an:
document.getElementById("demo").innerHTML = person.language;

Versuchen Sie es selbst

Bitte besuchen Sie JS-Objekt-Accessor mehr über Getter und Setter zu erfahren.

Neue Objektattribute und Methoden

Object.defineProperty() ist eine neue Objekt-Methode in ES5.

Es ermöglicht Ihnen, Eigenschaften von Objekten zu definieren und/oder die Werte und/oder Metadaten der Eigenschaften zu ändern.

Beispiel

// 创建对象：
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;

Versuchen Sie es selbst

下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

Beispiel

// 创建对象：
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;

Versuchen Sie es selbst

此例创建一个 setter 和 getter 来确保语言的大写更新：

Beispiel

// 创建对象：
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;

Versuchen Sie es selbst

ES5 新的对象方法

ECMAScript 5 为 JavaScript 添加了许多新的对象方法：

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 将所有属性作为数组返回
Object.getOwnPropertyNames(object)
// 将可枚举属性作为数组返回
Object.keys(object)
// 访问原型
Object.getPrototypeOf(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// Verhindert das Hinzufügen von Eigenschaften zum Objekt
// Verhindert das Hinzufügen von Eigenschaften zum Objekt
// Wenn es möglich ist, Eigenschaften zum Objekt hinzuzufügen, wird true zurückgegeben
// Verhindert das Hinzufügen von Eigenschaften zum Objekt
// Verhindert das Hinzufügen von Eigenschaften zum Objekt
// Verhindert die Änderung der Objekteigenschaften (nicht der Werte)
// Wenn das Objekt versiegelt ist, wird true zurückgegeben
// Verhindert, dass Änderungen am Objekt vorgenommen werden
// Wenn das Objekt gefroren ist, wird true zurückgegeben
Object.isFrozen(object)

Bitte besuchen Sie Objekt ECMAScript5 Lernen Sie mehr darüber.

der Zugriff auf die Eigenschaften der Zeichenkette

charAt() Die Methode gibt den Buchstaben an der angegebenen Indexposition (Position) der Zeichenkette zurück:

Beispiel

var str = "HELLO WORLD";
str.charAt(0);            // gibt H zurück

Versuchen Sie es selbst

ECMAScript 5 erlaubt den Zugriff auf die Eigenschaften der Zeichenkette:

Beispiel

var str = "HELLO WORLD";
str[0];                   // gibt H zurück

Versuchen Sie es selbst

der Zugriff auf die Eigenschaften der Zeichenkette kann etwas unvorhersehbar sein.

Bitte besuchen Sie JS-Stringmethoden Lernen Sie mehr darüber.

Followende Kommas (Trailing Commas)

ECMAScript 5 erlaubt das Verwenden von followenden Kommas bei der Definition von Objekten und Arrays:

Objekt-Instanz

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

Array-Instanz

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

Warnung！！！

Internet Explorer 8 wird abstürzen.

JSON erlaubt keine followenden Kommas.

JSON-Objekt：

// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON-Array：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

Mehrzeilige Strings

Wenn Backslashes zur Flucht verwendet werden, ermöglicht ECMAScript 5 mehrzeilige Stringtexte (Literals):

Beispiel

"Hello \

Kitty!";

Versuchen Sie es selbst

Die \-Methode wird möglicherweise nicht allgemein unterstützt.

Ältere Browser könnten den Leerzeichen um den Backslash auf unterschiedliche Weise behandeln.

Einige alte Browser erlauben nicht Leerzeichen nach dem Backslash.

Eine sicherere Methode zur Zerlegung von Stringtexten ist die Verwendung von Stringaddition:

Beispiel

"Hello " + 
"Kitty!";

Versuchen Sie es selbst

Reservewörter als Attributnamen

ECMAScript 5 ermöglicht es, Reservewörter als Attributnamen zu verwenden:

Objekt-Beispiel

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

Versuchen Sie es selbst

Browser-Unterstützung für ES5 (ECMAScript 5)

Chrome 23, IE 10 und Safari 6 sind die ersten Browser, die ECMAScript 5 vollständig unterstützen:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 Juli 2012 Juli 2013